百度地图可以通过 BMap.Boundary 的实例把某个行政区域描边。
例如：
const Bdary = new BMap.Boundary();
const setBoundary = (name) => {
Bdary.get(`${name}`, function (rs) {
//获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
// console.log(name);
// 如果没有成功获取到，再次调用
setBoundary(name);
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: '#000',
fillColor: ''
}); //建立多边形覆盖物
MapEl.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
});
}
setBoundary('北京市朝阳区');
以上代码可以把某个区域圈起来，如果 fillColor 是一个颜色值，该区域就会被一个层盖住。
高亮行政区域
某个行政区域以外的内容被黑色遮罩层盖住，高亮该区域。
百度到 百度地图高亮显示选中的行政区域,其余区域加遮罩 几乎都是这样的方案，但是抄下来，有点问题。
具体表现是区域从最北边到最南边为界限，东部分高亮了，西部分被覆盖。
从代码上看，该方法是把四个方向的极限点找到，然后从某个极限点围一圈，再指向外层的大圈。
简单说，里面一个小圈，外面一个大圈。
实现思路
以上文为基础实现
bdary.get 获取到的是一个坐标集合，从正东方开始(可能，我做实现的案例是从正东方开始)，顺时针，最后回到起点。
我们要实现掏空的效果，就需要找到当前区域的最外面的极限点，避免被穿透。
我们以四个方向为极限。
var n1 = ""; //行政区划最东边点在点集合中的索引位置
var n2 = ""; //行政区划最北边点在点集合中的索引位置
var n3 = ""; //行政区划最西边点在点集合中的索引位置
var n4 = ""; //行政区划最南边点在点集合中的索引位置
通过循环坐标集合，找到最北边、最西边、最南边、最东边。
于是我们的坐标集合可以分为四大段落。
var EN = ""; //行政区划东北段点的集合
var NW = ""; //行政区划西北段点的集合
var WS = ""; //行政区划西南段点的集合
var SE = ""; //行政区划东南段点的集合
接下来我们把四个段落的坐标集合收集起来，如何收集呢。
因为是逆时针的坐标集合，最东点到最南点，最南点到最西点，最西点到最北点，最北点到最东点。
从上文看到，首先判断最东边的位子在集合前还是集合末尾。起点是正东方。
假若最东点在起点方向。
- 最东点的坐标下标到最南点的坐标下标。
- 最南点的坐标下标到最西点的坐标下标。
- 最西点的坐标下标到最北点的坐标下标。
- 最南点的坐标下标到末尾坐标下标 + 起点坐标下标到最东点的坐标下标。
反之。
- 最东点的坐标下标到末尾坐标下标 + 起点坐标下标到最南点的坐标下标。
- 最南点的坐标下标到最西点的坐标下标。
- 最西点的坐标下标到最北点的坐标下标。
- 最南点的坐标下标到最东点的坐标下标。
内圈已经确定了，外圈比较好办，都是找一个比较大的外坐标就好了。
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
最后按照一个方向，把所有最坐标连起来。
例如从最东开始，顺时针到南、西、北。已经回到了接近起点。
向正东方扩散，然后瞬时值到东南、南、西南、西、西北、北、东北、东，回到起点。
于是中间就镂空了。