1万ドルVueリーフレットマーカー?はい

こんにちは!

100万マーカー

読む前に

私は、私自身のVueコンポーネントを初期化するために、2つのスクリプトを使いました.
ありがとう

https://github.com/eJuke/Leaflet.Canvas-Markers

https://github.com/voluntadpear/vue-choropleth

依存

vue2-leaflet

leaflet

インストール

npm package npm i @simerca/vue2-leaflet-canvas-marker

用途

<template>
    <LMap>
        <LTileLayer :url="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
        <LCanvasMarker :markers="markers"/>
    </LMap>
</template>

import L from leaflet;
import {LMap, LTileLayer} from 'vue2-leaflet';
import {LCanvasMarker} from 'vue2-leaflet-canvas-marker';
export default {
    computed:{
        markers(){
            let markers = []
            for(var i = 0; i < 1000; i++){
                let lat = Math.random()*360 - 180
                let lng = Math.random()*360 - 180
                var icon = L.icon({
                    iconUrl: 'img/marker-icon.png',
                    iconSize: [20, 18],
                    iconAnchor: [10, 9]
                });
                markers.push(L.marker([lat, lng], {icon:icon}).bindPopup(`Hello ${i}`))
            }
            return markers
        }
    }
    components:{
        LMap,
        LTileLayer,
        LCanvasMarker
    },
}

あなたの歓迎！

Githubの星私!
https://github.com/Simerca/vue2-leaflet-canvas-marker