奇葩需求！！
非要地图只显示一个省，又不喜欢用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
<template>
<div class="amapBox">
<el-amap class="amap-box" :vid="'hunan-amap'" :plugin="plugin" :center="mapCenter" :events="events" ref="map" :amap-manager="amapManager" mapStyle="light">
<el-amap-marker v-for="(marker, index) in geoCoordMap"
:icon="require('../../assets/images/mapMark.png')"
:position="marker.latLon"
:events="{
click:e=>chartScatterMapClick(marker),
mouseover:()=>markerMouseOver(marker,index),
mouseout:()=>markerMouseOut(marker,index),
}"
:visible="marker.visible"
:draggable="marker.draggable"
:vid="index"
:label="{content:`<div style='padding:10px;'><p style='margin-bottom:10px;' class='gray999'>${marker.name}</p><strong class='violet'>${marker.address}</strong></div>`,offset: [30, (markerDatas[index] && (typeof markerDatas[index].offsetY==='number')) ? markerDatas[index].offsetY : -1000000]}"
>
</el-amap-marker>
</el-amap>
</div>
</template>
js
<script>
import {mapState} from 'vuex'
import { AMapManager } from 'vue-amap'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
name: 'AMap',
data() {
return {
mapCenter: [112.993977,28.133938],//地图中心
events: {
init:this.mapInit,
'moveend': this.moveend,
},//地图事件
plugin: [
'Scale','OverView','DistrictSearch',{
pName: 'ToolBar',
events: {
init(instance) {
// //console.log(instance);
}
},
position:'RT'
}
],//地图差距
amapManager:new AMapManager(),
map:null,//地图实例
locationImg:require('../../assets/images/mapMark.png'),//标记图片
markerDatas:[],//存储标标记相关数据
geoCoordMap:[],//地图红点标记数据
}
},
mounted(){
this.getGeoCoordMap()
}
methods: {
//获取地图红点标记数据
getGeoCoordMap(){
},
// 地图初始化函数
mapInit(o){
o.setMapStyle('amap://styles/54555a5s5as4d5as4d5a154s');//自定义的高德地图的样式
setTimeout(()=>{
this.drawBounds(o)
},200)
},
// //标记点鼠标移入事件
markerMouseOver(marker,index){
for(let i=0;i<index;i++){
this.markerDatas.push('')
}
this.markerDatas.splice(index,1,{
offsetY:0
})
// //console.log(this.markerDatas)
},
//标记点鼠标移出事件
markerMouseOut(marker,index){
this.markerDatas.splice(0)
},
//地图红点点击
async chartScatterMapClick(marker){
//点击标记点相关操作
},
//绘制遮罩，显示某个省
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)
})
}
},
}
</script>
css
<style scoped lang="scss">
.amapBox{
width:100%;
height:100%;
}
</style>
<style>
.amap-marker-label{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:none;
-webkit-box-shadow: 1px 2px 4px #cccccc;
-moz-box-shadow: 1px 2px 4px #cccccc;
box-shadow: 1px 2px 4px #cccccc;
}
</style>
参考文章：https://blog.csdn.net/liujucai/article/details/100070540
