美酒没故事° 2021-02-20 14:30 采纳率: 34.4%
浏览 896
已结题

高德地图怎么才能只渲染局部地图?

这个只用遮罩覆盖中国以外的地图,我想要的是中国以外的就没有,不是颜色覆盖。

<!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>

现在这个样子很丑:

  • 写回答

2条回答 默认 最新

  • 美酒没故事° 2021-09-26 16:49
    关注

    img

    源码:

    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月4日
  • 已采纳回答 9月26日

悬赏问题

  • ¥15 关于Python的会计设计
  • ¥15 聚类分析 设计k-均值算法分类器,对一组二维模式向量进行分类。
  • ¥15 stm32c8t6工程,使用hal库
  • ¥100 有偿求易语言word文档取doc和docx页数方法或模块
  • ¥15 找能接spark如图片的,可议价
  • ¥15 关于#单片机#的问题,请各位专家解答!
  • ¥15 博通raid 的写入速度很高也很低
  • ¥15 目标计数模型训练过程中的问题
  • ¥100 Acess连接SQL 数据库后 不能用中文筛选
  • ¥15 用友U9Cloud的webapi