美文网首页
高德地图只显示某一个省市区域

高德地图只显示某一个省市区域

作者: jesse28 | 来源:发表于2022-05-09 13:47 被阅读0次

参考链接: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();
        });
      });
    },

相关文章

网友评论

      本文标题:高德地图只显示某一个省市区域

      本文链接:https://www.haomeiwen.com/subject/gpshurtx.html