Skip to content

效果二:

image-20211018210800383

一、需求背景

在百度地图上只显示中国地图的部分,其他的不显示。

分析:加载百度地图的时候,其实是全部加载的,不光有中国地图的部分,也包含了中国边界以外的部分,且百度api没有提供相关api的支持,能够屏蔽边界以外的其他部分。

思路一:可以将中国边界以外的部分加一层图层,只留中国边界以内的部分,达到只显示中国地图的目的。

二、相关技术支持

  1. 使用百度提供的地理信息可视化开源库mapv
    1. 详情可以查看mapv可视化开源库

三、具体实现【基于vue】

1. 逻辑思路

  1. 加载全国地图
  2. 将中国地图以外的地图区域,进行遮盖。

2. 代码实现

  1. 使用axios获取全国geojson数据

  2. 使用mapv.geojson.getDataSet()生成dataSet

  3. 配置遮盖中国地图以外的颜色【注意:这边的draw一定要设置成clip,这个属性在文档中是不存的,但是源码中确实有】

  4. 核心代码如下

    image-20211018212127415

Released under the MIT License.