[前端] 地圖: Leaflet

日期：
Leaflet
https://github.com/Leaflet/Leaflet

Leaflet web
https://leafletjs.com/

Leaflet 互動式 JavaScript 地圖繪製工具，適用手機、平板與電腦
https://blog.gtwang.org/web-development/leaflet-open-source-javascript-library-for-mobile-friendly-interactive-maps/

Vue-CLI and Leaflet: 線繪製
https://juejin.im/post/5d272c596fb9a07ef161adfc

Leaflet是一套對行動裝置友善的互動地圖並且開源的JavaScript函式庫，它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫，其所呈現的效果與 Google 地圖非常相似，主要的特色是使用簡單、速度快，並且跨平台，許多知名網站（如 GitHub 與 Flickr 等）都是使用 Leaflet 來呈現地圖。

以下為vue化套件

Vue2Leaflet
https://github.com/KoRiGaN/Vue2Leaflet


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Leaflet Vue Demo</title>

    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
        }
    </style>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <!--使用leaflet-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
    <script src="https://unpkg.com/vue2-leaflet@0.0.60/dist/vue2-leaflet.js"></script>

</head>
<body>

    <v-map id="app"
           :zoom="zoom"
           :center="center">
        <v-tilelayer :url="url"></v-tilelayer>
        <v-marker v-for="marker in markers"
                  :key="marker.id"
                  :visible="marker.visible"
                  :draggable="marker.draggable"
                  :lat-lng="marker.position"
                  :icon="cusicon">
            <v-popup :content="marker.tooltip"></v-popup>
        </v-marker>
        <v-polygon v-for="shape in shapes"
                   :key="shape.id"
                   :lat-lngs="shape.geometry.coordinates"></v-polygon>
    </v-map>

    <script type="text/javascript">

        //使用Vue.component加載VueECharts
        Vue.component('v-map', Vue2Leaflet.Map);
        Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
        Vue.component('v-popup', Vue2Leaflet.Popup);
        Vue.component('v-marker', Vue2Leaflet.Marker);
        Vue.component('v-tooltip', Vue2Leaflet.Tooltip);
        Vue.component('v-polygon', Vue2Leaflet.Polygon)

        new Vue({
            el: '#app',
            data: {
                zoom: 14,
                center: [51.505, -0.08],
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                markers: [
                    {
                        id: "m1",
                        position: {
                            lat: 51.505,
                            lng: -0.07
                        },
                        tooltip: "tooltip for marker1",
                        draggable: true,
                        visible: true
                    },
                    {
                        id: "m2",
                        position: {
                            lat: 51.505,
                            lng: -0.09
                        },
                        tooltip: "tooltip for marker2",
                        draggable: true,
                        visible: true
                    }
                ],
                cusicon: L.icon({
                    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
                    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
                    iconSize: [38, 95],
                    shadowSize: [50, 64],
                    iconAnchor: [22, 94],
                    shadowAnchor: [4, 62],
                    popupAnchor: [- 3, -76]
                }),
                shapes: [{
                    id: 'my_id',
                    geometry: {
                        coordinates: [[[[51.49, -0.07], [51.50, -0.09], [51.51, -0.07]]]]
                    }
                }],
            },
        });

    </script>

</body>
</html>


載入後畫面為︰


#Javascript, Leaflet, vue, map, 地圖

留言

張貼留言