Vue3 高德地图 只显示中国区域 修改国境线颜色 自定义地图 DistrictLayer
作者：互联网
需求效果图（地图只显示中国、地图背景透明、自定义省的边界颜色、修改国境线颜色）：
先创建自定义地图
链接：https://geohub.amap.com/mapstyle/index
水系不显示
区域面，字体改为白色，不透明度改为0%
其他地方按自己的需求自定义是否显示
行政区名，这里只显示了中国 国省市区名，其他全部不显示
行政区边界，这里外国国界改为不显示
背景网格线也要改为不显示
自定义地图最终效果
代码
// 引入包
<template>
<div id="container"></div>
</template>
<script>
import { ref, shallowRef } from "@vue/reactivity";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
setup(props, context) {
let map = shallowRef(null);
const ininMap = () => {
AMapLoader.load({
key: "Key",
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: ["geo/DistrictExplorer"], // 需要加载的 AMapUI ui插件
},
plugins: ["AMap.DistrictLayer", "AMap.Scale", "AMap.ToolBar"],
Loca: {
// 是否加载 Loca， 缺省不加载
version: "2.0.0", // Loca 版本，缺省 2.0.0
},
})
.then((AMap,AMapUI) => {
var defaultLayer = new AMap.createDefaultLayer();
let disCountry = new AMap.DistrictLayer.Country({
zIndex: 15,
SOC: "CHN",
depth: 0,
styles: {
"nation-stroke": "#bbdaf1",
"coastline-stroke": "#bbdaf1",
"province-stroke": "#bbdaf1",
"city-stroke": "#bbdaf1",
fill: "rgba(0,0,0,0.2)",
},
});
let province = new AMap.DistrictLayer.Province({
zIndex: 20,
depth: 0,
styles: {
"province-stroke": "#bbdaf1",
"city-stroke": "#bbdaf1",
fill: "rgba(0,0,0,0.2)",
},
});
map = new AMap.Map("container", {
//设置地图容器id
zoom: 3.9, //初始化地图级别
mapStyle:
"amap://styles/样式ID", //设置地图的显示样式
center: [106.284947, 38.794041],
layers: [
disCountry,
defaultLayer // disCountry 跟 defaultLayer 一定要搭配使用 不然只使用 disCountry 会导致不显示省市名称
],
});
//province.setMap(map); // 如果不想使用 disCountry 那也可以使用 Province 只需要取消注释这段代码即可
// 这里使用 AMapUI.DistrictExplorer 主要是为了渲染地图国境线的颜色
window.AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: false, //打开事件支持
map: map
});
//当前聚焦的区域
var currentAreaNode = null;
//根据Hover状态设置相关样式
function toggleHoverFeature(feature, isHover, position) {
if (!feature) {
return;
}
var props = feature.properties;
//更新相关多边形的样式
var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
for (var i = 0, len = polys.length; i < len; i++) {
polys[i].setOptions({
fillOpacity: isHover ? 0.5 : 0.2
});
}
}
//绘制区域面板的节点
function renderAreaPanelNode(ele, props, color) {
var $box = $('<li/>').addClass('lv_' + props.level);
var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
'data-adcode': props.adcode,
'data-level': props.level,
'data-children-num': props.childrenNum || void(0),
'data-center': props.center.join(',')
}).html(props.name).appendTo($box);
if (color) {
$h2.css('borderColor', color);
}
//如果存在子节点
if (props.childrenNum > 0) {
//显示隐藏
$('<div class="showHideBtn"></div>').appendTo($box);
//子区域列表
$('<ul/>').addClass('sublist lv_' + props.level).appendTo($box);
$('<div class="clear"></div>').appendTo($box);
if (props.level !== 'country') {
$box.addClass('hide-sub');
}
}
$box.appendTo(ele);
}
//填充某个节点的子区域列表
function renderAreaPanel(areaNode) {
var props = areaNode.getProps();
var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist');
if (!$subBox.length && props.childrenNum) {
//父节点不存在，先创建
renderAreaPanelNode($('#area-tree'), props);
$subBox = $('#area-tree').find('ul.sublist');
}
if ($subBox.attr('data-loaded') === 'rendered') {
return;
}
$subBox.attr('data-loaded', 'rendered');
var subFeatures = areaNode.getSubFeatures();
}
//绘制某个区域的边界
function renderAreaPolygons(areaNode) {
//清除已有的绘制内容
districtExplorer.clearFeaturePolygons();
//绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: '#bbdaf1', //线颜色 这里设置你想要的国境线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillColor: "", //填充色
fillOpacity: 0, //填充透明度
});
}
//切换区域后刷新显示内容
function refreshAreaNode(areaNode) {
districtExplorer.setHoverFeature(null);
renderAreaPolygons(areaNode);
//更新选中节点的class
var $nodeEles = $('#area-tree').find('h2');
$nodeEles.removeClass('selected');
var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');
//展开下层节点
$selectedNode.closest('li').removeClass('hide-sub');
//折叠下层的子节点
$selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
}
//切换区域
function switch2AreaNode(adcode, callback) {
if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
return;
}
loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error);
}
return;
}
currentAreaNode = window.currentAreaNode = areaNode;
//设置当前使用的定位用节点
districtExplorer.setAreaNodesForLocating([currentAreaNode]);
refreshAreaNode(areaNode);
if (callback) {
callback(null, areaNode);
}
});
}
//加载区域
function loadAreaNode(adcode, callback) {
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error);
}
console.error(error);
return;
}
renderAreaPanel(areaNode);
if (callback) {
callback(null, areaNode);
}
});
}
//全国
switch2AreaNode(100000);
});
})
.catch((e) => {
console.log(e);
});
};
onMounted(() => {
ininMap();
});
return {
map,
};
},
};
</script>
标签：function,自定义,adcode,地图,DistrictLayer,callback,areaNode,props,var 来源： https://www.cnblogs.com/u10101/p/15637967.html