我有一个GeoJSON特征集合，其中的点被分配到纬度坐标上，我想能够根据特定特征属性的值给它们分配可变的颜色。我看到了为不同的图层创建叶绿素的例子，但没有看到为导入的点创建叶绿素的例子。使用布局，这是我的getcolor函数，用于特定特征属性的某个范围内的值。
$.getJSON("LRV_NoUTEP.geojson", function (data) {
// add GeoJSON layer to the map once the file is loaded
function getColor(d) {
return d < 0 ? "#a6cee3" : d < -50 ? "#1F62FF" : "#001C5C";
}
这是我的geoJSON层创建的点，还创建了一个弹出式的所有信息，自己可以正常使用。
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 10,
fillOpacity: 0.85,
color: getColor(feature.properties.anomalymgals),
});
//var marker = L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, marker) {
marker.bindPopup(
"<b> Latitude: </b>" + feature.properties.lat + "<br/>" +
"<b> Longitude: </b>" + feature.properties.long + "<br/>" +
"<b> Easting: </b>" + feature.properties.easting + "<br/>" +
"<b> Northing: </b>" + feature.properties.northing + "<br/>" +
"<b> Elevation_meters: </b>" + feature.properties.elev + "<br/>" +
"<b> Anomoly_mgals: </b>" + feature.properties.anomalymgals
);
},
}).addTo(mymap);
});
已编辑
<title>Leaflet </title>
<link type = "text/css" rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href = "comcat.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/iconfamily=Material+Icons|Merriweather:400,400italic,700|Source+Sans+Pro:400,300,700"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js">
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
//load the image
var mymap = new L.map('map', {
layers: [
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 19,
attribution: '',
id: '',
})
],
}).setView([44, -114.5], 9);
当我引入getcolor函数时，我似乎无法让圆圈标记返回新的值，或者任何东西。是我做错了什么，还是函数调用方式的格式有问题。
我发现了我的问题所在，当把我所有的信息插入plunker时，我能够成功地做到这一点。我是个使用plunker的新手，但是当我试图将信息输入到一个现有的html文档中时，似乎出现了问题。我想这变成了一个普遍的问题，你可以创建一个网页，其中有一部分是地图，然后是文本。我应该如何去做呢？