[Vue2Leaflet系列二] Leaflet Plugins with Vue

本篇文章请参考
[Vue2Leaflet系列一] 从vue-cli安装到建置地图


之前介绍过Leaflet Plugins的许多扩充功能,
那麽用vue开发的Leaflet图台能不能用这些功能呢?
别担心!Vue2Leaflet也有Plugins可以用呦!(虽然功能没有原本的多)
今天就来简单介绍几个有趣的功能吧!(以之前没介绍过的为主)

vue2-leaflet-geosearch

今天要使用的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设定

  • showMarker: 是否显示标记点,预设为true
  • showPopup: 是否显示资讯视窗,预设为false
  • marker: 可以设定L.Icon的参数,预设为{ icon: new L.Icon.Default(), draggable: false }
  • popupFormat: 显示资讯视窗的回调函式,可以更改资讯视窗样式
  • maxMarkers: 标记点最大显示数量,预设为1,会留下最後查询的标记点
  • retainZoomLevel: 是否依查询结果缩放地图,若为false(预设),会平移+缩放;若为true,只会平移。
  • animateZoom: 平移及缩放是否以动画呈现,预设为true
  • autoClose: 是否自动关闭查询结果清单,预设为false
  • keepResult: 搜寻列是否保存查询结果,预设为false

↓ 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">

↓ 输入框
https://ithelp.ithome.com.tw/upload/images/20201011/201306047vzzOLWsWg.jpg

↓ 操作画面
图片

geosearch目前提供行政区查询及路名查询,尚不能做详细地址的查询,加减使用。

vue2-leaflet-polyline-measure

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
https://ithelp.ithome.com.tw/upload/images/20201011/20130604tHPf5ZvHVY.jpg

↓ 操作画面
图片

↓ 测量结束後的console
https://ithelp.ithome.com.tw/upload/images/20201011/20130604pq7dGz4Q7d.jpg

vue-leaflet-minimap

不知道大家有没有玩过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,
                }
            };
        },
    };

小地图的常用设定

  • position: 小地图的位置,Ex: 'topright'、'topleft',预设为'bottomright'
  • width: 宽度(px),预设为150px
  • height: 高度(px),预设为150px
  • toggleDisplay: 是否有收拢小地图的按纽,预设为false

详见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">

↓ 结果,右上角会多出一个小地图,显示现在观看位置
https://ithelp.ithome.com.tw/upload/images/20201011/20130604fk72TpinTh.jpg

↓ 操作画面,移动地图时,小地图也会跟着移动
图片

↓ 操作画面,拉动小地图内的方框时,大地图也会移动至该区域
图片


今天简单介绍了vue2-leaflet-geosearch、
vue2-leaflet-polyline-measure、vue-leaflet-minimap,
其实知道怎麽用vue component以後,其他的扩充功能都大同小异!
熟能生巧罗!/images/emoticon/emoticon69.gif


<<:  第二十七日-MYSQL的「如果」:IF、CASE基本用法

>>:  [D26] : 把GA转成Report送到Slack

Day01【JS】Behavior Delegation 行为委派

定义 访问一个物件上的属性时, 如果物件没有该属性, 就会执行委派, 让引擎顺着原型链向上查找, 并...

Day8:今天来谈一下Parrot Security上的Metasploit工具

Metasploit专案是一个旨在提供安全漏洞资讯电脑安全专案,可以协助安全工程师 进行渗透测试(p...

[第八天]从0开始的UnityAR手机游戏开发-如何将模型设置在图卡上和脚本解说

将模型设置在图卡上 先将ImageTarget下的子物件删除 在Project找到从商店下载的模型...

大共享时代系列_024_可协同 UI 设计的软件

客户:我的需求不多,就一点点... 设计师:(已预知接下来无穷尽的...浩瀚宇宙) 多人可同时协同设...

Day13: 【TypeScript 学起来】只有 TS 才有的型别: Enum (列举)

是说TS针对型别的类型也太讲究,写好多天还没写完(其实是我30篇不够XDD),哈哈不罗嗦, 今天继...