Question

我正在使用传单，它有地图图层和svg图层。但是当我缩放时，svg图层不会与地图图层大小一起缩放。这使得svg图层大小错误，并且不显示我的svg内容

这是我的代码

MapLeaflet.prototype.init = function (map) {
  let $$ = this;
  $$.dom = map;
  this.map = L.map(map).setView([-6.175239, 106.827204], 13);
  L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo($$.map);

  this.svg = d3.select($$.map.getPanes().overlayPane).append("svg")
    .attr('style', 'display: flex; flex: 1 1 auto; min-height: 100vh; min-width: 100vw; position: relative; flex-grow: 1')
    .append("g").attr("class", "leaflet-zoom-hide");
}

Answer 1

我不应该手动添加SVG图层。 Leaflet有自己的添加svg图层的功能

这是我的最终代码

MapLeaflet.prototype.init = function (map) {
  let $$ = this;
  $$.dom = map;
  this.map = L.map(map).setView([-6.175239, 106.827204], 13);
  L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo($$.map);

  var svgLayer = L.svg();
  svgLayer.addTo(this.map);
  this.svg = d3.select('svg g');
}

SVG图层不重新缩放宽度图层

1 个答案: