leaflet地图 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue3+leaflet地图 へ行く。
• +Vue3+leaflet地图 の差分を削除

#author("2025-03-06T13:42:33+08:00","default:Admin","Admin")
#author("2025-03-06T13:44:21+08:00","default:Admin","Admin")
[[Vue3]]

&color(red){※前提条件：本文基于 Vue 3.0 创作};
#contents

* 安装 Leaflet 和 Vue-Leaflet [#zd35bb4d]

#codeprettify{{
yarn add leaflet
yarn add vue2-leaflet  # 如果你使用的是 Vue 2
# 或者
yarn add @vue/compat @vue/cli-plugin-babel # 如果需要兼容 Vue 3
yarn add @vue-leaflet/vue-leaflet # 如果你的 Vue 版本是 Vue 3
}}

* 安装依赖 [#sffe209e]
 yarn install

* 检查导入和配置 [#a8757416]

VUE2
#codeprettify{{
// 对于 Vue 2 和 Vue-Leaflet (vue2-leaflet)
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
import 'leaflet/dist/leaflet.css'
 
export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  }
}
}}

VUE3

#codeprettify{{
// 对于 Vue 3 和 @vue-leaflet/vue-leaflet
import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
import 'leaflet/dist/leaflet.css'
 
export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  }
}
}}

* 修改地图样式 [#l884ff6a]

正常是需要付费或者使用瓦片图片的功能，可以通过下面的方式简单的修改颜色
#codeprettify{{
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: saturate(10%) hue-rotate(100deg) contrast(100%) grayscale(100%);
  -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important; 
}
}}

关于 filter 的介绍

 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

其他的技术文档

 https://leafletjs.com/reference.html

#hr();
コメント：
#comment_kcaptcha