本篇文章请参考
[Vue2Leaflet系列一] 从vue-cli安装到建置地图
之前介绍过Leaflet Plugins的许多扩充功能,
那麽用vue开发的Leaflet图台能不能用这些功能呢?
别担心!Vue2Leaflet也有Plugins可以用呦!(虽然功能没有原本的多)
今天就来简单介绍几个有趣的功能吧!(以之前没介绍过的为主)
今天要使用的vue2-leaflet-geosearch,提供地理空间资讯查询。
↓ 先cd至专案资料夹,用npm安装vue2-leaflet-geosearch及leaflet-geosearch
npm install --save vue2-leaflet-geosearch leaflet-geosearch
↓ 昨天的Leaflet.vue中,除了vue2-leaflet外,额外要引入leaflet-geosearch及vue2-leaflet-geosearch
import {
LMap,
LTileLayer,
LMarker,
LPopup
} from "vue2-leaflet";
import { OpenStreetMapProvider } from 'leaflet-geosearch';
import VGeosearch from 'vue2-leaflet-geosearch';
↓ 预设输出,这边data加入geosearchOptions做为v-geosearch标签v-bind的参数
export default {
name: "Leaflet",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
VGeosearch
},
data() {
return {
zoom: 7,
center: L.latLng(23.5, 121),
url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
attribution: "",
marker: L.latLng(23.5, 121),
text: "你好!vue2-leaflet!",
geosearchOptions: {
provider: new OpenStreetMapProvider(),
},
};
},
};
geosearchOptions设定
↓ template,加入v-geosearch,options绑定data中的geosearchOptions
<div class="vue-leaflet">
<l-map class="map" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker">
<l-popup :content="text"></l-popup>
</l-marker>
<v-geosearch :options="geosearchOptions"></v-geosearch>
</l-map>
</div>
↓ index.html引入geosearch的css
<link rel="stylesheet" href="https://unpkg.com/[email protected]/assets/css/leaflet.css">
↓ 输入框
↓ 操作画面
geosearch目前提供行政区查询及路名查询,尚不能做详细地址的查询,加减使用。
leaflet-polyline-measure,是一个线段的测量工具,可以测量起点到终点间每个段落的距离。
↓ 用npm安装vue2-leaflet-polyline-measure
npm install --save vue2-leaflet-polyline-measure
↓ 引入'vue2-leaflet-polyline-measure'
import LControlPolylineMeasure from 'vue2-leaflet-polyline-measure';
↓ 预设输出,data中加入一些事件
export default {
name: "Leaflet",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
VGeosearch,
LControlPolylineMeasure
},
data() {
return {
zoom: 7,
center: L.latLng(23.5, 121),
url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
attribution: "",
marker: L.latLng(23.5, 121),
text: "你好!vue2-leaflet!",
geosearchOptions: {
provider: new OpenStreetMapProvider(),
},
handleToggle: debugevent,
handleStart: debugevent,
handleResume: debugevent,
handleFinish: debugevent,
handleClear: debugevent,
handleAdd: debugevent,
handleInsert: debugevent,
handleMove: debugevent,
handleRemove: debugevent
};
},
};
↓ 事件的function
function debugevent(e) {
console.log(arguments)
}
↓ template,在l-map中用v-on绑定事件,并且加入l-control-polyline-measure标签。
<l-map class="map" :zoom="zoom" :center="center" @polylinemeasure:toggle="handleToggle" @polylinemeasure:start="handleStart" @polylinemeasure:resume="handleResume" @polylinemeasure:finish="handleFinish" @polylinemeasure:clear="handleClear" @polylinemeasure:add="handleAdd" @polylinemeasure:insert="handleInsert" @polylinemeasure:move="handleMove" @polylinemeasure:remove="handleRemove">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker">
<l-popup :content="text"></l-popup>
</l-marker>
<v-geosearch :options="geosearchOptions"></v-geosearch>
<l-control-polyline-measure :options="{ showUnitControl: true }" position="bottomright" />
</l-map>
↓ UI
↓ 操作画面
↓ 测量结束後的console
不知道大家有没有玩过RPG游戏?
当人物移动时,右上角会有个小地图告诉你现在人在什麽位置,观看小地图来决定要行进的方向。
如今,Leaflet也有小地图的功能啦!
↓ 用npm安装leaflet-minimap及vue-leaflet-minimap
npm install leaflet-minimap vue-leaflet-minimap
↓ 引入'vue-leaflet-minimap'
import VueLeafletMinimap from 'vue-leaflet-minimap'
↓ 预设输出,输出VueLeafletMinimap元件,并在data中加入layer及options,做为小地图的图层及设定
export default {
name: "Leaflet",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
VGeosearch,
LControlPolylineMeasure,
VueLeafletMinimap
},
data() {
return {
zoom: 7,
center: L.latLng(23.5, 121),
url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
attribution: "",
marker: L.latLng(23.5, 121),
text: "你好!vue2-leaflet!",
geosearchOptions: {
provider: new OpenStreetMapProvider(),
},
handleToggle: debugevent,
handleStart: debugevent,
handleResume: debugevent,
handleFinish: debugevent,
handleClear: debugevent,
handleAdd: debugevent,
handleInsert: debugevent,
handleMove: debugevent,
handleRemove: debugevent,
layer: new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
options: {
position: 'topright',
width: 200,
height: 175,
}
};
},
};
小地图的常用设定
详见github
↓ template,在l-map中加入vue-leaflet-minimap,并设定图层以及options
<l-map class="map" :zoom="zoom" :center="center" >
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<vue-leaflet-minimap :layer="layer" :options="options"></vue-leaflet-minimap>
</l-map>
↓ index.html引入MiniMap的css
<link rel="stylesheet" href="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.css">
↓ 结果,右上角会多出一个小地图,显示现在观看位置
↓ 操作画面,移动地图时,小地图也会跟着移动
↓ 操作画面,拉动小地图内的方框时,大地图也会移动至该区域
今天简单介绍了vue2-leaflet-geosearch、
vue2-leaflet-polyline-measure、vue-leaflet-minimap,
其实知道怎麽用vue component以後,其他的扩充功能都大同小异!
熟能生巧罗!
<<: 第二十七日-MYSQL的「如果」:IF、CASE基本用法
>>: [D26] : 把GA转成Report送到Slack
定义 访问一个物件上的属性时, 如果物件没有该属性, 就会执行委派, 让引擎顺着原型链向上查找, 并...
Metasploit专案是一个旨在提供安全漏洞资讯电脑安全专案,可以协助安全工程师 进行渗透测试(p...
将模型设置在图卡上 先将ImageTarget下的子物件删除 在Project找到从商店下载的模型...
客户:我的需求不多,就一点点... 设计师:(已预知接下来无穷尽的...浩瀚宇宙) 多人可同时协同设...
是说TS针对型别的类型也太讲究,写好多天还没写完(其实是我30篇不够XDD),哈哈不罗嗦, 今天继...