百度地图加载多块区域
1. 百度地图加载多块区域
这里使用的
BMapGL 绘制多个区域块
官方文档: https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b12
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
// 创建Map实例
var map = new BMapGL.Map("allmap");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
map.setHeading(64.5);
map.setTilt(73)
map.setMapStyleV2({
styleId: '8f7222e2a1dfffc018500ca148809fb6'
});
// 区域数据
var arr = [
"116.395,39.910;116.394,39.914;116.403,39.920;116.402,39.914;116.410,39.913",
"116.385,39.930;116.384,39.934;116.413,39.940;116.412,39.934;116.413,39.923",
"116.375,39.950;116.374,39.954;116.423,39.960;116.422,39.954;116.415,39.953"
];
// 遍历数组然后依次加入
for (var i = 0; i < arr.length; i++) {
var listArr = arr[i];
var spArr = listArr.split(";");
var point = [];
for (var j = 0, pointsLen = spArr.length; j < pointsLen; j++) {
var lonLat = spArr[j].split(",");
point[j] = new BMapGL.Point(lonLat[0], lonLat[1])
}
var polygonObj = new BMapGL.Polygon(point, {
strokeColor: '#0af06a',
strokeWeight: 2,
fillOpacity: 0,
type: "green-outline"
});
map.addOverlay(polygonObj);
}
</script>
</html>
2. 百度地图多区域块点击事件冲突问题
这里需要借助BMapGLLib工具 来判断点是否在区域块内
注意这里面rect和pt都要new出来, 不然返回的都是false
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<script src="http://mapopen.bj.bcebos.com/github/BMapGLLib/GeoUtils/src/GeoUtils.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
// 创建Map实例
var map = new BMapGL.Map("allmap");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
map.setHeading(64.5);
map.setTilt(73)
map.setMapStyleV2({
styleId: '8f7222e2a1dfffc018500ca148809fb6'
});
// 区域数据
var arr = [
"116.395,39.910;116.394,39.914;116.403,39.920;116.402,39.914;116.410,39.913",
"116.385,39.930;116.384,39.934;116.413,39.940;116.412,39.934;116.413,39.923",
"116.375,39.950;116.374,39.954;116.423,39.960;116.422,39.954;116.415,39.953"
];
// 遍历数组然后依次加入
for (var i = 0; i < arr.length; i++) {
var listArr = arr[i];
var spArr = listArr.split(";");
var point = [];
for (var j = 0, pointsLen = spArr.length; j < pointsLen; j++) {
var lonLat = spArr[j].split(",");
point[j] = new BMapGL.Point(lonLat[0], lonLat[1])
}
var polygonObj = new BMapGL.Polygon(point, {
strokeColor: '#0af06a',
strokeWeight: 2,
fillOpacity: 0,
type: "green-outline"
});
// 添加监听事件
polygonObj.addEventListener("click", (e1) => {
console.log(e1);
// 当前点击点
var pt = new BMapGL.Point(e1.latLng.lng, e1.latLng.lat);
var pts = [];
// 获取的区域点数据
for (var k = 0; k < e1.target.points.length; k++) {
var pt2 = new BMapGL.Point(e1.target.points[k].latLng.lng, e1.target.points[k].latLng.lat);
pts.push(pt2);
}
var rect = new BMapGL.Polygon(pts);
// 判断点在多边形内
var result = BMapGLLib.GeoUtils.isPointInPolygon(pt, rect);
console.log(result);
if (result == true) {
console.log("in area");
var mkr = new BMapGL.Marker(pt);
map.addOverlay(mkr);
} else {
}
});
map.addOverlay(polygonObj);
}
</script>
</html>
如果不加判断点在区块内,并且有大量的区域数据的话会出现点击事件错乱问题在f12 或者弹窗里面可以得到验证.
3. 百度地图多区域卡顿
注意: 如果采用上面的2的方式你会发现当区域比较多时(100以上)就会出现卡顿情况;
这时候我们需要另一种方式了:
// 创建Map实例
var map = new BMapGL.Map("allmap");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
map.setHeading(64.5);
map.setTilt(73)
// 手指样式
map.setDefaultCursor("pointer");
map.setMapStyleV2({
styleId: '8f7222e2a1dfffc018500ca148809fb6'
});
// 区域数据
var arr = [
"116.395,39.910;116.394,39.914;116.403,39.920;116.402,39.914;116.410,39.913",
"116.385,39.930;116.384,39.934;116.413,39.940;116.412,39.934;116.413,39.923",
"116.375,39.950;116.374,39.954;116.423,39.960;116.422,39.954;116.415,39.953"
];
// 这里直接将数组放进去即可
var polygonObj = new BMapGL.Polygon(arr, {
strokeColor: '#0af06a',
strokeWeight: 2,
fillOpacity: 0,
type: "green-outline"
});
// 注意这里监听的是整个地图
map.addEventListener("click", (e1) => {
console.log(e1);
// 这里的点击变量也变了
var pt = new BMapGL.Point(e1.latlng.lng, e1.latlng.lat);
// 挨个遍历 找出在哪个区域内
for (var i = 0; i < arr.length; i++) {
var listArr = arr[i];
var spArr = listArr.split(";");
var point = [];
for (var j = 0, pointsLen = spArr.length; j < pointsLen; j++) {
var lonLat = spArr[j].split(",");
point[j] = new BMapGL.Point(lonLat[0], lonLat[1])
}
var rect = new BMapGL.Polygon(point);
// 判断点在多边形内
var result = BMapGLLib.GeoUtils.isPointInPolygon(pt, rect);
if (result == true) {
console.log("in area");
console.log(rect);
var mkr = new BMapGL.Marker(pt);
map.addOverlay(mkr);
break;
} else {
}
}
});
map.addOverlay(polygonObj);
