一种基于高德Web API实现沿路画面的实现

概述

本文在mapboxGL框架下,分享一种基于高德Web API实现沿路画面的实现。

实现效果

实现

1. 实现思路

  1. 通过点击获取路径的起点和终点;
  2. 将多次规划路径的结果连成一条线;
  3. 当鼠标点击回到第一个点的时候结束绘制;
  4. 绘制结束后将路径闭合,形成多边形,并对形成的多边形进行处理;

实现代码

vue 复制代码
<template>
  <div class="map">
    <lzugismap-map
      :onLoad="mapLoaded"
      :maxPitch="0"
      :minPitch="0"
      :pitch="0"
      :style="style"
      :center="[113.91505797606129, 22.536719264512044]"
      :zoom="zoom"
      :interactive="true"
    >
    </lzugismap-map>
    <div class="map-tools">
      <button :disabled="isDraw" @click="startDraw">绘制</button>
    </div>
  </div>
</template>

<script>
import { LzugismapMap } from "@lzugismap/vue-lzugismap";
import * as turf from "@turf/turf";

class Geojson {
  constructor(features = []) {
    this.features = features;
    this.type = "FeatureCollection";
  }
}

let points = [],
  routes = [];

export default {
  components: {
    LzugismapMap,
  },
  data() {
    return {
      map: null,
      zoom: 16,
      isDraw: false,
    };
  },
  methods: {
    mapLoaded(map) {
      this.map = map;
      map.addSource("route-source", {
        type: "geojson",
        data: new Geojson(),
      });
      map.addSource("fill-source", {
        type: "geojson",
        data: new Geojson(),
      });
      map.addSource("point-source", {
        type: "geojson",
        data: new Geojson(),
      });
      map.addLayer({
        id: "route-source-fill",
        source: "fill-source",
        type: "fill",
        paint: {
          "fill-color": "red",
          "fill-opacity": 0.15,
        },
      });
      map.addLayer({
        id: "route-source-line",
        source: "route-source",
        type: "line",
        paint: {
          "line-color": "red",
          "line-width": 3.5,
        },
      });
      map.addLayer({
        id: "route-point",
        source: "point-source",
        type: "circle",
        paint: {
          "circle-color": "blue",
          "circle-opacity": 0.8,
          "circle-radius": 5,
        },
      });
      // this.showRoute();
    },
    startDraw() {
      this.isDraw = true;
      points = [];
      routes = [];
      const that = this;
      that.map.getSource("point-source").setData(new Geojson());
      that.map.getSource("route-source").setData(new Geojson());
      that.map.getSource("fill-source").setData(new Geojson());
      that.map.getCanvas().style.cursor = "crosshair";
      const mapClickEvt = (e) => {
        const point = e.lngLat.toArray();
        points.push(point);
        that.map
          .getSource("point-source")
          .setData(new Geojson(points.map((p) => turf.point(p))));
        if (points.length > 1) {
          const p0 = points[0];
          const start = points[points.length - 2];
          let end = points[points.length - 1];
          const dis = turf.distance(turf.point(p0), turf.point(end)) * 1000;
          const isEnd = dis < 10;
          if (isEnd) {
            end = p0;
          }
          // driving walking
          const url = `https://restapi.amap.com/v3/direction/walking?origin=${start.join(
            ","
          )}&destination=${end.join(
            ","
          )}&output=JSON&key={你申请的key}`;
          fetch(url)
            .then((res) => res.json())
            .then((res) => {
              const paths = res?.route?.paths || [];
              paths.forEach(({ steps }) => {
                steps.forEach(({ polyline }) => {
                  const _points = polyline
                    .split(";")
                    .map((item) => item.split(",").map(Number));
                  routes = [...routes, ..._points];
                });
              });
              if (isEnd) {
                const polygon = turf.lineToPolygon(turf.lineString(routes));
                const geojson = turf.polygonSmooth(polygon, { iterations: 10 });
                that.map.getSource("route-source").setData(geojson);
                that.map.getSource("fill-source").setData(geojson);
                that.isDraw = false;
                this.map.off("click", mapClickEvt);
                that.map.getCanvas().style.cursor = "";
              } else {
                const line = turf.lineString(routes);
                that.map.getSource("route-source").setData(line);
              }
            });
        }
      };
      this.map.on("click", mapClickEvt);
    },
  },
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.map-tools {
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 99;
}
</style>
相关推荐
枷锁—sha1 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻8 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜17 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己20 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900127 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2430 分钟前
html复习
javascript·microsoft·html
汉得数字平台35 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹41 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白6 小时前
C++11之lambda表达式与包装器
开发语言·c++