Vue3 + leaflet设置地图的主题颜色,添加背景图,折线样式

Vue3 + leaflet设置地图的主题颜色,添加背景图,折线样式

leaflet相关的详细说明文档且免费的不好找。分享给大家，希望能帮助到您，一起进步。

1.1 leaflet插件官网

https://leafletjs.cn/plugins.html

1.2 主要使用colorFilter插件 实现

可以模块化开发，也可以直接引用对应的js文件，下面是模块引入

#npm安装
npm install --save leaflet.tilelayer.colorfilter
#yarn安装
yarn add leaflet.tilelayer.colorfilter

1.3 核心代码

//滤镜  
let myFilter = ['grayscale:100%', 'invert:100%']
//地图加载
let myTileLayer = L.tileLayer
      .colorFilter('http://xxxx/{z}/{x}/{y}.png', {
        attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
        filter: myFilter,
      })
      .addTo(map)
//添加其他滤镜选项
//反色（invert）灰色（grayscale）亮度（brightness）对比度（contrast）色相旋转(hue)饱和度(saturate)深褐色(sepia)
myTileLayer.updateFilter(['brightness:110%', 'hue:90deg', 'saturate:120%'])

1.3 leaflet-tilelayer-colorizr插件

作用：渲染地图要素，改变地图样式 。

先将默认地图截图，图片放在下面链接里，进行调色,然后再设置各项配置

https://codepen.io/stoumann/pen/MWeNmyb

1.4 添加背景图

// 背景图
//[[-90, -180], [90, 180]]定义了图片覆盖的经纬度范围，分别代表了全球的南北极和西东经度
L.imageOverlay('background.jpg', [[-90, -180], [90, 180]]).addTo(map);

2.禁止地图缩放

//禁止鼠标滚轮缩放
map.scrollWheelZoom.disable();
//禁止双击缩放
map.doubleClickZoom.disable()
// 移除默认的缩放控件
map.zoomControl.remove()

3.折线样式

//注意区别；polyline是折线，poligon是折线区域
let polyline = L.polyline([
    [35.68, 139.69],
    [34.04, 118.25],
    [41.87, -87.62],
    // ... 添加更多点来构成折线
], {
    color: 'red', // 折线颜色
    weight: 3,    // 折线宽度
    opacity: 0.5, // 折线透明度
    smoothFactor: 1 // 平滑度，0 表示最不平滑，1 表示最平滑
}).addTo(map); // 将折线添加到地图上

4.去掉地图右下角logo

// 创建地图实例，不显示attribution控件（即logo）
let map = L.map('mapid', {
    attributionControl: false
}).setView([中心点经纬度],11);