高德地图怎么才能只渲染局部地图？
这个只用遮罩覆盖中国以外的地图，我想要的是中国以外的就没有，不是颜色覆盖。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图遮罩</title>
<style>
html,
body,
#container {
margin:0;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.DistrictSearch"></script>
<script>
var map = new AMap.Map('container', {
zoom:12.6,
center:[116.364495,39.930694],
pitch: 0,
viewMode: '3D',
//设置地图背景图
mapStyle:'amap://styles/blue'
});
//map.setZoom(12.2); //设置地图层级
new AMap.DistrictSearch({
extensions:'all',
subdistrict:0
}).search('中国',function(status,result){
// 外多边形坐标数组和内多边形坐标数组
var 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),
];
var holes = result.districtList[0].boundaries
var pathArray = [
outer
];
pathArray.push.apply(pathArray,holes)
var polygon = new AMap.Polygon( {
pathL:pathArray,
//线条颜色，使用16进制颜色代码赋值。默认值为#006600
strokeColor: 'rgb(20,164,173)',
strokeWeight: 4,
//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
strokeOpacity:0.5,
//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
fillColor: 'rgba(0,0,0)',
//多边形填充透明度，取值范围[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);
/* var polyline = new AMap.Polyline({
strokeColor: '#3366FF', // 线颜色
strokeOpacity: 1, // 线透明度
strokeWeight: 2, // 线宽
strokeStyle: 'solid', // 线样式
strokeDasharray: [10, 5], // 补充线样式
geodesic: false // 绘制大地线
});
polyline.setPath(pathArray);
map.add(polyline);*/
})
</script>
</body>
</html>
现在这个样子很丑：
源码：
<template>
<div class="amap">
<div
v-loading="loading"
element-loading-text="地图加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, .9)"
id="china-map"
></div>
<keep-alive>
<Detail
:show="equipmentModel"
:data="equipmentModelData"
@close="closeModel"
/>
</keep-alive>
</div>
</template>
<script>
/**
* @author 全易
* @time 2020-12-30 16:28:02 星期三
* @description 电站覆盖图
*/
import api from "@/service/api/overviews";
import Detail from "./detail";
export default {
name: "cover-map",
components: {
Detail,
},
data() {
return {
loading: false,
map: null,
params: {
loginName: this.$store.state.userInfo.loginName,
stationNo: "",
},
polygon: "",
equipmentModel: false,
equipmentModelData: {},
};
},
mounted() {
this.initMap();
},
methods: {
// 初始化地图
initMap() {
this.loading = true;
const that = this;
this.$nextTick(() => {
that.map = new AMap.Map("china-map", {
mapStyle: "amap://styles/darkblue",
zoom: 4,
center: [105.764832, 33.040461],
});
that.showPartMap();
});
},
// 只显示中国的地图
showPartMap() {
const that = this;
if (that.polygon) {
that.map.remove(that.polygon);
}
AMap.plugin("AMap.DistrictSearch", function () {
new AMap.DistrictSearch({
extensions: "all",
subdistrict: 0,
}).search("中国", function (status, result) {
// 外多边形坐标数组和内多边形坐标数组
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);
that.polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: "#29b6f6", //城市边界颜色
strokeWeight: 3,
fillColor: "#0d1e2e", // 遮罩背景色黑色
// fillOpacity: 1,
});
that.polygon.setPath(pathArray);
that.map.add(that.polygon);
that.getData();
});
});
},
// 获取站点
getData() {
api.stationMap(this.params).then((res) => {
console.log(res);
if (res.code === 0) {
console.log("电站覆盖：", res.data);
const that = this;
const infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
});
let markers = res.data.map((item) => {
let marker = new AMap.Marker({
position: item.location,
offset: new AMap.Pixel(-10, -30),
});
marker.on("click", function (e) {
console.log(e);
that.equipmentModel = true;
that.equipmentModelData = item;
});
marker.on("mouseover", function (e) {
console.log(e);
infoWindow.setContent(
`<div class="description">
<h5 class="title">${item.name}</h5>
<div class="mt-3 detail">
设备：${item.total}个<br />
在线：${item.onLine}个<br />
离线：${item.offLine}个<br />
使用中：${item.inUse}个<br />
</div>
</div>`
);
infoWindow.open(that.map, item.location);
});
marker.on("mouseout", function (e) {
console.log(e);
infoWindow.close(that.map, item.location);
});
return marker;
});
this.map.add(markers);
this.loading = false;
}
});
},
// 关闭电站详情
closeModel(status) {
this.equipmentModel = status;
},
},
};
</script>
<style lang="less" scoped>
.amap {
width: 100vw;
height: 100vh;
background-color: #0d1e2e;
#china-map {
height: 100vh;
/deep/.amap-info-content {
background-color: rgba(36, 86, 137, 84%);
.detail {
font-size: 14;
}
.amap-info-close {
display: none;
}
}
/deep/.amap-info-sharp {
border-top: 8px solid rgba(36, 86, 137, 84%);
}
}
}
</style>
https://blog.csdn.net/tangxiaobao2016/article/details/113976780
这个链接，是解决这个问题。