使用D3渲染geoJSON和使用imageOverlay的小冊子

快速版：我在顯示Leaflet的靜態圖像時顯示d3元素時遇到問題。如果我使用d3noob的（http://bl.ocks.org/d3noob/9211665）示例，它可以工作......但我無法擴展它。我猜這是因爲郎朗和長篇翻譯或投影，但我不知道我需要改變。我想在圖像的（我的代碼上的jsfiddle：https://jsfiddle.net/g_at_work/qyhf0qz0/12/）中心顯示GeoJSON的使用D3渲染geoJSON和使用imageOverlay的小冊子

加長版： 我試圖延長d3noob的例子，這樣我可以使用靜態圖像顯示GeoJSON的傳單和D3（不幸的是我的老闆的要求）。我能夠重現d3noob的基於tile的示例，但是我遇到了靜態版本的問題。

我已經能夠顯示靜態圖像，但我還沒有能夠顯示圖像上的藍色矩形。我不知道我需要做什麼來操縱JSON中描述的藍色矩形的位置。

我已經試過玩弄設置在projectPoint功能的座標，但沒有運氣：

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

在這個階段，我想我需要描述一個新的投影，但我不知道是什麼。下面是我用它來顯示靜態圖像的代碼：

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);

這將是巨大的，如果有人能提出了maniuplating矩形的位置的策略（我是新來的D3和小葉）多謝摹

來源

2017-01-16 A guy at work

所以經過一番擺弄我發現，創建一個新的投影使我能夠設置位置和縮放地圖，所以我可以把它放在哪裏，我需要它是：

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]值）

希望這可以幫助別人。

來源

2017-01-29 23:39:18

使用D3渲染geoJSON和使用imageOverlay的小冊子

回答

相關問題