2017-01-16 10 views
1

クイックバージョン:リーフレットが表示する静止画像にd3要素を表示する際に問題があります。私がd3noobの(http://bl.ocks.org/d3noob/9211665)の例を使用すると動作しますが、それを拡張するのに問題があります。私はそれがランと長い翻訳や投影のためだと思っていますが、私は何を変える必要があるのか​​分かりません。私は(JSFiddle上の私のコード:https://jsfiddle.net/g_at_work/qyhf0qz0/12/)画像の中心ににGeoJSONを表示しようとしているimageOverlayを使用してD3とリーフレットを使用してgeoJSONをレンダリングする

長いバージョン: 私は、私が使用して静止画像上にGeoJSONを表示できるようにd3noobの例を拡張しようとしていますリーフレットとD3(残念ながら私の上司の要件)。私はd3noobのタイルベースの例を再現することができましたが、私は静的バージョンに問題がありました。

静止画像を表示できましたが、画像上に青色の矩形を表示できませんでした。私は、JSONで説明されている青い矩形の位置を操作するために何をする必要があるのか​​分かりません。

私はprojectPoint機能に座標を設定して遊んでみましたが、運:

function projectPoint(x, y) { 
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); 
this.stream.point(point.x, point.y); 
} 

この段階で、私は私が新しい投影を記述する必要がありますが、私はわからないんだけど考えてんです。 (私はD3とリーフレットに新たなんだ)誰かが矩形の位置をmaniuplatingための戦略を提案することができれば

var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple}); 
var southWest = map.unproject([0,882],map.getMaxZoom()); 
var northEast = map.unproject([1085,0],map.getMaxZoom()); 
var imageBounds = new L.LatLngBounds(southWest,northEast); 
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map); 
map.fitBounds(imageBounds); 

はそれは素晴らしいことだ: は、ここで私は、静的な画像を表示するために使用しているコードです。 おかげでたくさん G

答えて

0

ので、私は新しい投影は場所を設定し、マップを拡大するために私を有効に作る私がすることが必要な場合ので、私はそれを置くことが分かっいくつかの工夫の後:

var center = d3.geo.centroid(geoShapeInstance); var scale = [800000]; var offset = [175, 1]; var projection = d3.geo.mercator().scale(scale).center(center).translate(offset); var path = d3.geo.path().projection(projection);

「オフセット」変数は私の場所を設定することができいじると「規模」変数で遊んで、これは誰かに役立ちます

・ホープ(スケールは[X、X]の値である)私はマップのサイズを変更することができました。

関連する問題