Leaflet中通过setStyle实现图形样式编辑-白红宇

Leaflet中通过setStyle实现图形样式编辑

阅读量：805 次

发布时间：2023-01-30

本文共 1239 字，大约阅读时间需要 4 分钟。

Leaflet快速入门与加载OSM显示地图

Leaflet 是一个强大的开源地图绘制库，能够轻松加载开源地图(OSM)并进行丰富的地图操作。以下将介绍如何快速上手Leaflet并展示地图。

场景

在页面中加载并显示地图后，系统会呈现对应的地图样式。Leaflet封装了setStyle接口，用户可以灵活修改地图上的各个元素样式。

实现

页面上添加地图和按钮

首先需要在HTML页面中添加Leaflet地图组件和相关操作按钮。以下是实现代码示例：

初始化地图

使用Leaflet初始化地图，并设置默认显示范围：

// 初始化地图var map = L.map('map').setView([0, 0], 2);// 添加地图底图L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution: '© OpenStreetMap contributors'}).addTo(map);

添加地图层

通过addLayer按钮，可以添加各种地图层，如地形图、交通图等。以下是示例：

document.getElementById('addLayer').addEventListener('click', function() {    L.geoJSON({        type: 'FeatureCollection',        features: [            {                type: 'Feature',                properties: {},                geometry: {                    type: 'Polygon',                    coordinates: [                        [51.505, -0.09],                        [51.505, -0.09],                        [51.505, -0.09]                    ]                }            }        ]    }).addTo(map);});

移除地图层

通过removeLayer按钮，可以移除已添加的地图层：

document.getElementById('removeLayer').addEventListener('click', function() {    map.removeLayer(currentLayer);});

通过以上步骤，可以轻松加载并展示地图，并通过按钮进行地图层的增删操作。Leaflet 提供了丰富的API和插件，能够满足多种地图展示需求。

转载地址：http://qigyk.baihongyu.com/

你可能感兴趣的文章

npm发布自己的组件UI包（详细步骤，图文并茂）