基于vue-webgis-mapbox-绘制线路并导出为kml文件功能

最新推荐文章于 2024-05-21 16:23:33 发布

UpSeven0

最新推荐文章于 2024-05-21 16:23:33 发布

阅读量806

点赞数

分类专栏： mapbox 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34811855/article/details/127016068

版权

mapbox 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景:之前用mapbox做了gis地图功能,后面又增加需求要求能够绘制线路并导出为kml文件

1.安装依赖

// mapbox
npm install mapbox-gl

// 线上 css js
// 可以引入 也可以下载下来引入 我是下载下来
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css" type="text/css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js"></script>

// 使用[mapbox/tokml]包和[eligray/FileSaver]文件下载包
npm install --save tokml file-saver

2.引入安装的依赖

// 引入
import '@/components/webgisMap/mapbox-gl-draw.js';
import '@/components/webgisMap/mapbox-gl-draw.css';
import tokml from 'tokml'
import FileSaver from 'file-saver'

3.核心代码

这里是基于mapbox的,至于mapbox地图的引入,执行等代码就不贴了,这里直接贴绘制路线以及导出的

--html

// html
<div @click="showRoad"></div>

--js

    // 地图加载成功
    mapLoad(map) {
      this.mapBoxMap = map;
      let DrawCon = new MapboxDraw();
      this.DrawCon = DrawCon;
      map.addControl(DrawCon, "top-right");
    // 隐藏原有的 重新写自己的
      $(".mapbox-gl-draw_ctrl-draw-btn").hide();
      // 监听绘制
      map.on("draw.create", (res) => {
        if (this.lastDraw === null) {
          // 记录本次并移除上次绘制结果
          this.lastDraw = (DrawCon.getAll()).features[0];
        } else {
          if ((DrawCon.getAll()).features.length > 1) { // 由于重复绘制，增加长度判断
            if (this.lastDraw) {
              DrawCon.delete(this.lastDraw.id);
            }
          }
          this.lastDraw = (DrawCon.getAll()).features[0];
        }
        const drawFeatures = res.features;
        if (drawFeatures && drawFeatures !== undefined && drawFeatures.length > 0) {
          const drawFeature = drawFeatures[0];
          if (drawFeature.properties !== undefined) {
            // 绘制完成后调用 生成geojson
            console.log(1, drawFeature);
            this.$prompt('请输入KML名称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              var kml_doc = tokml(drawFeature, {
                documentName: value,
                documentDescription: "doc description"
              });
              var file_name = value
              var kml_file = new File([kml_doc], `${file_name}.kml`, { type: "text/xml;charset=utf-8" });
              // 保存为kml文件
              FileSaver.saveAs(kml_file);
              this.clearDrawFeatures();//清除上一次绘制的点，这样每次绘制的时候，地图上不会有之前的点，代码放在下面
            }).catch(() => {
              this.clearDrawFeatures();//清除上一次绘制的点，这样每次绘制的时候，地图上不会有之前的点，代码放在下面
            });
            // saveAs(kml_file);
          }
        }
      });
    },
    // 调用绘制方法
    showRoad() {
      this.clearDrawFeatures();//清除上一次绘制的点，这样每次绘制的时候，地图上不会有之前的点，代码放在下面
      this.DrawCon.changeMode("draw_line_string");
    },
    // 清除绘制的图形元素
    clearDrawFeatures() {
      const that = this;
      //判断是否试最后一次绘制
      if (this.lastDraw) {
        this.DrawCon.delete(this.lastDraw.id);
      }
    },