Javascript 基于文本字段的单张更改圆标记颜色
我有我的传单地图上的圆圈标记使用以下代码,这一切都很好 但是,我希望根据名为“stype”的属性字段以不同的颜色显示标记 关于我如何实现这一目标,有什么帮助或指导吗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>" +
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: '© <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+
“
”;
};