初始化
創建項目
nodejs18.0.6npm9.5.1
引入地圖服務
VueLeaflet
GitHub - vue-leaflet/vue-leaflet： vue-leaflet 與 vue3 兼容
Vue Leaflet (vue2-leaflet)
package.josn安裝版本
直接添加四個依賴
{// ..."scripts": {// ...},"dependencies": {"leaflet-velocity": "^2.1.4","ts-debounce": "^4.0.0",// ...},"devDependencies": {"@types/leaflet": "^1.9.0","leaflet": "^1.9.4",// ... }
}- 直接在 src 目錄下引入
VueLeaflt包本地 VueLeaflt組件壓縮包
- 新建 map 地圖組件使用 VueLeaflet 地圖框架
<template><div id="map"><div class="map-container"><!-- 地圖組件 --><div class="map"><l-mapref="map"v-model:zoom="zoom":center="mapCenter":attribution-control="false":zoom-control="false"><l-layer-group v-for="(item, index) in baseLayers" :key="index"><!-- 地圖底圖 --><l-layer-group><l-tile-layerv-if="item.show":url="item.url"layer-type="base":name="item.name"></l-tile-layer></l-layer-group></l-layer-group></l-map></div></div></div></template>JavaScript 引入
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { LMap, LLayerGroup, LTileLayer } from '@/VueLeaflet/components/index'
import 'leaflet/dist/leaflet.css'</srcipt>- 切記使用標簽時需要先引入
import {LMap,LLayerGroup,LTileLayer,// ...
} from '@/VueLeaflet/components/index';
天地圖
天地圖 開發管理平臺 (tianditu.gov.cn)
天地圖API (tianditu.gov.cn)
創建應用獲取 key 密鑰, 繪制地圖地圖
// 獲取env密鑰
const TIANDITU_KEY = import.meta.env.VITE_TIANDITU_KEY;// 地圖底圖
const baseLayers = ref([{index: 1,name: '行政圖',url: `https://t0.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,// url: '/map/{z}/{x}/{y}.png',// 矢量注記anno: `https://t0.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: true,},{index: 2,name: '影像圖',url: `https://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,anno: `https://t0.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: false,},{index: 3,name: '地形圖',url: `https://t0.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,anno: `https://t0.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: false,},
])
結合組件
創建地圖組件map 使用VueLeaflet嵌套天地圖服務
供其他頁面使用
<template><div id="map"><div class="map-container"><!-- 地圖組件 --><div class="map"><l-mapref="map"v-model:zoom="zoom":center="mapCenter":attribution-control="false":zoom-control="false"><l-layer-group v-for="(item, index) in baseLayers" :key="index"><!-- 地圖底圖 --><l-layer-group><l-tile-layerv-if="item.show":url="item.url"layer-type="base":name="item.name"></l-tile-layer><!-- 省市標注圖層 --><l-tile-layerv-if="item.anno && item.show":url="item.anno"layer-type="annotation":name="item.name + '標注'"></l-tile-layer></l-layer-group></l-layer-group></l-map></div></div></div></template><script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { LMap, LLayerGroup, LTileLayer } from '@/VueLeaflet/components/index'
import 'leaflet/dist/leaflet.css'const map = ref()
const mapCenter = ref([24.611, 113.5387])
const zoom = ref(9)const TIANDITU_KEY = import.meta.env.VITE_TIANDITU_KEY;// 地圖底圖
const baseLayers = ref([{index: 1,name: '行政圖',url: `https://t0.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,// url: '/map/{z}/{x}/{y}.png',// 矢量注記anno: `https://t0.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: true,},{index: 2,name: '影像圖',url: `https://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,anno: `https://t0.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: false,},{index: 3,name: '地形圖',url: `https://t0.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,anno: `https://t0.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,show: false,},
])</script><style lang="scss" scoped>
#map {
}.map-container {position: relative;height: 100vh;width: 100vw;overflow: hidden;
}.map {height: 100%;width: 100%;
}</style>
地圖API處理
marker疊加標記點
基礎疊加: 疊加marker圖片
示例疊加 雷電圖標 自動站圖標, 提供 寬度、高度、經度、緯度、圖標路徑
<!-- marker圖層 --><l-layer-group><l-markerv-for="(marker, markerIndex) in markers":key="markerIndex":lat-lng="[marker.latitude, marker.longitude]"><!-- 展示雷達 自動站 marker --><l-ico:icon-size="[marker.width, marker.height]":icon-anchor="[18, 18]":class-name="'my-div-icon'":icon-url="marker.iconPath"/></l-marker></l-layer-group>pinia全局管理 雷電數據內容
const getAllThunderData = () => {const width = 20;const height = 20;thunderData.value = thunderData.value.map((point, index) => ({...point,id: index + 1, // 累加idwidth,height: point.intensity < 0 ? height / 5 : height, // 負號是長方形iconPath:point.intensity >= 0? '/src/assets/images/icon/windArrow/positive.png' // intensity雷暴強度 >= 0: '/src/assets/images/icon/windArrow/negative.png',type: 'thunder',}));return thunderData.value;};
基礎疊加： 顯示數值，不顯示圖標
示例展示 降水數據，直接將降水數值疊加在地圖上
也是使用 l-icon 標簽，只不過不添加 :icon-url 字段
直接在icon里面使用 div 展示數據即可
<!-- marker圖層 --><l-layer-group><l-markerv-for="(marker, markerIndex) in markers":key="markerIndex":lat-lng="[marker.latitude, marker.longitude]"><!-- 顯示降水數值 --><l-iconv-if="marker.type === 'rain'":icon-size="[20, 28]":icon-anchor="[28, 28]":class-name="'my-div-icon'"><div class="rain-marker">{{ marker.rainfall }}</div></l-icon></l-marker></l-layer-group>繪制區域輪廓
DataV.GeoAtlas地理小工具系列 (aliyun.com)
訪問網址, 下載所需區域的GeoJSON數據并保存, 最細顆粒度為 區
- 讀取 assets 下的 json 數據
import {LGeoJson,
} from '@/VueLeaflet/components/index';
import type { GeoJSON } from 'geojson';// GeoJSON 數據
const geoJsonData = ref<GeoJSON | null>(null);// 樣式
const geoJsonOptions = ref({style: {color: '#3388ff',weight: 2,opacity: 1, // 邊界透明度fillColor: '#3388ff',fillOpacity: 0.2 // 填充透明度}
});// 加載 GeoJSON 數據
const loadGeoJsonData = async () => {try {const response = await fetch('/src/assets/json/xxxx.json');const data = await response.json();geoJsonData.value = data;} catch (error) {console.error('加載 GeoJSON 數據失敗:', error);}
};onMounted(() => {loadGeoJsonData();
});
- 在地圖上進行繪制
<l-layer-group v-for="(item, index) in baseLayers" :key="index"><!-- GeoJSON 圖層輪廓 --><l-layer-group><l-geo-jsonv-if="geoJsonData":geojson="geoJsonData":options="geoJsonOptions"/></l-layer-group>// ......
