如何根据传单开放街道地图中的角色更改颜色答案

【问题标题】：how to change the colours based on role in leaflet open street maps如何根据传单开放街道地图中的角色更改颜色
【发布时间】：2019-12-19 20:47:16
【问题描述】：

var locations = [{ name:"bus", latitude:"12.56", longitude:"25.15, role: "traveler" },
                 { name:"bike", latitude:"13.56", longitude:"25.15, role: "traveler" },
                 { name:"John", latitude:"14.56", longitude:"25.15, role: "Developer" },
                 { name:"David", latitude:"12.56", longitude:"25.15, role: "Developer" },
                 { name:"Mango", latitude:"13.56", longitude:"25.15, role: "Fruit" },
                 { name:"Apple", latitude:"12.56", longitude:"25.15, role: "Fruit" }]



var map = L.map('mapid').setView([locations[0].latitude, locations[0].longitude], 8);
mapLink =
'<a href="#">ABC Corporation</a>';
    L.tileLayer(
   'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; ' + mapLink,
    maxZoom: 18,
    }).addTo(map);

for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i].latitude,locations[i].longitude])
    .bindPopup(locations[i].name)
    .addTo(map);

}

这是我的代码，我想根据角色更改标记的颜色，现在如果添加两条经纬度相同的记录，我只能看到最新的一条。我怎样才能看到另一个标记也

【问题讨论】：

标签： javascript leaflet openstreetmap

【解决方案1】：

对于您的第一个问题“更改颜色”：

您无法更改标记的颜色，但可以将默认图标替换为另一个图标。 https://leafletjs.com/examples/custom-icons/

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

for (var i = 0; i < locations.length; i++) {
    marker = new L.marker([locations[i].latitude,locations[i].longitude],{icon: greenIcon})
    .bindPopup(locations[i].name)
    .addTo(map);

}

要在同一点上查看两个标记，您可以使用 spiderfy 库，例如：https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet 或 https://github.com/Leaflet/Leaflet.markercluster

【讨论】：

你可以在 CSS 中使用 img 过滤来改变图标的颜色。
这个方便的计算器告诉你如何 - codepen.io/sosuke/pen/Pjoqqp
是的，我知道这行得通，但这不是一个好/好的方法。您的计算器仅使用黑色，但默认标记为蓝色。对我来说，这是更多的尝试和错误，然后是编码。
我会用我使用的一些代码发布答案 - 我从一个 divicon 开始。

【解决方案2】：

从我的代码 - 函数返回一个图标，其颜色由“feature.properties.service”选择：

function busservice(feature) {
  var service = feature.properties.service;
    var html = '<img class="arrow' + service +'" src="arrow-up-icon-29566.png">'     
    return new L.DivIcon({
        iconSize: 40,
         html: html});

    }

还有一些 CSS - '26' 的黄色图标 -

img.arrow26 {
    filter: invert(96%) sepia(50%) saturate(7493%) hue-rotate(1deg) brightness(102%) contrast(101%);
}

【讨论】：