Question

我需要添加一个包含多个预定义svg元素的控件。它们显示了离岸到欧洲的地区的轮廓。它们具有不同的缩放级别。徘徊在主要国家应该突出相应的离岸地区。单击其中一个将主地图移动到该区域。除此之外，不需要额外的行为。

然而，SVG不会渲染。我使用L.Control.extend对SVG控件进行分类：

    L.Insets = L.Control.extend({
    options: {
        position: 'bottomleft'
    },

    initialize: function () {
        this._insets = {
            "FR93":{translate: {x: 118, y:-485}, paths:["M-66 513L-76 531L-80 535L-89 533L-94 536L-99 533L-95 529L-93 521L-97 513L-98 504L-91 494L-81 498L-68 507L-66 512z"]},
            "FR91_2":{translate: {x: 192, y:-353}, paths:["M-177 373L-178 370L-175 372L-177 373z", "M-179 375L-180 376L-180 371L-179 375z","M-173 394L-174 389L-170 393L-171 394z"]}
        }
    },

    onAdd: function (map) {
        // create a DOM element and put it into one of the map panes
        this._container = L.DomUtil.create('div', 'wt-inset-pane');

        for (var id in this._insets) {
            var inset = L.DomUtil.create("div", "inset", this._container);
            inset.id = id;
            var svg = L.DomUtil.create("svg", "", inset);
            svg.setAttribute("width", "100");
            svg.setAttribute("height", "100");
            var g = L.DomUtil.create("g", "", svg);
            for (var i=0,l=this._insets[id].paths.length; i < l; i++) {
                var path = L.DomUtil.create("path", "", g);
                path.setAttribute("style", "transform: translate(" + this._insets[id].translate.x + "px, " + this._insets[id].translate.y + "px);");
                path.setAttribute("stroke-linejoin", "round");
                path.setAttribute("stroke-linecap", "round");
                path.setAttribute("fill-rule", "evenodd");
                path.setAttribute("stroke", "#808080");
                path.setAttribute("stroke-opacity", "1");
                path.setAttribute("stroke-width", "1");
                path.setAttribute("fill", "#FFFFFF");
                path.setAttribute("fill-opacity", "1");
                path.setAttribute("d", this._insets[id].paths[i]);
            }
        }
        return this._container;
    }
});

L.insets = function () {
    return new L.Insets();
};

我使用map.addControl(L.insets());

实例化该类

所有内容都是核心插入的，但SVG没有显示。

Answer 1

你的“g”也需要一种风格“变换”^^

L.Insets = L.Control.extend({
    
    options: {
	position: 'bottomright'
    },

    initialize: function() {
	this._insets = {
	    
	    // FRANCE
	    
	    "FR93":{translate: {x: 118, y:-485}, paths:["M-66 513L-76 531L-80 535L-89 533L-94 536L-99 533L-95 529L-93 521L-97 513L-98 504L-91 494L-81 498L-68 507L-66 512z"]},
	    "FR91_2":{translate: {x: 192, y:-353}, paths:["M-177 373L-178 370L-175 372L-177 373z", "M-179 375L-180 376L-180 371L-179 375z","M-173 394L-174 389L-170 393L-171 394z"]},
	    "FR94":{translate:{x:-770, y:-979}, paths:["M790 1011L785 1009L786 1005L788 1005L791 1008L790 1011z"]},
	    
	    // PORTUGAL
	    
	    "PT20":{translate:{x:522,y:-443},paths:["M-440 484L-430 484L-434 487L-442 487L-446 483L-445 482L-440 484z","M-498 467L-500 468L-507 466L-507 464L-504 463L-496 467L-498 467z","M-474 460L-478 460L-481 457L-475 457L-473 459L-474 460z","M-492 462L-490 463L-497 461L-502 457L-494 460z","M-511 464L-514 461L-510 461L-510 464z"]},
	    "PT30":{translate:{x:262,y:-595},paths:["M-242 628L-246 628L-251 624L-249 622L-246 624L-243 623L-239 625L-239 627L-241 628z"]},
	    
	    // ESPAGNE
	    
	    "ES70":{translate:{x:641,y:-960},paths:["M-612 995L-616 991L-607 988L-607 990L-611 994z","M-586 995L-588 995L-585 993L-583 987L-581 986L-581 993L-586 995z","M-601 999L-603 996L-602 994L-599 994L-599 998z","M-579 984L-581 985L-576 980L-576 982L-579 984z","M-626 989L-628 986L-627 985L-625 988L-626 989z","M-618 994L-619 996L-620 993L-618 994z","M-627 1000L-630 999L-627 998L-627 1000z"]}
	    
	}
    },

    onAdd: function (map) {
	    
	this._container = L.DomUtil.create('div', 'leaflet-insets');
	    	    	    
	var xHTML = '';

	for (var id in this._insets) {

	    var pathx = this._insets[id].translate.x;
	    var pathy = this._insets[id].translate.y;

	    xHTML += '<div id="'+id+'" class="inset">';
	    xHTML += '<svg>';
	    xHTML += '<g style="transform: translate('+pathx+'px,'+pathy+'px)">';

	    for (var i=0,l=this._insets[id].paths.length; i < l; i++) {
		xHTML += '<path d="'+ this._insets[id].paths[i] +'" ';
		xHTML += ' class="leaflet-clickable" ';
		xHTML += ' fill-opacity="1" ';
		xHTML += ' fill="#FFFFFF" ';
		xHTML += ' stroke-width="1" ';
		xHTML += ' stroke-opacity="1" ';
		xHTML += ' stroke="#808080" ';
		xHTML += ' fill-rule="evenodd" ';
		xHTML += ' stroke-linecap="round" ';
		xHTML += ' stroke-linejoin="round" ';
		xHTML += '/>';
	    }

	    xHTML += '</g></svg></div>';
	}

	this._container.innerHTML = xHTML;

	return this._container;
    }
});

L.insets = function () {
    return new L.Insets();
};

将预定义的静态SVG添加到Leaflet映射不起作用

1 个答案: