6月-高德地图绘制指南

6月-高德地图绘制指南

• 高德根据起始点经纬度获取途经点绘制路段
• 高德绘制路线、路线悬浮、点击变色
• 根据经纬度获取地址信息
• 行政区域加边界线

高德根据起始点经纬度获取途经点绘制路段

           const routeDriveInstance = new AMap.Driving({
              policy: 0, // 使用枚举值来设置驾车路线规划策略
              // map: this.map, //	搜索结果的标注、线路等是否自动添加到此地图上。我们不 需要，我们只需要获取途经点
              hideMarkers: true,//设置隐藏路径规划的起始点图标
            });
            const path = [[30.233,120.389],[31.233,120.189],....]; //站点数据
            const startPoint = path[0] //起点坐标
            const endPoint = path[path.length - 1];//终点点坐标
            routeDriveInstance.search(startPoint, endPoint, (status, result) => {
              if (status === "complete" && result.info === "OK") {
                let path = [];
                result.routes[0].steps.map((o) => {
                  o.path.map((m) => {
                    path.push([m.lng, m.lat]);
                  });
                });
                this.line = new AMap.Polyline(path);

高德绘制路线、路线悬浮、点击变色

       this.line = new AMap.Polyline(
                  path, //地址 [[30.233,120.389],[31.233,120.189],....]
                  {
                    strokeColor: '#4F9AFF',//轮廓线颜色
                    strokeOpacity: 0.65, //轮廓线透明度
                    strokeWeight: 5, //轮廓线宽度
                    showDir: false, //否延路径显示白色方向箭头
                    isOutline: false,
                  },
                  obj:'...'//自定义传入的字段信息 点击时可在e.target.De 中获取
                );
                //悬浮时高亮 并加粗
                 this.line.on("mouseover", (e) => {
                  e.target.setOptions({
                    strokeOpacity: 1,
                    strokeWeight: 7,
                    isOutline: false,
                  });
                });
                this.line.on("mouseout", (e) => {
                  e.target.setOptions({
                    strokeOpacity: 0.65, 
                    strokeWeight: 5,
                    isOutline: false,
                  });
                });
                //点击时显示描边
                this.line.on("click", (e) => {
                  e.target.setOptions({
                    isOutline: true, //绘制的规划线路是否显示描边
                    outlineColor: 'rgba(79, 154, 255,.3)', //绘制的规划线路的描边颜色
                    borderWeight: 5,
                  });
                });
              

根据经纬度获取地址信息

  this.getAdcodeByCoor([longitude, latitude]).then((item) => {
   console.log(item.adress) //地址信息
  });
  // 通过坐标点获取adcode
 getAdcodeByCoor(coor) {
      return new Promise((resolve) => {
        this.geocoder.getAddress(coor, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            const { regeocode } = result;
            if (regeocode.addressComponent) {
              const { district, township } = regeocode.addressComponent;
              const adress =
                regeocode.formattedAddress.split(township ? township : district)[1] || township;
              resolve({ adress});
            }
          } else {
            resolve({});
          }
        });
      });
    },

行政区域加边界线

     const level = this.getZoomLevel({ adcode: appConfig.mainAdcode + "" });
      // 创建行政区划查询对象
      const districtSearch = new AMap.DistrictSearch({
        extensions: "all",
        level:
          level === 7 ? "province" : level === 10 ? "city" : level === 12 ? "district" : "street",
           //根据行政区域code等级判断查省、市、区
      });
     const mainAdcode =510100
      // 行政查询只能字符！！
      districtSearch.search(mainAdcode + "", (status, result) => {
        if (status === "complete") {
          const bounds = result.districtList[0].boundaries;
          let polygons = [];
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygonLevel = new AMap.Polyline({
                strokeWeight: 5,
                path: bounds[i],
                strokeColor: "#0091ea",
                strokeStyle: "solid", //线样式
              });
              polygons.push(polygonLevel);
            }
          }
          // 添加多边形到地图上
          this.map.add(polygons);
          // 调整地图视野到多边形所覆盖的区域
          this.map.setFitView(polygons);
        }
      });

    // 通过adcode判断行政等级
    getZoomLevel({ adcode, typecode }) {
      // 通过adcode判断行政等级
      if (adcode === "100000") return 4; // 全国
      if (adcode.slice(2, 6) === "0000") return 7; // 省级
      if (adcode.slice(4, 6) === "00") return 10; // 市级
      if (adcode.slice(4, 6) !== "00" && !typecode) return 12; // 区县级
      // 区县级
      if (typecode === "190105") return 12; // 区县级
      if (typecode === "190106") return 14; // 乡镇级
      if (typecode === "190108") return 15; // 村庄级
      if (typecode === "190109" || typecode === "190107") return 16; // 村组级和街道级
      if (typecode > 190218 || typecode < 190100) return 17; // 某一地点
      return 12; // 默认返回12级
    },