Javascript 基于文本字段的单张更改圆标记颜色

Javascript 基于文本字段的单张更改圆标记颜色,javascript,html,leaflet,geojson,Javascript,Html,Leaflet,Geojson,我有我的传单地图上的圆圈标记使用以下代码,这一切都很好 但是,我希望根据名为“stype”的属性字段以不同的颜色显示标记 关于我如何实现这一目标,有什么帮助或指导吗 function siteslabels (feature, layer){ layer.bindPopup("<p class='info header'>"+ "<b>" + feature.properties.SITE + "</b>" +

我有我的传单地图上的圆圈标记使用以下代码,这一切都很好

但是,我希望根据名为“stype”的属性字段以不同的颜色显示标记

关于我如何实现这一目标,有什么帮助或指导吗

        function siteslabels (feature, layer){
        layer.bindPopup("<p class='info header'>"+ 
        "<b>" + feature.properties.SITE + "</b>" + 
        "</br>" + feature.properties.Address1 +
        "</br>" + feature.properties.stype +
        "</p>");
        };


        var geojsonMarkerOptions = {
            radius: 8,
            fillColor: 'green',
            color: 'black',
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        };

        L.geoJson(sites, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            },
            onEachFeature: siteslabels
        }).addTo(map);
功能站点标签(功能、图层){
layer.bindPopup(“

”+ “”+feature.properties.SITE+“”+ “
”+feature.properties.Address1+ “
”+feature.properties.stype+ “

”; }; var geojsonMarkerOptions={ 半径:8, fillColor:'绿色', 颜色:'黑色', 体重:1, 不透明度:1, 填充不透明度:0.8 }; L.geoJson(站点、{ pointToLayer:功能(特性、latlng){ 返回L.circleMarker(latlng、geojsonMarkerOptions); }, onEachFeature:siteslabels }).addTo(地图);
再次检查,
指向图层
选项部分

如果将点渲染为圆形标记,则可以轻松地将其
样式设置为使用不同的颜色


如果您坚持使用标记,则必须提供自定义图标。您可以查找,例如..

已将其排序。这是我的密码

    <script>    
        <!-- long and lat for UK & Zoom level for whole of UK  -->
        var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5});

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);



        <!-- LAYERS/SITES -->
        <!-- LAYERS/SITES POP UP CONTENT-->
        function siteslabels (feature, layer){
        layer.bindPopup("<p class='info header'>"+ 
        "<b>" + feature.properties.SITE + "</b>" + 
        "</br>" + feature.properties.Address1 +
        "</br>" + feature.properties.stype +
        "</p>");
        };

        <!-- LAYERS/SITES POP UP COLOUR CIRCLE MARKERS->
        function getColor(stype) {
          switch (stype) {
            case 'POP':
              return  'orange';
            case 'Regen':
              return 'green';
            case 'LLU':
              return 'blue';
            case 'Colo':
              return 'purple';
            case 'DMSU':
              return 'blue';
            default:
              return 'white';
          }
        }

        <!-- LAYERS/SITES ADD LAYER->
        L.geoJson(sites, {
            pointToLayer: function (feature, latlng) {
            return new L.CircleMarker(latlng, {radius: 8, 
                                                fillOpacity: 1, 
                                                color: 'black', 
                                                fillColor: getColor(feature.properties.stype), 
                                                weight: 1,});
            },
            onEachFeature: siteslabels
        }).addTo(map);


    </script>

var map=L.map('map',{center:[54.038486,-1.948915],zoom:5});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性:“©;贡献者”
}).addTo(地图);
功能站点标签(功能、图层){
layer.bindPopup(“

”+ “”+feature.properties.SITE+“”+ “
”+feature.properties.Address1+ “
”+feature.properties.stype+ “

”; };