[英]<OpenLayers3> Make choropleth map with GeoJson
我尽量让与OpenLayers3和GeoJSON的一个地区分布图在JavaScript生成。
我想使用我的GeoJson的属性制作这张地图。
例如,如果我有一个属性为["name"='1']
的城市,而一个属性为["name"='2']
的城市,我想将蓝色表示为'1',将红色表示为'2'。
我在互联网上找到了如何使用OpenLayers2制作此地图([使用OL2][1])
制作choropleth地图的示例OL2][1])
但是在OL3中找不到等效项。 OL2的代码如下所示:
var subteStyleMap = new OpenLayers.StyleMap({
'strokeWidth': 4
});
var lookup = {
"1": {strokeColor: "#46C7FA"},
"2": {strokeColor: "#E81D1A"}
}
subteStyleMap.addUniqueValueRules("default", "number", lookup);
var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "generation_geojson2.php",
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: subteStyleMap
});
我开始进行改编,但没有找到与“ addUniqueValueRules”等效的方法
var lookup = {
"1": {strokeColor: "#46C7FA"},
"2": {strokeColor: "#E81D1A"}
}
subteStyleMap.addUniqueValueRules("default", "number", lookup);
var vector_arret_tad = new ol.layer.Vector
({
source: new ol.source.GeoJSON({ url: 'generation_geojson2.php',defaultProjection :'EPSG:4326', projection: 'EPSG:3857'}),
name: 'City',
style: subteStyleMap
});
此代码的OL3等价含义是什么,或者该问题的另一解决方案?
您需要使用样式功能。 样式函数是一种将要素作为参数并返回样式对象数组的函数。
在您的情况下,它将如下所示:
var lookup = {
"1": [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#46C7FA"
})
})],
"2": [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#E81D1A"
})
})]
};
var vectorLayer = new ol.layer.Vector({
// …
style: function(feature, resolution) {
return lookup[feature.get('number')];
}
});
有关使用样式功能向多边形添加标签的示例,请参见http://openlayers.org/en/master/examples/vector-layer.html 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.