百度地图镂空面绘制区域颜色填充

最新推荐文章于 2024-05-22 14:17:37 发布

咯噔在这儿

最新推荐文章于 2024-05-22 14:17:37 发布

阅读量2k

点赞数

分类专栏：前端百度地图

本文链接：https://blog.csdn.net/Mjl_666/article/details/118190263

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

百度地图

2 篇文章 0 订阅

订阅专栏

效果如图，选中部分市区颜色选中，当然也可以填充整个市或省，根据需求获取
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>区域颜色填充</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<style>
			body,html,#container {
				overflow: hidden;
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
		<script src="http://api.map.baidu.com/api?百度地图密钥"></script>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>
<script>
	var map = new BMapGL.Map('container', {
		enableDblclickZoom: false,
		displayOptions: {
			building: false
		}
	});
	map.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11);
	map.enableScrollWheelZoom(true);
	var area = ['昌平区', '丰台区'];
	for (let na in area) {
		getBoundary(area[na]);
	}
	function getBoundary(area) {
		var bd = new BMapGL.Boundary();
		bd.get(area, function(rs) { //获取行政区域
			var hole = new BMapGL.Polygon(rs.boundaries, {
				strokeWeight: 1, //设置多边形边线线粗
				strokeColor: '#ff0000',
				strokeOpacity: 0.8,
				fillColor: '#ff0000',
				fillOpacity: 0.4
			});
			map.addOverlay(hole);
		});
	}
</script>

咯噔在这儿

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
百度地图镂空面绘制区域颜色填充

效果如图，选中部分市区颜色选中，当然也可以填充整个市或省，根据需求获取<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>区域颜色填充</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport"
复制链接

扫一扫