1
私は最近、私のWurm Onlineゲーム同盟のためのマップを作成することを任されました。私は、ゲーム内の地図の静的な画像上に天才SVGベースのオーバーレイを作成しました。基本的にスプレッドシートからデータを取得し、マップ上の村をレンダリングします。OpenLayers3カスタムマップズーム時のマーカーのサイズ変更
しかし、私たちにはメンバー全員がマップされているので、私たちの土地のズーム可能なウェブベースの地図をどのように作成できるか見ていきました。ゲームの管理者は、毎年またはそれ以降にマップダンプを提供しているので、カスタムマップアプリケーションを作成できます。私は気になる島/サーバーの最近の地図ダンプをダウンロードしました。
ザナドゥのダンプは、解像度8192 x 8192ピクセルの62MB PNGです。私はタイル作成プログラム（MapTilerバージョン7）を見つけました。タイルを作成しようとしました。タイルがレンダリングされた後、プログラム自体は、プログラムですべてのJavaScriptを埋め込んだHTMLファイルを作成します。それは私にOpenLayers3を頭から始めました。
私は村の座標を再計算でき、村のサークルとズーム可能なタイルマップを一緒に並べることができました。言うまでもなく、自分のカスタムOpenLayers3マップを取得したとき、私はとても満足していました。 （使用例：http://jackswurmtools.com/Content/Static/map.html）
私が設定した方法では、各マップの「装飾」または色付き円が独自のベクターです。
私の仲間のゲーマーからの私の拡大可能な地図に関する主な苦情は、村の色の色が大きくなりすぎているが、ズームインすると小さすぎることです。 私はあらゆる種類のものを試しましたが、まだ適切な例を見つけることはできません。私はイベントに基づいてSVG要素を見つけて変換することに慣れていますが、OP3キャンバスレンダリングはDOMではわかりません。
私の質問のいくつかは以下のとおりです
- 私のマップがズームされたとき、どのように私は検出することができますか？コールバックがありますか？
- ズームが検出されたら、すべてのベクトルを繰り返し処理し、円の半径を更新するにはどうすればよいですか？
// jacks fully zoomable xanadu map
var data =
[{
X: "6744",
Y: "-2355.75",
Name: "Amish Creek",
Villagers: ["Aniceset", "Fulano"],
BackColor: "Aquamarine",
LandMarkType: "Member"
}, {
X: "6808.75",
Y: "-2265.125",
Name: "Amish Estates",
Villagers: ["Aniceset", "Villagers"],
BackColor: "Purple",
LandMarkType: "Member"
}];
console.log(data);
var mapExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var mapMaxResolution = 1.00000000;
var tileExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapResolutions = [];
for (var z = 0; z <= mapMaxZoom; z++) {
mapResolutions.push(Math.pow(2, mapMaxZoom - z) * mapMaxResolution);
}
var mapTileGrid = new ol.tilegrid.TileGrid({
extent: tileExtent,
minZoom: mapMinZoom,
resolutions: mapResolutions
});
var features = [];
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PNGMAP',
tileGrid: mapTileGrid,
url: "http://jackswurmtools.com/Content/Static/{z}/{x}/{y}.png"
})
}),
],
view: new ol.View({
zoom: 4,
center: [6602.375, -2250.3125],
projection: ol.proj.get('PNGMap'),
maxResolution: mapTileGrid.getResolution(mapMinZoom)
}),
});
map.getView();
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
console.log(coord);
$("#coord-overlay").html("[" + coord[0] + ", " + coord[1] + "]");
});
// zoom stuff?
// add layers via JSON iteration
renderSVG(data);
drawLines();
function renderSVG(data) {
var vectorSource = new ol.layer.Vector({});
console.log(map.getView().getZoom());
jQuery.each(data, function() {
var fill = new ol.style.Fill({
color: this.BackColor
});
var stroke = new ol.style.Stroke({
color: [180, 0, 0, 1],
width: 1
});
var style = new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: map.getView().getZoom() * 5,
opacity: 0.7
}),
fill: fill,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: this.Name,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var point_feature = new ol.Feature({});
var point_geom = new ol.geom.Point([this.X, this.Y]);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature],
})
});
vector_layer.setStyle(style);
map.addLayer(vector_layer);
});
}
function drawLines() {
var stroke = new ol.style.Stroke({
color: [255, 0, 0, 1],
width: 6
});
var style = new ol.style.Style({
fill: null,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: "Sandokhan/Wargasm Canal",
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var line_feature = new ol.Feature({});
var coords = [
[6607.5, -1921],
[6894, -1921]
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coords, 'XY'),
name: 'Line',
})]
})
});
layerLines.setStyle(style);
map.addLayer(layerLines);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
<div id="map"></div>
<div id="coord-overlay">[6612, -2252]</div>
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
私の切断の1つは、私の村のデータイテレータ内のすべてのサークルを個別のベクターとして追加することだと思います。私の最初のビジネスは、単一のベクトルに複数の機能として円を追加することです。 – InvoiceGuy
それで、私は自分のコードをちょっと騒がしています。私はまだ村のドットのために複数のレイヤーから降りることができませんでした。今度は、反復的な意味でのベクトルのターゲット設定方法を理解する必要があります。 – InvoiceGuy
こんにちは。私はOL3とベクターレイヤーの操作でかなり努力しました。代わりに、私はOL3とD3の統合が私が行きたいと思った場所であることを発見しました。 [リンク]（http://firefly.ibk.se/~racer/ol3_d3_trans.html）、私はタイルレイヤーにSVGレイヤーをオーバーレイすることができました。そして、私のSVGを再マップして、これまでのマップポストレンダリングイベント：map.on（ 'postrender'、function（event）{// stuff}）; – InvoiceGuy