百度地图只显示某一个行政区域

日常开发中遇到这样一个需求,百度地图只能显示天津市,其他行政区域置灰,网上搜索了一番最终找到解决方法,现记录下来免得以后忘记

思路

百度地图自带添加多边形覆盖物(polygon)功能,给任意不在一条直线上的三个及以上点就能绘制多边形覆盖物

// 绘制天津轮廓
let bdary = new BMap.Boundary()
bdary.get("天津市", function(rs){       //获取行政区域
  const ply2 = new BMap.Polygon(rs.boundaries[1], {
    strokeColor: '#3333ff',
    fillColor: '#fff',
    fillOpacity: 1,
    strokeOpacity: 0.8,
  })
  map.addOverlay(ply2)
})

效果如下:

不过。。。这貌似和我想要的恰恰相反,我需要置灰的是除了天津以外的地方

网上找到的思路是这样的,取百度地图边界的四个坐标点作为外环的有效点,取天津市边界数据点为内环的有效点,通过内外环的结合得到一个镂空的区域(此处天津市镂空)即可

实现

//定义外环四个坐标点
const EN_JW = '180, 90;'
const NW_JW = '-180,  90;'
const WS_JW = '-180, -90;'
const SE_JW = '180, -90;'
let bdary = new BMap.Boundary()
bdary.get("天津市", function(rs){  //获取行政区域(内环)
  // 为内外环之间区域添加覆盖物
  console.log(rs.boundaries) // 可以把 boundaries 打印出来看看哪一组数据是有效数据
  const ply = new BMap.Polygon(rs.boundaries[1] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
    strokeColor: 'none',
    fillColor: 'white',
    fillOpacity: 1,
    strokeOpacity: 0.1
  })
  map.addOverlay(ply)
})

效果如下:

看起来有点怪怪的,再加个边界

// 绘制天津轮廓
const ply2 = new BMap.Polygon(rs.boundaries[1], {
  strokeColor: '#3333ff',
  fillColor: '#fff',
  fillOpacity: .1,
  strokeOpacity: 0.8,
  strokeWeight: 4
})
map.addOverlay(ply2)

效果图如下:

OJBK,搞定!

疑惑

为什么上面的 rs.boundaries[1] + SE_JW + SE_JW 这里要加两次 SE_JW,理论上一次就够了,但结果是只加一次 SE_JW 覆盖物会显示异常

我自己也模拟了一个内外环,只需要加一次 SE_JW 就能正常显示覆盖物,实在是想不明白

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1055.html
京ICP备19044523号-1