leaflet地图
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[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 # 如果需要兼容...
yarn add @vue-leaflet/vue-leaflet # 如果你的 Vue 版本是 V...
}}
* 安装依赖 [#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/v...
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%)...
-webkit-filter: invert(50%) grayscale(0) saturate(0.5) ...
-ms-filter: invert(1) grayscale(0) saturate(0.5) bright...
-moz-filter: invert(1) grayscale(0) saturate(0.5) brigh...
filter: invert(1) grayscale(0) saturate(0.5) brightness...
}
}}
关于 filter 的介绍
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
其他的技术文档
https://leafletjs.com/reference.html
#hr();
コメント：
#comment_kcaptcha
終了行:
[[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 # 如果需要兼容...
yarn add @vue-leaflet/vue-leaflet # 如果你的 Vue 版本是 V...
}}
* 安装依赖 [#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/v...
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%)...
-webkit-filter: invert(50%) grayscale(0) saturate(0.5) ...
-ms-filter: invert(1) grayscale(0) saturate(0.5) bright...
-moz-filter: invert(1) grayscale(0) saturate(0.5) brigh...
filter: invert(1) grayscale(0) saturate(0.5) brightness...
}
}}
关于 filter 的介绍
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
其他的技术文档
https://leafletjs.com/reference.html
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
