用传单设计分类json数据的样式
由于我的新手编码水平，我事先道歉，如果有一个类似的问题被问到如下。我已经搜索了几天，无法将正确的术语组合在一起，以找到下面描述的场景的示例。
我试图演示几个web映射服务的各种小型用例(我通常使用术语服务)。对于每一项服务，我都试图制作一张基于土地使用的颜色编码的包裹地图。在这种情况下，我试图使用传单来映射包裹数据。我将这些数据格式化为名为downtownParcels_all.json的json对象。它包含每个包裹的几何和属性。看起来是这样的：
{ "type": "FeatureCollection",
"features": [ {
"geometry":
{
"type": "Polygon",
"coordinates":
[
[
[ -84.55903531544767, 38.20711817093237 ],
[ -84.55905917105294, 38.20683120640012 ],
[ -84.55925392867115, 38.20684358736447 ],
[ -84.55922953052168, 38.2071413284724 ],
[ -84.55903531544767, 38.20711817093237 ]
]
]
},
"type": "Feature", "properties":
{
"Complete_A": "121 E JACKSON ST",
"MailAddres": "121 E JACKSON STREET",
"ParcelID": "123-45-6",
"GIS_MapID": "123-45-678.000",
"Acres": 0.13,
"Name2": null,
"MailAddr_1": "GEORGETOWN KY 40324",
"Name1": "SMITH JOHN",
"LandUse": "11-1 Single Family" }
},...etc...
基于properties.LandUse，我想给包裹涂上颜色。如果使用这个例子作为我的指南，因为它的工作方式非常好，我希望我的最终产品工作。有一点不同，因为我从中得到灵感的例子使用了定量数据(疫苗申请率%)，而我的例子使用了分类、定性数据(土地使用)。在创建我的地图版本时，调整样式功能使其从定量数据转移到定性数据似乎会给我带来问题。我没有收到错误消息，但是这些包是在没有条件样式的情况下绘制的。
下面是我的代码，用于尝试根据存储在json对象中的土地使用数据对包多边形进行样式化。请注意，为了便于引用灵感示例，我在变量和函数名中保留了术语"state“：
var map = null;
var state_layer = null;
var states_geo_json = null;
var states_data = null;
// Loads data, initializes map, draws everything.
function start(){
$.getJSON("data/downtownParcels_all.json",function(us_states){
states_geo_json= us_states;
initialize_map();
draw_states();
});
}
start();
/* Create map, center it */
function initialize_map(){
map = new L.Map("map", {})
// Lebanon, KS, Zoom level 4.
.setView(new L.LatLng(38.212, -84.556), 15)
.addLayer(new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}));
}
// Draw all the states on the map
function draw_states(){
state_layer = L.geoJson(states_geo_json,{
style: state_styles,
//onEachFeature: state_features,
updateWhenIdle: true
});
state_layer.addTo(map);
}
// Styles each state, populates color based on data
function state_styles(feature){
return{
stroke: true,
fillColor: state_color,
fillOpacity: 0.7,
weight: 1.5,
opacity: 1,
color: 'black',
zIndex: 15
};
}
function state_color() {
for (var i = 0; i < us_states.length; i++) {
var landUse = us_states[i].properties.LandUse;
switch(landUse) {
case "11-1 Single Family": return "#ffffb2";
case "11-2 Multi-Family": return "#fed976";
case "11-3 Apartments": return "#993404";
case "12-1 Commercial retail": return "#b30000";
case "12-2 Commercial wholesale": return "#fe9929";
case "12-3 Services": return "#e34a33";
case "12-5 Government": return "#f768a1";
case "12-6 Institutional": return "#045a8d";
case "12-7 Educational": return "#a6bddb";
case "16-1 Mixed use": return "#810f7c";
case "21-1 Agricultural": return "#31a354";
case "99-1 Vacant": return "#f7f7f7";
case "99-4 Parking": return "#636363";
}
}
}如果有人对我当前代码中缺少的内容有任何指导，或者有关于如何更好地完成这种分类符号化的建议，我将非常感激。如果我对任何事情都不清楚，我很乐意澄清。提前谢谢你。
回答 1
Stack Overflow用户
发布于 2014-05-13 21:42:05
好的，在代码中追踪，你有一行
fillColor: state_color,这说明fillColor是state_color函数。这应该更改为
fillColor: state_color(feature),它说fillColor是函数state_color为这个特性返回的颜色。
然后，在state_color函数中，不使用任何参数。你应该:应该是
function state_color(layer) {您可以去掉for函数中的state_color循环，因为它只获得一个特性，而不是很多，并且它的意思是var landUse = us_states[i].properties.LandUse;，它将类似于layer.feature.properties.LandUse。
这应该能让你开始。
https://stackoverflow.com/questions/23638045
复制相似问题
腾讯云开发者
