javascript - 将 SVG 对象而不是文件添加到 LeafletJs

Question

我想将修改后的 SVG 对象添加到 map 而不是原始文件。

$.ajax({
        method: 'get',
        url: 'zones.svg',
        dataType: 'html'
    }).then(function (value) {
        var svg = $(value);
        var width = svg.attr("width");
        var height = svg.attr("height");

    var zoneBounds = [[-height, 0], [0, width]];

    L.imageOverlay('zones.svg', zoneBounds, {
        opacity: 0.5
    }).addTo(mymap);
});

有没有办法覆盖原来的 imageOverlay() 方法来接受对象而不是文件的 URL？还是有其他内置方法？

Answer 1

您可以从 VideoOverlay class 中汲取一些灵感: 扩展 ImageOverlay 并覆盖 _initImage 以创建 SVG 节点而不是图像。

你的类定义可能是这样的

var SVGOverlay = L.ImageOverlay.extend({
    options: {
    },

    _initImage: function () {
        var wasElementSupplied = this._url.tagName.toLowerCase() === 'svg';
        var svg = this._image = wasElementSupplied ? this._url : L.DomUtil.create('svg');
   }
});

根据你的例子，你可以这样设置

var svgdomnode = svg.get(0); // your svg looks like a jQuery object, let's use a DOM node
var overlay = new SVGOverlay(svgdomnode, zoneBounds).addTo(mymap);

还有一个演示，其中 SVG 节点作为图层插入并在您单击按钮时进行修改。

var SVGOverlay = L.ImageOverlay.extend({
    options: {
    },

    _initImage: function () {
        var wasElementSupplied = this._url.tagName.toLowerCase() === 'svg';
        var svg = this._image = wasElementSupplied ? this._url : L.DomUtil.create('svg');
   }
});

var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
map.fitBounds(bounds);

var svg = document.getElementById('src').content.querySelector('svg');
var overlay = new SVGOverlay(svg, bounds).addTo(map);


var n = 0;
document.querySelector('button').addEventListener('click', function() {
    var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
   
    rect.setAttribute('x', 20*n);
    rect.setAttribute('width', 20);
    rect.setAttribute('height', 20);
    rect.setAttribute('fill', '#0000ff');
    svg.appendChild(rect);
    
    n++;
});

html, body {
  height: 100%;
  margin: 0;
}
#svg {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
button {position: absolute; left:100px; top: 0;z-index:10000}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

<template id='src'>
<svg xmlns="http://www.w3.org/2000/svg" width='100' height='100'>
    <rect width="100%" height="100%" fill="red"/>
    <circle cx="50%" cy="50%" r="30%" fill="green"/>
</svg>
</template>

<div id='map'></div>
<button>Click to add a square</button>