利用Leaflet.js创建交互式地图：绘制多个多边形和点位

news2024/12/23 17:39:47

引言

在地理信息系统（GIS）和地图可视化领域，Leaflet.js是一个轻量级但功能强大的JavaScript库，它提供了丰富的API来创建交互式地图。本文将通过一个实际的Vue组件示例，展示如何使用Leaflet.js在地图上绘制多边形和点位，并且实现多边形上文字的动态缩放效果。

功能概述

1.地图初始化

首先，我们需要在Vue组件中初始化地图，设置中心点、缩放级别，并添加地图瓦片。

2.多边形绘制

通过给定的坐标点数据，我们使用Leaflet.js的L.polygon方法在地图上绘制多边形区域。

3.点位图标添加

在地图上添加视频监控点位，使用自定义图标，并为每个点位添加点击事件。

4.响应式文字显示

根据地图的缩放级别，动态调整多边形上文字的显示和隐藏，提升用户体验。

实现步骤

这里提供的代码块仅展示了部分关键功能，以帮助读者理解整个实现过程，完整的代码和项目资源可以在个人中心-资源库获取

1. 地图初始化

在Vue组件的mounted生命周期钩子中初始化地图，并添加地图瓦片

initMap() {
    this.map = L.map("mapRef", {
        center: [21.582007, 111.824558],
        zoom: 15,
        zoomControl: false,
        doubleClickZoom: false,
        attributionControl: false,
    });
    this.name = L.tileLayer(
        "http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors',
        }
    ).addTo(this.map);
}

2. 绘制多边形

使用setBethAlreadyArea方法，将多边形数据转换为Leaflet.js所需的格式，并在地图上绘制。

setBethAlreadyArea(arr) {
    arr.map((item) => {
        let options = item.berthCoordinate.split(";").map((p) => p.split(",").map(Number));
        let marker = L.polygon(options, {
            color: item.lineColor,
            weight: item.lineFineness,
            fillColor: item.berthColour,
            fillOpacity: 0.5,
        }).addTo(this.map);
        // ...省略文字添加和事件绑定代码
    });
}

3. 添加点位图标

使用setVideoIcon方法，为每个视频监控点位添加图标，并绑定点击事件。

setVideoIcon(arr) {
    let videoIcon = L.icon({
        iconUrl: require("@/assets/images/berth/videoIcon.png"),
        iconSize: [25, 25],
        iconAnchor: [0, 0],
        popupAnchor: [-3, -76],
    });
    arr.map((item) => {
        let video = L.marker(item.position, { icon: videoIcon })
            .addTo(this.map)
            .on("click", (e) => this.videoSurveillance(item));
    });
}

4. 响应式文字显示

根据地图的缩放级别，动态调整多边形上文字的显示。

handleZoomChange(e) {
    const zoomLevel = e.target._zoom;
    const minZoomToShowText = 15;
    this.map.eachLayer((layer) => {
        if (layer instanceof L.Marker && layer.options.icon.options.className === "my-div-icon") {
            layer.setOpacity(zoomLevel < minZoomToShowText ? 0 : 1);
        }
    });
}

5. 自动调整地图大小

使用MutationObserver监听DOM变化，自动调整地图大小以适应不同屏幕尺寸。

autoSize() {
    new MutationObserver(() => this.map.invalidateSize()).observe(this.$refs.mapRef, {
        attributes: true,
        attributeFilter: ["style"],
    });
}