<OpenLayers3> 使用 GeoJson 制作分区统计图
<OpenLayers3> Make choropleth map with GeoJson
我尝试用OpenLayers3和GeoJson在javascript中生成一个分区统计图。
我想使用我的GeoJson的属性来制作这张地图。
例如,如果我有一个具有属性["name"='1']
的城市和一个属性["name"='2']
的城市,我希望"1"为蓝色,"2"为红色。
我在互联网上找到了如何使用 OpenLayers2 制作此地图([使用 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。
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 设置滑块分区上的滚动
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- JQuery移动动态分区页面
- 多维数据集网格未在指定的分区中绘制
- Java-彩票统计解析器
- 使用moment.js获取时间分区的偏移日期对象
- 单击子分区外部时关闭灯箱
- 统计ajax返回数据中的html元素
- 如何在单击按钮时显示一个分区,同时隐藏另一个分区
- 如何使用jQuery对多个文本区域进行字数统计
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- D3.js:将一个有响应的饼图放在其父分区的中心
- 关于使用image.src进行统计的问题
使用 GeoJson 制作分区统计图 - 格式化人口普查 ACS API 数据以在分区统计图中使用
- 将键盘控件添加到传单 js 分区统计图
- 如何使用分区统计图的 d3.js 将数据从 .tsv 绑定到 SVG 的路径
- 交互式 d3 邮政编码分区统计 - WA 州
- D3:分区统计图的比例和颜色