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