基于leaftlet使用本地谷歌卫星地图数据绘制巡检路线

leatlet

简介

leatlet是一个开源js地图库，支持使用在线或瓦片地图，在此基础上绘制路径、标记、自定义图层等。

开始使用

创建地图

<template>
  <div id="leafletMap"></div>
</template>
import L from "leaflet";
// import "leaflet/dist/leaflet.css";

const map = L.map("leafletMap", {
    center: [40.819968, 121.049398],
    zoom: 19,
    minZoom: 17,
    maxZoom: 18,
    zoomControl: false,
    attributionControl: false,
    maxBounds: [[40.8, 121.03], [40.9, 121.05]],
  })
  
  map.setMaxBounds([[...,...],[...,...]])
  map.setView([...,...])

地图创建需提供地图节点，设置中心点坐标（center）、缩放等级(zoom)，可通过minZoom及maxZoom限制缩放等级范围（本地地图一般只有局部地图数据超出部分瓦片缺失地图空白），attributionControl用来取消leatlet默认的控制功能及leaflet标志等。maxBounds用来控制地图范围限制地图超出。地图范围和中心点可使用setMaxBounds和setView来更新

const tilurl = "/asset/image/googlemaps/satellite_en/{z}/{x}/{y}.jpg";
L.tileLayer(tilurl).addTo(map);

使用tileLayer方法来加载地图数据，本地瓦片地图或者在线地图地址

绘制路径

L.polyline([[...,...],[...,...]], {
    color: "#58A7F9",
    stroke: true,
    weight: 3,
  }).addTo(map)

使用polyline方法来绘制指定路径，传入一组经纬度坐标。可自定义路径颜色、宽度等。

标点/标记

    L.Circle([50.5, 30.5], {radius: 20}).addTo(map);
    L.CircleMarker([50.5, 30.5], {radius: 20}).addTo(map);

leaftlet内置了Circle和CircleMarker方法用来在图上绘制标记点

L.marker(data[data.length - 1].marker, {
        icon: L.icon({
        iconUrl: ...,
        iconSize: L.point(44, 44),
        iconAnchor: L.point(22, 18),
      }),
  }).addTo(map);
  
  const markerData = data.map((v) => {
      return L.marker(v.marker, {
        iconUrl: ...,
        iconSize: L.point(44, 44),
        iconAnchor: L.point(22, 18),
      })
  });
  layerGroup = L.layerGroup(markerData).addTo(map);

也可以使用marker绘制自定义icon，iconSize和iconAnchor设置icon尺寸和定位偏移，支持将标点和标记分组方便统一管理（删除/添加等）

const marker = L.marker(point, {
    icon: ...,
    zIndexOffset: 10,
  }).addTo(map);
  
  marker.bindTooltip(..., {
      permanent: true,
      direction: "top",
      offset: L.point(0, -48),
    })
    .openTooltip()
    
    marker.setLatLng([...,...])

marker标记可绑定tip弹窗用来展示信息（弹窗可使用css控制样式）, 使用setLatLng来更新标记位置