时间戳

首页 > 解决方案 > 从 geoJSON 数据集中添加一个类

leaflet - 从 geoJSON 数据集中添加一个类

问题描述

我正在尝试使用 Leaflet 0.7.3 基于 geoJSON 属性为 Leaflet 地图上的标记提供一个类。我希望能够根据它使用 CSS 表示的裁剪来更改标记的颜色。这似乎很简单，但我尝试的一切都失败了。

我试过使用：

L.DomUtil.addClass(marker._icon, 'className');

和

addClass(marker, '我在这里使用一个变量');

但它不起作用。到目前为止，这是我正在使用的代码：

L.geoJson(geoDataF,{
pointToLayer: function(feature,latlng){
var className = feature.properties.crop;
console.log(className);
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.name 
+ '<br/>' + feature.properties.location
+ '<br/>' + "Crops: " + feature.properties.crop);
console.log(marker);
return marker;
}
}).addTo(map);

我不确定在哪里添加一些额外的代码来添加类以及使用什么语法。每次我使用 addclass 时，我都会收到一条消息，因为它不是函数，所以我无法使用它。我虽然关于使用 D3 尝试添加一个类，但我不完全理解传单并且很难操作 DOM。

标签： leaflet

解决方案

请参阅：传单更改标记颜色

addClass 用于向 html 元素添加类，因此您可以指定哪些元素，例如： $(selector).addClass(header, 'closed'); 请参阅此：https : //www.w3schools.com/jquery/html_addclass.asp 使用 addClass

getColor() write function in the js script to adjust your color accordingly     
function style(feature) {
        return {
            fillColor: getColor(feature.properties.density),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        };
    }
L.geoJson(statesData, {style: style}).addTo(map);

这是传单教程中的示例，请参考它（很有帮助） https://leafletjs.com/examples/choropleth/

标记也是图像（png）是正确的，因此您将无法更改其颜色，定义不同的图像（具有不同颜色的标记）。

推荐阅读