leaflet-ruler 测距

使用 leaflet 、leaflet-ruler 、vue 实现测距功能。

示例

安装依赖

pnpm i leaflet-ruler

代码实现

index.vue

<script setup>
import { defineAsyncComponent } from 'vue';
import 'leaflet'
import 'leaflet-ruler/src/leaflet-ruler.css';
import 'leaflet-ruler';

const InitMap = defineAsyncComponent(() =>
  import('../../components/InitMapTianditu.vue')
);

const initMeasureDistance = (map) => {
  const options = {
    position: 'topleft', // 控件的位置 topright、topleft、bottomright
    circleMarker: {
      // 这个插件中 Leaflet 圆形 marker 的配置
      color: '#8ab4f8',
      radius: 4
    },
    lineStyle: {
      // 这个插件中 Leaflet polyline 的配置，https://leafletjs.cn/reference.html#path
      color: '#8ab4f8',
      width: 2
    },
    lengthUnit: {
      // 自定义长度单位默认单位是公里
      display: 'km', // 展示的单位
      decimal: 2, // 保留几位小数
      factor: null, // 值的转换 如 km 转换为 m，这里填 1000。
      label: '距离:'
    },
    angleUnit: {
      display: '&deg;', // 展示的单位
      decimal: 2, // 保留几位小数
      factor: null, // 角度单位转换（超纲了！）
      label: '角度:'
    }
  };
  L.control.ruler(options).addTo(map);
};
</script>

<template>
  <init-map @map-load="initMeasureDistance"></init-map>
</template>

<style>
.leaflet-ruler {
  background-image: url('https://leafletjs-example.netlify.app/logo.png')!important;
  background-size: 100% 100%;
}
</style>

InitMapTianditu.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import L from 'leaflet';

const props = defineProps({
  center: {
    type: Array,
    default: [32.0237855, 118.8075675]
  }
})

const emit = defineEmits(['mapLoad']);

const mapRef = ref();

const initMap = () => {
  const map = L.map(mapRef.value, {
    center: props.center,
    zoom: 11,
    minZoom: 1,
    maxZoom: 18
  });

  const mapType = 'vec';
  L.tileLayer(
    'https://t{s}.tianditu.gov.cn/' +
      mapType +
      '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      mapType +
      '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
    {
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      attribution:
        '&copy; <a href="http://lbs.tianditu.gov.cn/home.html">天地图 GS(2022)3124号 - 甲测资字1100471</a>'
    }
  ).addTo(map);

  const mapLabelType = 'cva';
  L.tileLayer(
    'https://t{s}.tianditu.gov.cn/' +
      mapLabelType +
      '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      mapLabelType +
      '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
    {
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }
  ).addTo(map);

  // 地图初始化完成发送事件
  emit('mapLoad', map);

  return map;
};

const mapObj = ref();

// 在 onMounted 中初始化地图
onMounted(() => {
  mapObj.value = initMap();
});

const removeMap = () => {
  if (mapObj.value) {
    mapObj.value.remove();
  }
};

// 在组件卸载时删除地图
onUnmounted(() => {
  removeMap();
});
</script>

<template>
  <div ref="mapRef" class="map"></div>
</template>

<style scoped>
.map {
  height: 40vh;
  z-index: 0;
}
</style>

贡献者

vae