MapBoxGL 加载echarts统计图表

最新推荐文章于 2024-06-06 10:02:21 发布

一碗老面i

最新推荐文章于 2024-06-06 10:02:21 发布

阅读量1.3k

点赞数 1

分类专栏： MapBox GL 文章标签： echarts web gis webgl

本文链接：https://blog.csdn.net/qq_29808089/article/details/109738379

版权

MapBox GL 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

效果图：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mapboxgl-echarts</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<!-- mapbox-gl -->
		<link href="./lib/mapboxdev/mapbox-gl.css" rel="stylesheet" />
		<script src="lib/mapboxdev/mapbox-gl.js"></script>
		<!-- echart-->
		<script src="lib/echarts.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
		
			#thematicMapDiv {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="thematicMapDiv"></div>
		<script>
			let localhost = window.location.origin;
			//数据为模拟数据，仅供参考
			window.onload = function() {
				addBasicMap();
				//专题数据
				window.thematicdata = [{
					"XZQH": "110000",
					"BZ3": 30.0,
					"XZQHMC": "北京市",
					"BZ2": 10.0,
					"GEOJSON": "{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [116.412616834352,40.1855914174138 ]}}"
				}, {
					"XZQH": "140000",
					"BZ3": 50.0,
					"XZQHMC": "山西省",
					"BZ2": 20.0,
					"GEOJSON": "{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [112.288799420842,37.5712486062551 ]}}"
				}, {
					"XZQH": "220000",
					"BZ3": 500.0,
					"XZQHMC": "吉林省",
					"BZ2": 300.0,
					"GEOJSON": "{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [126.187672031028,43.6682548638262 ]}}"
				}, {
					"XZQH": "360000",
					"BZ3": 100.0,
					"XZQHMC": "江西省",
					"BZ2": 2000.0,
					"GEOJSON": "{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [115.72225295253,27.6141576799222 ]}}"
				}];
				window.thematicHeader = {
					"XZQH": "行政区划",
					"BZ3": "小学",
					"XZQHMC": "行政区划名称",
					"BZ2": "初中",
					"GEOJSON": "坐标"
				};
				//需要清理的对象
				window.echartMapPoints = [];
				window.echartInitLists = [];

				addThematicEchartLayer();

			}
			//加载底图
			function addBasicMap() {
				let sources = {
					"osm-tiles1": {
						"type": "raster",
						'tiles': [
							"http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f133eb",
						],
						'tileSize': 256
					},
					"osm-tiles2": {
						"type": "raster",
						'tiles': [
							"http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f133eb",
						],
						'tileSize': 256
					}
				};
				let layers = [{
						"id": "simple-tiles1",
						"type": "raster",
						"source": "osm-tiles1",
					},
					{
						"id": "simple-tiles2",
						"type": "raster",
						"source": "osm-tiles2",
					}
				];
				window.map = new mapboxgl.Map({
					container: 'thematicMapDiv',
					style: {
						"version": 8,
						"sprite": localhost + "/MapBoxGL/css/sprite",
						"glyphs": localhost + "/MapBoxGL/css/font/{fontstack}/{range}.pbf",
						"sources": sources,
						"layers": layers,
					},
					center: [117.9, 33.5],
					zoom: 4
				});
				window.map.on('load', function() {
					
				})
			}

			//加载专题地图
			function addThematicEchartLayer() {
				//销毁echartLists
				clearEchartInstantAndPoint();
				//专题数据处理及加载到地图
				window.thematicdata.forEach(element => {
					var geojson = JSON.parse(element.GEOJSON);
					var el1 = document.createElement("div");
					el1.id = "thematicchart" + element.XZQH;
					el1.style = "height:100px;width:100px;";
					window.echartMapPoints.push(new mapboxgl.Marker(el1, {
							offset: [-50 / 2, -50 / 2]
						})
						.setLngLat([
							geojson.geometry.coordinates[0],
							geojson.geometry.coordinates[1]
						])
						.addTo(window.map));
					//echart初始化专题图
					addEchartInit(element);

				})
			}

			//echart初始化专题图
			function addEchartInit(element) {
				var data = [];
				Object.keys(window.thematicHeader).forEach(key => {
					if (key.indexOf("BZ") != -1) {
						data.push({
							name: window.thematicHeader[key],
							value: element[key]
						});
					}
				});
				var option1 = {
					tooltip: {
						trigger: 'item',
						formatter: "{a}<br/>{b} : {c} ({d}%)"
					},
					series: {
						name: element.XZQHMC,
						type: "pie",
						data: data,
						radius: "50%",
						center: ["50%", "50%"],
						label: {
							normal: {
								position: "inner",
								fontSize: 10
							},

						}
					}
				};
				window.echartInitLists.push(initEchart("thematicchart" + element.XZQH, option1));


			}
			//初始化echart表
			function initEchart(id, options) {
				var mychart = echarts.init(document.getElementById(id));
				mychart.setOption(options);
				return mychart;
			}

			//清除echart及marker
			function clearEchartInstantAndPoint() {
				window.echartInitLists.forEach(echartItem => {
					echartItem.dispose();
				});
				window.echartMapPoints.forEach(pointItem => {
					pointItem.remove();
				});
			}
		</script>
	</body>
</html>

一碗老面i

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
MapBoxGL 加载echarts统计图表

效果图：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>mapboxgl-echarts</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalab
复制链接

扫一扫