gpt4 book ai didi

javascript - 传单根据文本字段更改圆圈标记颜色

转载 作者:行者123 更新时间:2023-11-27 23:14:08 25 4
gpt4 key购买 nike

我使用以下代码在我的传单 map 上做了圆圈标记,一切正常。

但是我想根据名为“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);

最佳答案

整理好了。这是我的代码

    <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>

关于javascript - 传单根据文本字段更改圆圈标记颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44206050/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com