JDHDB/src/components/Layouts/Map.vue

<script>
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'
    
    export default{
        mounted(){
            this.$nextTick(()=>{
                this.init()
            })
        },
        methods:{
            init(){
                let w = 2420,
                      h = 1868,
                      url='http://dev.abaoya.cn/layout_cont.png';
                const map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 3,
                    center: [0, 0],
                    zoom: 1,
                    crs: L.CRS.Simple
                });
                const southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                const northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                const bounds = new L.LatLngBounds(southWest, northEast);
                /**添加图层 */
                    L.imageOverlay(url, bounds).addTo(map);
                    map.setMaxBounds(bounds);
                /**添加标记点 */
                const docWidth = document.documentElement.clientWidth;
                const markers=L.layerGroup()
                let coordinates=[-100, 100];
                let options={id:1};
                let icon="project-12";
                let tip="盲板抽堵作业";
                let iconSize = [40*docWidth/1920, 50*docWidth/1920];
                function drawMark(option={tip,icon,options,coordinates}){
                    console.log({option})
                    let myIcon = L.divIcon({
                        className: option.icon,
                        iconSize: iconSize,
                    });
                    let  marker = L.marker(option.coordinates, {...option.options, icon : myIcon}).bindPopup(option.tip).addTo(markers);
                    marker.on('click', function(ev) {
                        let id=ev.target.options?.id
                        console.log({ev,id})
                    })                    
                }
                for(let i=1;i<13;i++){
                    drawMark({
                        tip:`第${i}个坐标点,<br />位置：${-20*i},${i*20+50}`,
                        icon:`project-${i}`,
                        coordinates:[-33*i,i*48],
                        options:{id:i}
                    })
                }
                markers.addTo(map)
            }
        }
    }
</script>
 
<template>
    <div id="map"></div>
</template>
 
<style lang="scss" scoped>
    #map  { 
        height: 100%;
        width: 100%;
        background-color: inherit;
        ::v-deep .leaflet-control{
            display: none;
            // &.leaflet-control-attribution {
            //     display: none;
            // }
        }
    }
</style>