如何绘制不同大小的标记

Question

以下 html 脚本按计划绘制指定的地图图块和标记。但是，标记的大小是相同的。如何绘制列表 'planes' 中第 3 项和第 4 项指定大小的标记？这样我就可以根据某些属性区分不同的标记。

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>

var planes = [
    ["7C6B07",-40.99497,174.50808, 5, 5],
    ["7C6B38",-41.30269,173.63696, 10, 10],
    ["7C6CA1",-41.49413,173.5421, 15, 5],
    ["7C6CA2",-40.98585,174.50659, 15, 15],
    ["C81D9D",-40.93163,173.81726, 20, 5],
    ["C82009",-41.5183,174.78081, 20, 10],
    ["C82081",-41.42079,173.5783, 5, 15],
    ["C820AB",-42.08414,173.96632, 5, 9],
    ["C820B6",-41.51285,173.53274, 7, 12]
    ];

    var map = L.map('map').setView([-41.3058, 174.82082], 8);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

    for (var i = 0; i < planes.length; i++) {
        marker = new L.marker([planes[i][1],planes[i][2]], {iconSize: [planes[i][3], planes[i][4]]})
            .bindPopup(planes[i][0])
            .addTo(map);
    }

</script>
</body>
</html>

Answer 1

您正在将 iconSize 作为选项分配给标记对象。这不是合适的方式。

实际上，你需要创建一个icon对象，在那里设置iconSize值，然后在map对象的选项中使用这个icon对象。

这是代码片段

for (var i = 0; i < planes.length; i++) {

    //create an icon object for each marker
    var myIcon = L.icon({
        iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
        iconSize: [planes[i][3], planes[i][4]] //set icon size here
    });

    marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})// use the above icon object here
        .bindPopup(planes[i][0])
        .addTo(map);
}

尽管图标看起来不太好。这里正在工作 fiddle

Answer 2

Leaflet 似乎不允许用户修改默认标记的大小。但是，您可以创建自己的自定义 ICON 并扩展常规标记 class，修改其大小和其他属性。

在此处查看文档：

http://leafletjs.com/reference.html#icon

如何绘制不同大小的标记

How to draw markers of different sizes

html

leaflet

gis