我正在使用具有硬编码值的函数为传单地图上的多边形指定颜色。样式函数从$.getJSON
内部调用。我想重写我的代码,以便直接从数据中提取值而不是硬编码 - 理论上,这样我将来可以更轻松地重用代码
$.getJSON
调用的(截断的)geojson数据是:
{"type": "FeatureCollection","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [{"type": "Feature", "properties": {"MAJORCOLOR": "ZONE A"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -77.946264290220981, 42.574112051418197 ], [ -77.954525714402251, 42.569801987122105 ], [ -77.964847297117899, 42.562124252064194 ]]]}},
"features": [{"type": "Feature", "properties": {"MAJORCOLOR": "ZONE B"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -77.946264290220981, 42.574112051418197 ], [ -77.954525714402251, 42.569801987122105 ], [ -77.964847297117899, 42.562124252064194 ]]]}},
"features": [{"type": "Feature", "properties": {"MAJORCOLOR": "ZONE A"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -77.946264290220981, 42.574112051418197 ], [ -77.954525714402251, 42.569801987122105 ], [ -77.964847297117899, 42.562124252064194 ]]]]}}]}
$.getJSON
是:
$.getJSON('data/ecozone_wgs84_multipart.geojson', function(data){
var geojsonLayer = L.geoJson(data.features, {
onEachFeature: makeMarkers,
//this provides thematic styling to the layers
style: style
})
.addTo(map);
//call the function to create keys
getArray(data);
});
这是根据数据值
分配颜色的功能//get color depending on the Zone value
function getColor(z) {
return z == 'ZONE A' ? '#a6cee3':
z == 'ZONE B' ? '#1f78b4':
z == 'ZONE C' ? '#b2df8a':
'#000000';}
style
函数从$.getJSON
function style(feature) {
return {
fillColor: getColor(feature.properties.MAJORCOLOR),
color: getColor(feature.properties.MAJORCOLOR),
weight: 1.25,
opacity: 0.95,
fillOpacity: 0.5
};}
我想重写getColor
函数,以便不是使用硬编码的值来确定颜色,而是从我从geojson创建的数组中提取值,我已经编写如下:
//this is a function that pulls the values from MAJORCOLOR to create the array
function getArray(data) {
for (var i=0; i< data.features.length; i++) {
keys.push(data.features[i].properties.MAJORCOLOR);
}}
//this is a function to collapse to unique values
function unique(keys) {
return keys.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);};
然而,当我重写颜色函数以使用数组中的值而不是它不起作用时 - 多边形都被赋予“else”颜色#000000而不是我想要的颜色。
function getColor(z) {
return z == unique(keys)[0] ? '#a6cee3':
z == unique(keys)[1] ? '#1f78b4':
z == unique(keys)[2] ? '#b2df8a':
'#000000';}
为什么这不起作用?
从控制台查看unique(keys)
,我得到["ZONE A", "ZONE B", "ZONE C"]
所以我知道我正在正确创建keys
...我很困惑。
提前感谢您解决我的问题!
答案 0 :(得分:1)
var keys = [];
function getArray(data) {
for (var i = 0; i < data.features.length; i++) {
keys.push(data.features[i].properties.MAJORCOLOR);
}
}
function unique(keys) {
return keys.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);
};
function getColor(z) {
return z == unique(keys)[0] ? '#a6cee3':
z == unique(keys)[1] ? '#1f78b4':
z == unique(keys)[2] ? '#b2df8a': '#000000';
}
$.getJSON('data/ecozone_wgs84_multipart.geojson', function(data){
getArray(data);
var geojsonLayer = L.geoJson(data.features, {
onEachFeature: makeMarkers,
style: function (feature) {
// keys avaliable
// getColor('xxxxxx'); keys availible
}
}).addTo(map);
});