vue2项目中使用高德地图-城市地图-区县高亮-多边形覆盖物-矩形框选-海量点

相关需求

1. 城市地图
2. 区县高亮
3. 海量点-自定义坐标样式-坐标点动画-展示/隐藏
4. 多边形覆盖物-添加-编辑-定位-获取覆盖物内坐标
5. 矩形框选-获取覆盖物内坐标
6. 路径规划-俩坐标+驾车路线显示

简介里有木有你们要用的，没有快退！

地图引入

• 高德官方示例地址：developer.amap.com/api/jsapi-v…
• vue使用教程（超详细）：blog.csdn.net/qq_51553982…

地图初始化

initMap(){
    AMapLoader.load({
        key: '申请好的Web端开发者Key', // 首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
            'AMap.ToolBar', //工具条
            'AMap.HawkEye', //鹰眼
            'AMap.MouseTool', //鼠标工具
            'AMap.DistrictSearch',//行政区查询服务
            'AMap.PolygonEditor',
            'AMap.IndexCluster'
        ]//地图中要用的插件
    }).then(AMap => {
        // 地图实例化
        this.map = new AMap.Map('mapContainer', {
            viewMode: "2D",
            mapStyle: "amap://styles/fresh",//地图样式
            zoom: 12.6, //初始化地图级别
            center: this.mapCenter//初始化地图中心点位置
        })
        // 工具条插件
        let toolBar = new AMap.ToolBar({ position: 'RT' })//位置右上
        this.map.addControl(toolBar);
        // 鹰眼插件
        let hawkEye = new AMap.HawkEye()
        this.map.addControl(hawkEye);
        //鼠标工具
        this.mouseTool = new AMap.MouseTool(this.map)
        //行政区查询服务
        this.districtSearch = new AMap.DistrictSearch({
            subdistrict: 0,
            extensions: "all",
            level: "city",
        });
    }).catch(e => {
        console.log(e, '地图加载失败')
    })
}

城市地图

相关文档：developer.amap.com/api/javascr…

 cityMap() {
    const that = this
    that.map.setCenter('城市中心点'); //设置地图中心点
    that.districtSearch.setSubdistrict(0); // 只显示城市地图
    // 城市信息
    that.districtSearch.search('城市名', function (status, result) {
        const 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);
        let polygon = new AMap.Polygon({
            pathL: pathArray,//线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: "rgb(20,164,173)",
            strokeWeight: 1,
            strokeOpacity: 0.5,//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillColor: "rgba(220,220,220)",//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillOpacity: 1,//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeStyle: "solid",//轮廓线样式，实线:solid，虚线:dashed
            strokeDasharray: [10, 2, 10],//勾勒形状轮廓的虚线和间隙的样式,
            zIndex: 10,//椭圆覆盖物的叠加顺序。级别较高的多边形覆盖物在上层显示
        });
        polygon.setPath(pathArray);
        that.map.clearMap();
        that.map.add(polygon);
    });
    },

区县高亮

loadDistrict() {
    const that = this
    that.districtSearch.setSubdistrict(1);
    that.districtSearch.setLevel("city");
    //当前城市名
    that.currentCityName = that.currentCityName == '上海市' ? '上海城区' : that.currentCityName
    that.districtSearch.search(that.currentCityName, (status, result) => {
        let areaList = result.districtList[0].districtList;
        // 直辖市需要取城区部分
        if (result.districtList[0].adcode.indexOf('0000') > -1) {
            areaList = result.districtList[1].districtList;
        }
        if (areaList) {
            //生成行政区划polygon
            for (let i = 0; i < areaList.length; i++) { //构造MultiPolygon的path,多包了一级[]
                that.districtSearch.setSubdistrict(0);
                that.districtSearch.setLevel("biz_area");
                that.districtSearch.search(areaList[i].name, (status, rs) => {
                    let apath = rs.districtList[0].boundaries;
                    for (let i = 0; i < apath.length; i += 1) { //构造MultiPolygon的path,多包了一级[]
                        apath[i] = [apath[i]]
                    }
                    let polygon = new AMap.Polygon({
                        path: apath,
                        fillColor: '#ccebc5',
                        strokeOpacity: 1,
                        fillOpacity: 0.1,
                        strokeColor: '#2b8cbe',
                        strokeWeight: 1,
                        strokeStyle: 'dashed',
                        strokeDasharray: [5, 5],
                        zIndex: 10,//椭圆覆盖物的叠加顺序。级别较高的多边形覆盖物在上层显示
                    });
                    this.map.add(polygon);
                });
            }
        }
    });
},

索引聚合-坐标点（marker）自定义样式-坐标点动画-展示/隐藏

• 相关文档：高德地图中未找到，弹跳无效果，所以坐标隐藏/弹跳均采用css样式控制

1. 点坐标marker弹跳： lbs.amap.com/demo/javasc…
2. 隐藏-删除多个点标记-点标记：map.remove(点标记对象数组);
3. 隐藏-删除指定点-点标记：marker.setMap(null);（marker：指定点对象）
4. 索引聚合示例： developer.amap.com/demo/jsapi-…

IndexCluster() {
    const that = this
    if (that.cluster) { 
        that.cluster.setMap(null)
    }
    let clusterIndexSet = {
        shopId: {
            minZoom: 1,
            maxZoom: 22,
        }
    };
    let _renderClusterMarker = function _renderClusterMarker(context) {
        let clusterData = context.clusterData; // 聚合中包含数据
        //坐标点样式，可不设置
        var div = document.createElement('div');
        //坐标点弹跳动画
        div.innerHTML = `<div class="arrow"></div>`;
         //默认坐标点样式
        div.innerHTML = `<div class="arrow-default"></div>`;
         //坐标点隐藏
        div.innerHTML =`<div></div>`;
        context.marker.setContent(div)
        //坐标点放上去悬浮:名称
        context.marker.on('mouseover',  (e)=> {
            context.marker.setLabel({content: '坐标名'})
        });
    };
    this.cluster = new AMap.IndexCluster(this.map, '坐标点数组', {
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        clusterIndexSet: clusterIndexSet,
    });
},
//样式
.arrow-default {
  position: absolute;
  bottom: -10px;
  left: -10px;
  transform: translate(20px, 20px);
}
.arrow {
  position: absolute;
  bottom: -10px;
  left: -10px;
  transform: translate(20px, 20px);
  animation-name: beat;
  /*动画名称*/
  animation-duration: .7s;
  /*设置秒数*/
  animation-timing-function: linear;
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
}

@keyframes beat {
  0% {
    bottom: 0px;
  }

  100% {
    bottom: 20px;
  }
}

覆盖物-添加-编辑-定位

• 多边形的绘制：developer.amap.com/demo/jsapi-…
• 所有覆盖物都在视野范围内：map.setFitView()

1. 初始化多边形展示-可编辑

addPolygon() {
    let polygon = new AMap.Polygon({
        path: '多边形轮廓线的节点坐标数组',
        strokeColor: '#333333',//线条颜色
        strokeWeight: 2,//轮廓线宽度
        strokeStyle: 'solid',//轮廓线样式，实线:solid，虚线:dashed
        strokeOpacity: 1,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
        fillOpacity: 0,//边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
        fillColor: '#333333',//多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
        zIndex: 50,//椭圆覆盖物的叠加顺序。级别较高的多边形覆盖物在上层显示
    });
    this.map.add(polygon)
    //多边形覆盖物 双击：编辑
    polygon.on('dblclick', function (e) {
        this.polyEditor = new AMap.PolygonEditor(that.map, polygon)
        this.polyEditor.open()
    });
    polygon.on('rightclick', function (e) {
        that.newPolygonPath = e.target.getPath().map(pathMapItem => {
            return [pathMapItem.lng, pathMapItem.lat]
        })
        that.polyEditor.close()
        setTimeout(time => {//
            // 点是否在覆盖区域内
            AMap.GeometryUtil.isPointInRing(mapItem.lnglat, that.newPolygonPath)
        }, 200)
    });
}

1. 绘制多边形-编辑-删除

• 鼠标工具-绘制覆盖物：developer.amap.com/demo/jsapi-…
• 点是否在多边形内：developer.amap.com/demo/jsapi-…

// 绘制开关事件
drawClick(e) {
    //e:绘制开关状态
    if (e) { //开始绘制
        this.mouseToolEvt()
    } else {//结束绘制
        this.mouseTool.close(false)
    }
    this.drawStatus = e; //开始绘制/结束绘制
},
//多边形绘制
mouseToolEvt() {
    const that = this;
    that.mouseTool.polygon({
        strokeColor: '#333333',//线条颜色
        strokeWeight: 2,//轮廓线宽度
        strokeStyle: 'solid',//轮廓线样式，实线:solid，虚线:dashed
        strokeOpacity: 1,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
        zIndex: 50,//椭圆覆盖物的叠加顺序。级别较高的多边形覆盖物在上层显示
    })
    //绘制结束
    that.mouseTool.on('draw', e => {
        that.newPolygonPath = e.obj.getPath().map(pathMapItem => { // 多边形坐标
            return [pathMapItem.lng, pathMapItem.lat]
        })
        // 点是否在覆盖区域内
        AMap.GeometryUtil.isPointInRing(mapItem.lnglat, that.newPolygonPath)
    })
},
//删除
remove(){
    this.map.remove('要移除的polygon')
}

路径规划

逻辑：创建点覆盖物与线覆盖物，根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别

• 路径规划了解：lbs.amap.com/api/javascr…
• 覆盖物了解：lbs.amap.com/api/javascr…

位置经纬度：驾车规划路线：lbs.amap.com/demo/javasc…

//路径
parseRouteToPath(route) {
  let path = []
  for (let i = 0, l = route.steps.length; i < l; i++) {
    let step = route.steps[i]

    for (let j = 0, n = step.path.length; j < n; j++) {
      path.push(step.path[j])
    }
  }
  return path
},
// 绘制路线
drawRoute(route) {
  let path = this.parseRouteToPath(route)
  let startMarker = new AMap.Marker({
    position: path[0],
    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
    map: this.map
  })

  let endMarker = new AMap.Marker({
    position: path[path.length - 1],
    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
    map: this.map
  })

  let routeLine = new AMap.Polyline({
    path: path,
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 3,
    strokeColor: "#3366FF", 
    strokeOpacity: 1,
    strokeWeight: 6,
    // 折线样式还支持 'dashed'
    strokeStyle: "solid",
    // strokeStyle是dashed时有效
    strokeDasharray: [10, 5],
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 50,
  })
  routeLine.setMap(this.map)

  // 调整视野达到最佳显示区域
  this.map.setFitView([startMarker, endMarker, routeLine])
},
getRouter(){
    driving.search(new AMap.LngLat(经度, 纬度), new AMap.LngLat(经度, 纬度), function (status, result) {
      if (status === 'complete') {
        if (result.routes && result.routes.length) {
          this.drawRoute(result.routes[0])// 绘制路线
        }
      } else {
        log.error('获取驾车数据失败：' + result)
      }
    });
},

注意（是否插件）该引入插件的引入插件，官方文档会有提醒，基本的使用就是这些啦，其他的就是业务逻辑啦……