Рендеринг geoJSON с использованием D3 и листовки с использованием imageOverlay

Question

Быстрая версия: У меня возникли проблемы с отображением элемента d3 на статическом изображении, отображаемом листом. Он работает, если я использую пример d3noob (http://bl.ocks.org/d3noob/9211665) ... но у меня проблемы с его расширением. Я предполагаю, что это из-за языка и длинного перевода или проекции, но я не уверен, что мне нужно изменить. Я пытаюсь отобразить GeoJSON в центре изображения (мой код на JSFiddle: https://jsfiddle.net/g_at_work/qyhf0qz0/12/)

Longer версия: Я пытаюсь расширить пример d3noob, так что я могу показать GeoJSON на статических изображений с использованием Листовка и D3 (требование от моего босса, к сожалению). Я смог воспроизвести пример на основе плитки d3noob, но у меня были проблемы со статической версией.

Я смог отобразить статическое изображение, но я не смог отобразить синий прямоугольник на изображении. Я не уверен, что мне нужно сделать, чтобы манипулировать положением синего прямоугольника, описанного в 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 и брошюру) Благодаря кучу G

Answer 1

так после некоторых мастерить я обнаружил, что создание новой проекция позволила мне установить местоположение и масштаб карты, так что я мог бы поместить его там, где мне нужно было, чтобы это было:

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

возился с «смещением» переменным позволил мне установить место и играть с переменной «масштаба» позволил мне изменить размер карты (масштаб является [х, х] значение)

Надеется, что это поможет кому-то.