我司网站改版上线网站建设搜狐快站生成app
一、Leaflet介绍
Leaflet是一个开源的JavaScript库，专门用于构建交互式的地图应用程序。它以其轻量级、高性能和易于使用的API而著称，方便开发者在网页中集成地图功能。Leaflet支持多种地图提供商的瓦片图层，如OpenStreetMap、Mapbox等，并允许用户自定义地图样式和交互功能。此外，Leaflet还提供了丰富的向量图层类型，如点、线、多边形等，以及标记和弹出窗口等功能，使得开发者能够轻松地在地图上展示和操作地理数据。
二、Leaflet使用示例
1. 引入Leaflet库
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import './eaflet.tilelayer.wmts.min'
import leafletMapUtil from '@/utils/leafletMap.js' --- 封装的地图工具方法2. 创建地图容器
在HTML文件中添加一个具有特定id的div元素，用于展示地图：
<template><div id="leaflet" class="map-container"></div>
</template>3. 初始化地图
使用JavaScript代码初始化Leaflet地图对象，并设置地图容器、初始中心坐标和缩放级别：
this.mapInstance = L.map(id, {minZoom: options.minZoom || 1,maxZoom: options.maxZoom || 20,center: options.center || center,zoom: options.zoom || zoom,zoomControl: options.zoomControl || false,attributionControl: false,})4. 添加瓦片图层
使用Leaflet提供的L.tileLayer()方法创建一个瓦片图层对象，并将其添加到地图上：
/*** 添加图层* @param layerUrl 地图图层url* @param layerOption 图层配置项（zIndex, opacity等）* @param layerName 图层名称* @param layerType 图层类型 wmts或其他，发布的图层使用wmts*/addLayer(layerUrl, layerName = '', layerOption = {}, layerType = '') {let layer = nullif (layerType === 'WMTS') {layer = L.tileLayer.wmts(layerUrl, {tileMatrixSet: 'GoogleMapsCompatible_' + layerName,format: 'image/png',layer: layerName,...layerOption,})} else {layer = L.tileLayer(layerUrl, layerOption)}layer.addTo(this.mapInstance)if (layerName) {this.layers[layerName] = layer}return layer},5. 绘制标记
使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：
/*** 添加地图marker* @param lat* @param lng* @param icon* @param props* @param groupName* @param iconType* @returns {*|boolean}*/addMarker(lat, lng, icon, props = {}, iconType = 'icon') {let icon_marker = nullif (iconType === 'icon') {icon_marker = L.divIcon({iconSize: props.iconSize || [32, 38],className: 'icon_marker',html: `<img src="${icon}" style="width: 100%;height: 100%;"/>`,})} else if (iconType === 'html') {let defaultHtml = {className: 'icon_marker',html: '',iconSize: [20, 20],}if (typeof icon === 'object') {defaultHtml = { ...defaultHtml, ...icon }icon_marker = L.divIcon(defaultHtml)} else if (typeof icon === 'string') {defaultHtml.html = iconicon_marker = L.divIcon(defaultHtml)}}if (!icon_marker) {return}if (lat && lng) {const marker = L.marker([lat, lng], { icon: icon_marker, ...props })marker.addTo(this.mapInstance).on("click", (e) => {EventBus.$emit('triggerMarkerClick', e)});return marker} else {return null}},6. 清除图层
使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：
/*** 删除图层* @param layerName*/removeLayer(layerName) {const layer = this.layers[layerName]if (layer) this.mapInstance.removeLayer(layer)},7. 清除标记
使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：
/*** 删除marker* @param marker*/removeMarker(marker) {if (marker) {marker.remove()}},/*** 删除markers markerlist或者markerGroupName* @param markers*/removeMarkers(markers) {if (typeof markers === 'string') {if (this.markers[markers]) {this.markers[markers].forEach((marker) => {this.removeMarker(marker)})}} else {markers.forEach((marker) => {this.removeMarker(marker)})}},三、Leaflet示例展示
通过以上步骤，您就可以创建一个简单的Leaflet地图应用程序，并在地图上展示一个标记。您可以根据需要进一步扩展和定制地图功能，如添加更多的向量图层、实现用户交互等。