高德地图只显示某一个省市区域
2022-05-09 本文已影响0人
jesse28
参考链接:https://blog.csdn.net/liujucai/article/details/100070540
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="<%= BASE_URL %>bitbug_favicon.ico" rel="icon">
<script src="./config.js"></script>
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=d8&plugin=AMap.DistrictSearch"></script>
<title>城市管理综合行政执法</title>
</head>
<body>
<noscript>
<strong>We're sorry but main-web doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
image.png
initMap() {
this.$nextTick(() => {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map("mapScreen", {
center: [106.25936, 29.29014],
zoom: 12,
zooms: [3, 20],
expandZoomRange: true,
mapStyle: "amap://styles/darkblue",
});
var options = {
subdistrict: 0,
extensions: "all",
level: "district",
};
var district = new AMap.DistrictSearch(options);
console.log("地图区域", district.search());
district.search("江津区", (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: "solid",
/*勾勒形状轮廓的虚线和间隙的样式，此属性在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);
this.map.add(polygon);
});
// 创建 AMap.Icon 实例：未选中的地图标记
this.commonMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapnochecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 选中的地图标记
this.clickMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapChecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 第一次调出队伍建设
this.handleteamBuild();
});
});
},
显示效果：
image.png
二、需要显示外部区域
参考链接:https://lbs.amap.com/demo/javascript-api/example/district-search/draw-district-boundaries
image.png
// 初始化地图
initMap() {
this.$nextTick(() => {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map("mapScreen", {
center: [106.25936, 29.29014],
zoom: 12,
zooms: [3, 20],
expandZoomRange: true,
mapStyle: "amap://styles/darkblue",
});
var options = {
subdistrict: 0,
extensions: "all",
level: "district",
};
var district = new AMap.DistrictSearch(options);
console.log("地图区域", district.search());
district.search("江津区", (status, result) => {
console.log("status", status);
console.log("result", result);
var bounds = result.districtList[0].boundaries;
var polygons = [];
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: this.map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.1,
fillColor: "rgba(0,0,0)",
strokeColor: "rgb(20,164,173)",
strokeWeight: 4,
trokeDasharray:[10,2,10]
});
polygons.push(polygon);
this.map.add(polygon)
}
// 地图自适应
this.map.setFitView();
}
});
// 创建 AMap.Icon 实例：未选中的地图标记
this.commonMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapnochecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 选中的地图标记
this.clickMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapChecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 第一次调出队伍建设
this.handleteamBuild();
});
});
},
