vue3+ts+leaflet使用L.polyline和L.geoJSON分别绘制折线图层，可用于航线，交通路线等方面

已于 2024-08-27 16:21:13 修改
阅读量409 收藏 8
点赞数 5
文章标签： vue.js 前端 javascript
于 2024-08-27 15:39:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43275227/article/details/141603850
版权

学习leaflet总结相关内容，若有不足，请谅解。

在实际工作中使用webGis技术leaflet绘制折线图层很常用，现在分享用L.polyline和L.geoJSON分别绘制折线图层的方法。

一、leaflet官网关于L.polyline方法使用介绍

参考链接：Documentation - Leaflet - 一个交互式地图 JavaScript 库icon-default.png?t=N7T8https://leafletjs.cn/reference.html#polyline

二、使用L.polyline绘制折线图层

具体代码如下，加载的地图是天地图，在使用L.polyline绘制折线图层，需要先将原有json格式数据转换成经纬度数组，数组中展示的数据类型是[维度，经度],转换的时候注意，L.polyline适合数据已经是经纬度数组类型的数据，如果给定的数据是样例中的geojson类型数据，建议使用L.geoJSON来绘制图层。


<template>
  <div ref="mapContainer" class="map-container"></div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, onUnmounted } from 'vue';
import L, { LatLngExpression, Polyline } from 'leaflet'; // 导入Leaflet库，用于地图功能
import 'leaflet/dist/leaflet.css'; // Leaflet样式

// 定义DOM引用
const mapContainer = ref(null); // 地图容器DOM引用
const map = ref(null); // 地图实例引用
const center = ref([30.48, 114.27]); // 地图初始中心点坐标

/**** 图层 start *****/

let polylineLayer = null; // 折线图层

/**** 图层 end *****/

// 初始化地图
const TianDiTuKey = '你的key';
// 天地图访问地址
const TianDiTu = reactive({
  Normal: {
    Map:
      'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
      TianDiTuKey,
    Annotion:
      'https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
      TianDiTuKey,
  },
});
// 折线数据
const polylineArray = ref({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {  },
      geometry: {
        type: 'LineString',
        coordinates: [
          [106, 29],
          [104, 26],
        ],
      },
    },
    {
      type: 'Feature',
      properties: { },
      geometry: {
        type: 'LineString',
        coordinates: [
          [114.20, 30],
          [111.6399, 29],
          [109.496, 28],
          [106.028, 27],
          [103.2901, 25.4499],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [116, 40],
          [116, 40],
          [116, 40],
          [116, 41],
          [111, 43],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [116, 39],
          [115, 37],
          [114, 36],
          [114, 33],
          [114, 31],
          [114, 30],
          [114, 30],
          [113, 29],
          [113, 27],
          [113, 24],
          [113, 23],
          [113, 23],
          [113, 23],
        ],
      },
    },
  ],
});
const initMap = () => {
  // 设置天地图图层加载参数
  const options = {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
  };
  // 通过 QXStore 获取天地图矢量图层和注记图层
  const mapVec = L.tileLayer(TianDiTu.Normal.Map, options);
  const mapCva = L.tileLayer(TianDiTu.Normal.Annotion, options);
  // 将两个图层组合成一个Layer Group
  const layers = L.layerGroup([mapVec, mapCva]);
  // 实例化地图对象，设置中心点、缩放级别、最小最大缩放限制等配置
  map.value = L.map(mapContainer.value, {
    center: center.value, // 中心点坐标
    zoom: 5, // 初始缩放级别
    minZoom: 3, // 最小缩放级别
    maxZoom: 22, // 最大缩放级别
    noWrap: true, // 禁止地图水平滚动
    layers: [layers], // 加载图层组
    zoomControl: true, // 显示缩放控制
    attributionControl: false, // 隐藏版权信息
  });
};

/*** 初始化折线图层 start */
const initLine = () => {
  let pdata = [];
  if (!polylineLayer) {
    // 数据处理
    polylineArray.value.features.forEach((feature: any) => {
      const polylineData = feature.geometry.coordinates;
      // 转换坐标格式
      const latLngs: LatLngExpression[] = polylineData.map(([lng, lat]) => [lat, lng]);
      pdata.push(latLngs);
    });
    // 折线参数,可根据实际情况设置
    const options = reactive({
      color: 'blue', //  线的颜色
      weight: 3, // 线的宽度
      opacity: 0.6, // 线的透明度
    });
    // 添加到地图
    polylineLayer = L.polyline(pdata, {
      color: options.color, //  线的颜色
      weight: options.weight, // 线的宽度
      opacity: options.opacity, // 线的透明度
      lineCap: options.lineCap, // 线端点的样式 'butt' | 'round' | 'square';
      lineJoin: options.lineJoin, // 线连接处的样式
      dashArray: options.dashArray, // 虚线模式
      dashOffset: options.dashOffset, // 虚线偏移量
      fill: options.fill, // 填充颜色
      fillColor: options.fillColor, // 填充颜色
      fillOpacity: options.fillOpacity, // 填充透明度
      fillRule: options.fillRule, //  填充规则
      bubblingMouseEvents: options.bubblingMouseEvents, //  是否冒泡鼠标事件
      smoothFactor: options.smoothFactor, // 平滑因子
    }).addTo(map.value);
  }
};

// 组件挂载完成后初始化地图
onMounted(async () => {
  // 初始化地图
  initMap();
  // 初始化折线图层
  initLine();
});
// 组件卸载前清理地图和图表资源，防止内存泄漏
onUnmounted(() => {
  map.value?.remove();
});
</script>
<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 95vh;
  z-index: 1;
}
::v-deep {
  .leaflet-bottom {
    margin-bottom: 100px;
    bottom: 1ch;
  }
  .leaflet-right {
    margin-right: 100px;
    right: 1ch;
  }
}
</style>

二、使用L.geoJSON绘制折线图层

代码如下：


// 折线数据
const polylineArray = ref({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [106, 29],
          [104, 26],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [114.2, 30],
          [111.6399, 29],
          [109.496, 28],
          [106.028, 27],
          [103.2901, 25.4499],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [116, 40],
          [116, 40],
          [116, 40],
          [116, 41],
          [111, 43],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [116, 39],
          [115, 37],
          [114, 36],
          [114, 33],
          [114, 31],
          [114, 30],
          [114, 30],
          [113, 29],
          [113, 27],
          [113, 24],
          [113, 23],
          [113, 23],
          [113, 23],
        ],
      },
    },
  ],
});
const initMap = () => {
  // 设置天地图图层加载参数
  const options = {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
  };
  // 通过 QXStore 获取天地图矢量图层和注记图层
  const mapVec = L.tileLayer(TianDiTu.Normal.Map, options);

  const mapCva = L.tileLayer(TianDiTu.Normal.Annotion, options);
  // 将两个图层组合成一个Layer Group
  const layers = L.layerGroup([mapVec, mapCva]);
  // 实例化地图对象，设置中心点、缩放级别、最小最大缩放限制等配置
  map.value = L.map(mapContainer.value, {
    center: center.value, // 中心点坐标
    zoom: 5, // 初始缩放级别
    minZoom: 3, // 最小缩放级别
    maxZoom: 22, // 最大缩放级别
    noWrap: true, // 禁止地图水平滚动
    layers: [layers], // 加载图层组
    zoomControl: true, // 显示缩放控制
    attributionControl: false, // 隐藏版权信息
  });
};

/*** 初始化折线图层 start */
const initLine = () => {
    // 折线参数,可根据实际情况设置
    const options = reactive({
      color: 'blue', //  线的颜色
      weight: 3, // 线的宽度
      opacity: 0.6, // 线的透明度
    });
    // 添加到地图
    polylineLayer = L.geoJSON(polylineArray.value, {
      color: options.color, //  线的颜色
      weight: options.weight, // 线的宽度
      opacity: options.opacity, // 线的透明度
      lineCap: options.lineCap, // 线端点的样式 'butt' | 'round' | 'square';
      lineJoin: options.lineJoin, // 线连接处的样式
      dashArray: options.dashArray, // 虚线模式
      dashOffset: options.dashOffset, // 虚线偏移量
      fill: options.fill, // 填充颜色
      fillColor: options.fillColor, // 填充颜色
      fillOpacity: options.fillOpacity, // 填充透明度
      fillRule: options.fillRule, //  填充规则
      bubblingMouseEvents: options.bubblingMouseEvents, //  是否冒泡鼠标事件
      smoothFactor: options.smoothFactor, // 平滑因子
    }).addTo(map.value);
  }
};

四、总结

leafelt绘制折线图层时，根据实际情况选择对应的方法，折线参数也是根据实际选择。

五、效果展示

https://i-blog.csdnimg.cn/direct/f1f0c168c8e940208425077f32328bdf.png

qq_43275227
关注
Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
BADAO_LIUMANG_QIZHI的博客
04-10 2268
场景 Leaflet快速入门与加载OSM显示地图： Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现水流模拟效果。 水流模拟，即一条线从起点出发，随着时间不断变长，直至到达终点。 Leaflet提供了setLatLngs()方法，供用户修改线坐标，再结合JavaScript定时器，不断地修改线坐标，达到 线动态变长的效果。 插件地址： htthttps://github.com/IvanSanchez/Le
129：vue+leaflet 使用L.geoJSON加载文件，参数onEachFeature的使用方法
大剑师兰特的GIS世界
04-06 851
第129个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍onEachFeature的使用方法。onEachFeature 选项是在将每个功能添加到GeoJSON图层之前调用的功能。使用此选项通常是为了点击某个功能时可以附加弹出窗口。
leaflet地图使用 vue3+ts
weixin_47218354的博客
12-13 444
【代码】leaflet地图使用 vue3+ts。
vue+leaflet添加polyline轨迹
qq_40920553的博客
07-30 2882
这一节将为大家描述如何在vue中使用leaflet添加polyline轨迹。
vue3.0使用leaflet
zhou13528482267的博客
11-24 1808
引入leaflet.chinatmsproviders组件；应用管理=》创建新应用=》获取到对应天地图key。注册并登录，访问开发资源 =》地图API =》在main.ts里面引用地图样式。在.vue文件中加载leaflet。2、引入leaflet组件。地图服务=》申请key。1、获取天地图密钥；
【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js
YueMiaoL的博客
07-30 809
起因是为解决天地图渲染十万条数据卡顿问题，自从用了leaflet渲染后就没那么折腾了，使用canvas矢量图层绘制这加载速度也就解决了，心情也舒畅了~除了查leaflet相关攻略大部分都是收费一说，难顶。1.论开发地图自定义绘制工具：leaflet依赖第三方插件，插件暂时感觉没天地图灵活（待我再研究研究），天地图只需按管网API开发既是。7.论开发出现问题寻求解决方案：就绿色上网来说，leaflet更多搜的是付费方案，天地图有些搜不太到，两者体感就大差不差了。
L.polyline() 添加点击事件
weixin_43493113的博客
05-29 799
L.polyline()添加点击事件
127： vue+leaflet 使用L.geoJSON加载文件，参数filter的使用方法
大剑师兰特的GIS世界
04-06 543
第127个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍filter的使用方法。filter将用于决定是否包含某个功能的函数。默认是包括所有特征。
117：vue+leaflet 分别使用L.svg和L.canvas来渲染矢量图形
大剑师兰特的GIS世界
03-17 700
第117个本示例的目的是介绍演示如何在vue+leaflet中显示矢量图形的渲染方式，这里包含svg和canvas的方式，里面蓝色的为canvas的方式，里面紫色的为svg方式。
015：vue+leaflet 使用Polyline画多段折线
大剑师兰特的GIS世界
09-15 811
本示例的目的是介绍演示如何在vue+leaflet中画多段折线，这里使用的是Polyline的api方法。点击查看本专栏内容目录列表。
Leaflet.MultiOptionsPolyline, 多颜色多段线的传单插件.zip
09-18
Leaflet.MultiOptionsPolyline, 多颜色多段线的传单插件 Leaflet.MultiOptionsPolyline支持多段线的多个样式的小叶 -plugin 。在这里你可以看到一个演示程序。用法看看这个演示。 包含源代码的链接。示例L.multiOptionsPolyline(p
Leaflet.PolylineMeasure:单张插件可测量简单线和复杂多段线的距离
04-29
Leaflet.PolylineMeasure Leaflet插件可测量简单线和复杂多段线的距离。 以公制（米，公里），英制（英尺，陆地英里）或海里为单位进行测量。 线绘制为逼真的圆弧。 计算方位角和距离时要考虑，这是地球上两点之间的最短路径。 箭头指示直线的大圆距离的真正中点，而不是其光学中间点，该中间点因投影而有所不同，尤其是在高纬度地区。 要完成绘制线条，只需双击，或单击最后一个（=橙色）点，或按“ ESC”键。 通过单击并拖动，可以随后移动线的点。 （不能保证此功能可以在所有使用触摸输入的移动浏览器上使用，例如，对于Chrome Mobile而言，此功能目前无法使用） 要在完成一行后继续，请按住Ctrl键，同时单击一行的第一点或最后一点。 要添加点，请在单击箭头时按住Ctrl键。 要删除点，请在单击点时按住Shift键。 这是jtreml的Plugin 的演变，
128：vue+leaflet 使用L.geoJSON加载文件，参数style的使用方法
大剑师兰特的GIS世界
04-06 1369
第128个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍style的使用方法。style选项可以用来以两种不同的方式来设置样式。
vue3+leaflet开发地图入门教程(超级详细)
weixin_55800388的博客
04-18 1632
​离线地图,leaflet ,标注，点击事件，弹窗，折线
vue3中使用leaflet加载瓦片地图
mostrichman的博客
04-18 2169
lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'是在线的瓦片地图源，在内网上使用需要下载瓦片地图放到服务器上。我的项目中有右键菜单的需求，有需要的可以引入以下两个文件，在引入之前需要npm先安装，指令 npm install leaflet-contextmenu --save。找到项目的main.js文件引入并全局注册,也可以在需要使用的vue页面单独引入，由于我的项目在多个页面都有使用到，全局引入更方便些，小伙伴们可以根据需求自行选择。
vue+leaflet
weixin_30709635的博客
07-04 608
1、index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link hre...
vue3+leaflet+天地图
当然是最帅气的茶茶丸了！哇耶~
06-24 4821
leaflet天地图
地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法
qq_59598977的博客
01-26 4404
leaflet基本用法，事件，图层，Geo数据
vue3+ts中使用 leaflet 和 underscore 具体使用方式
最新发布
10-26
在Vue 3 + TypeScript项目中，结合Leaflet地图库和Underscore.js库，你可以按照以下步骤进行整合： 1. **安装依赖**: - 首先，你需要通过npm或yarn安装这两个库： ```bash npm install @vue/leaflet --save npm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值