如何绘制不同大小的标记答案

【问题标题】：How to draw markers of different sizes如何绘制不同大小的标记
【发布时间】：2015-07-30 08:49:22
【问题描述】：

以下 html 脚本按计划绘制指定的地图图块和标记。但是，标记的大小是相同的。如何绘制具有“平面”列表中第 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>

【问题讨论】：

标签： html leaflet gis

【解决方案1】：

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

在此处查看文档：

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

【讨论】：

【解决方案2】：

您将iconSize 指定为标记对象的选项。这不是合适的方式。

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

这里是代码sn-p

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

【讨论】：