Сделать SVG поверх карты листовки не реагирующим на события панорамирования - PullRequest
Новая
       18

Сделать SVG поверх карты листовки не реагирующим на события панорамирования

0 голосов
/ 10 июня 2018

Я создал этот простой пример карты листовки, поверх которого я рисую svgs со следующим кодом: 

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {maxZoom: 20, attribution: osmAttrib});

var map = L.map('map').setView([37.5, -115], 6).addLayer(ism);


/* Initialize the SVG layer */
map._initPathRoot()    

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svn")
g = svg.append("g")
    .attr("width",width)
    .attr("height", height);

var row = svg.selectAll(".row")
    .data(gridData)
    .enter().append("g")
    .attr("class", "row");

var column = row.selectAll(".square")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("class","square")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("width", function(d) { return d.w; })
    .attr("height", function(d) { return d.h; })
    .style("fill", "#fff")
    .style("fill-opacity","0.1")
    .style("stroke", "#222")

Теперь моя проблема заключается в том, что всякий раз, когда я панорамирую карту, все, что я добавил как SVG накарта также панорамируется, есть ли способ обойти это?

1 Ответ

0 голосов
/ 11 июня 2018

Вы помещаете все свои вещи D3 в контейнер SVG, которым управляет Leaflet: 

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svn")

... и Leaflet заботится о перемещении и масштабировании всего, что находится внутри контейнера карты.

есть ли способ обойти это?

Да.Не используйте корневые контейнеры Leaflet <svg> из L.SVG средств визуализации для своих собственных целей.

...