奇葩需求！！
非要地图只显示一个省，又不喜欢用echarts绘制的那种。就是要地图，然后截出一个省出来。
无论是高德地图，还是百度地图，貌似都没直接提供这种功能哦~~
折腾了好久终于找到实现方法！
可谓思路不对，努力白费！
思路就是：查出想要显示的省或市的轮廓经纬度，然后在遥远的地方弄4个点的经纬度（因为地球是圆的），然后把这四个点的经纬度和目标城市的轮廓经纬度放在一起，绘制一个很大很大的覆盖物，地球是圆的，你可以自己想象一下这个覆盖物的样子，这样你看到的地方就只有目标地图显示了，其他地方均被遮盖
其实关键代码就下面这点：
//绘制遮罩，显示某个省
drawBounds(map) {
//加载行政区划插件
let opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'city' //查询行政级别为 市
}
let district = new AMap.DistrictSearch(opts)
let polygons=[]
district.setLevel('湖南省')
district.search("湖南省", (status, result)=> {
map.remove(polygons)//清除上次结果
polygons = [];
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
let polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#ffffff',
strokeColor: '#0A1A29'
});
polygons.push(polygon);
}
}
map.add(polygons)
map.setFitView(polygons);//视口自适应
let outer = [
new AMap.LngLat(-360,90,true),
new AMap.LngLat(-360,-90,true),
new AMap.LngLat(360,-90,true),
new AMap.LngLat(360,90,true),
]
let holes = result.districtList[0].boundaries
let pathArray = [
outer
]
pathArray.push.apply(pathArray,holes)
let polygon = new AMap.Polygon( {
pathL:pathArray,
//线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
strokeColor:"#001826",
strokeWeight: 1,
//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
strokeOpacity:0.5,
//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
fillColor: '#ffffff',
//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
fillOpacity: 1,
//轮廓线样式，实线:solid，虚线:dashed
strokeStyle:'dashed',
/*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
ie9+浏览器有效 取值：
实线：[0,0,0]
虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 （如此反复）组成的虚线*/
strokeDasharray:[10,2,10]
});
polygon.setPath(pathArray)
map.add(polygon)
})
}
本人使用了vue-amap，下面来看看完整代码：
创建项目就不说了，vue-cli3创建的项目，然后下载vue-amap，申请好你的高德地图Key
main.js
import Vue from 'vue'
import App from './app'
import router from './router'
import store from './store'
import VueAMap from 'vue-amap'; // 高德地图
import {AMapKey} from './utils/const-datas'//高德地图key
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key:AMapKey,
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.DistrictSearch'],
v: '1.4.4',
uiVersion: '1.0.11', // 版本号
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
新建 amap.vue，写地图相关代码
template
js
css
参考文章：https://blog.csdn.net/liujucai/article/details/100070540