效果二:
一、需求背景
在百度地图上只显示中国地图的部分,其他的不显示。
分析:加载百度地图的时候,其实是全部加载的,不光有中国地图的部分,也包含了中国边界以外的部分,且百度api没有提供相关api的支持,能够屏蔽边界以外的其他部分。
思路一:可以将中国边界以外的部分加一层图层,只留中国边界以内的部分,达到只显示中国地图的目的。
二、相关技术支持
- 使用百度提供的地理信息可视化开源库mapv
- 详情可以查看mapv可视化开源库
三、具体实现【基于vue】
1. 逻辑思路
- 加载全国地图
- 将中国地图以外的地图区域,进行遮盖。
2. 代码实现
使用axios获取全国geojson数据
使用mapv.geojson.getDataSet()生成dataSet
配置遮盖中国地图以外的颜色【注意:这边的draw一定要设置成clip,这个属性在文档中是不存的,但是源码中确实有】
核心代码如下