目录
数据获取
数据获取来源:DataV.GeoAtlas地理小工具系列
数据格式:GeoJSON
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenLayers动态绘制专题图</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style type="text/css">
#map,
html,
body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">
//页面
var view = new ol.View({
center: [112.273486, 35.719192],
zoom: 4,
projection: 'EPSG:4326'
});
//地图
var map = new ol.Map({
target: 'map', //指向div
view: view
});
// todo wenchenhui 2023-3-1 11:30:14 添加专题图
var addVector = function(json) {
var time1 = new Date().getTime();
features = new ol.format.GeoJSON().readFeatures(json);
var vectorSource = new ol.source.Vector({
features: features,
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
"name": "动态绘制专题图",
style: styleFunction
});
vectorLayer._name = "动态绘制专题图";
console.log("绘制专题图耗时:" + (new Date().getTime() - time1))
map.addLayer(vectorLayer);
}
var colors = ['#f26a21', '#ee8b22', '#efb964', '#f5debc', '#f4e4d1', '#ea5e51', '#6699ff', '#99bbff',
'#ccddff', '#ffffff'
];
// todo wenchenhui 2023-3-1 11:30:26 配置颜色方案
var styleFunction = function(feature) {
// 获取数据在哪个范围
var color = colors[Math.ceil(Math.random() * 6)];
let stylePolygon = new ol.style.Style({
fill: new ol.style.Fill({
color: color,
}),
});
return stylePolygon;
};
// todo wenchenhui 2023-3-1 11:30:39 获取GeoJson数据
fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
.then((response) => response.json())
.then((json) =>
addVector(json)
);
</script>
</html>
效果展示