[英]<OpenLayers3> Make choropleth map with GeoJson
I try to make a choropleth map with OpenLayers3 and a GeoJson generate in a javascript . 我尽量让与OpenLayers3和GeoJSON的一个地区分布图在JavaScript生成。
I want to use the properties of my GeoJson for make this map. 我想使用我的GeoJson的属性制作这张地图。
For Example, if I've a city with properties ["name"='1']
and a city with properties ["name"='2']
I want to have blue color for the '1' and red color for the '2'. 例如,如果我有一个属性为["name"='1']
的城市,而一个属性为["name"='2']
的城市,我想将蓝色表示为'1',将红色表示为'2'。
I found on the internet, how to make this map with OpenLayers2 ([Example for make a choropleth map with OL2][1])
but I don't find the equivalence in OL3 . 我在互联网上找到了如何使用OpenLayers2制作此地图([使用OL2][1])
制作choropleth地图的示例OL2][1])
但是在OL3中找不到等效项。 The code with OL2 look like : 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
});
I started the adaptation but I don't find the equivalence for 'addUniqueValueRules' 我开始进行改编,但没有找到与“ 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
});
What is the OL3 equivalence of this code, or another solution for this problem? 此代码的OL3等价含义是什么,或者该问题的另一解决方案?
You need to use a style function. 您需要使用样式功能。 A style function is a function that takes a feature as an argument and returns an array of style object. 样式函数是一种将要素作为参数并返回样式对象数组的函数。
In your case, it will look like this: 在您的情况下,它将如下所示:
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')];
}
});
See http://openlayers.org/en/master/examples/vector-layer.html for an example that uses a style function to add labels to polygons. 有关使用样式功能向多边形添加标签的示例,请参见http://openlayers.org/en/master/examples/vector-layer.html 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.