openLayers动态绘制专题图

wen710516644

于 2023-03-01 14:57:08 发布

阅读量334

点赞数

分类专栏： webGis openlayer 专题图文章标签：前端

本文链接：https://blog.csdn.net/wen710516644/article/details/129279962

版权

webGis 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

openlayer

1 篇文章 0 订阅

订阅专栏

专题图

1 篇文章 0 订阅

订阅专栏

该文章展示了如何利用OpenLayers库，结合GeoJSON数据格式，动态绘制地图专题图。代码示例中，首先设置了地图视图，然后加载GeoJSON数据，创建并应用自定义样式函数以改变区域颜色，最后将专题图层添加到地图上。

摘要由CSDN通过智能技术生成

数据获取

代码示例

效果展示

数据获取

数据获取来源：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>