六月-高德地图绘制指南

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

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

           const routeDriveInstance = new AMap.Driving({
              policy: 0, // 使用枚举值来设置驾车路线规划策略 0，普通道路
              // map: this.map, //	搜索结果的标注、线路等是否自动添加到此地图上。我们不 需要，我们只需要获取途经点
              hideMarkers: true,//设置隐藏路径规划的起始点图标
            });
            const path = [[30.233,120.389],[31.233,120.189],....]; //站点数据
            const waypoints=path.slice(1,path.length - 1) //途经点数据
            const startPoint = path[0] //起点坐标
            const endPoint = path[path.length - 1];//终点点坐标
            routeDriveInstance.search(startPoint, endPoint, { waypoints }, (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);
            })    

注意 途经点只支持16个点 ，若超出，我们采用下面的方法

   const paths = [[30.233,120.389],[31.233,120.189],....]; //站点数据
    this.renderDriverRoute(paths).then((res) => {
                let path = [];
                res.map((o) => {
                  o.routes[0].steps.map((m) => {
                    m.path.map((n) => {
                      path.push([n.lng, n.lat]);
                    });
                  });
                });
        this.line = new AMap.Polyline(path);
   })
               

---
   renderDriverRoute(paths){    
    const routePaths = [];
    const maxWayPoints = 14;
    let lastPoint = null;
    if (paths.length > maxWayPoints) {
      while (paths.length > 0) {
        const points = paths.splice(0, maxWayPoints);
        if (lastPoint) {
          points.unshift(lastPoint);
        }
        routePaths.push(points);
        lastPoint = points[points.length - 1];
      }
    } else {
      routePaths.push(paths);
    }

    // 渲染多个路线
    const promises = [];
    routePaths.forEach((item) => {
      promises.push(this.renderSingerDriverRoute(item));
    });
    return Promise.all(promises);
 }

----
  renderSingerDriverRoute(paths) {
    const startPoint = paths[0];
    const endPoint = paths[paths.length - 1];
    let waypoints = [];
    if (paths.length > 2) {
      waypoints = paths.slice(1, paths.length - 1);
    }
    // 渲染单个路线
    try {
      return new Promise((resolve, reject) => {
        const routeDriveInstance = new AMap.Driving({
          policy: 0,
          hideMarkers: true,
        });
        routeDriveInstance.search(startPoint, endPoint, { waypoints }, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            resolve(result);
          } else {
            reject(result);
          }
        });
      });
    } catch (e) {
      console.log("renderSingerDriverRoute", e);
    }
  }

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

高德绘制路段官网属性

       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,
                  });
                });
              

根据经纬度获取地址信息

地址描述与坐标之间的转换-AMap.Geocoder地理编码与逆地理编码官网属性

  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级
    },