JDHDB/src/components/Layouts/Map.vue

<script>
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'
    import request from'@/utils/request'
    import mapUrl from '@/assets/images/layout_cont.png'
    import mixins  from '@/mixins/mqtt.js'
    export default{
        mixins:[mixins],
        created(){
            this.init()
        },
        methods:{
            init(){
                this.$nextTick(()=>{
                    this.initMap()
                    // this.initMqtt({
                    //     mqttResponse:this.mqttResponse
                    // })
                })         
            },
            initMap(){
                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);
                var yx = L.latLng
                var xy = function xy(x, y) {
                    if (L.Util.isArray(x)) {
                    return yx(x[1], x[0])
                    }
                    return yx(y, x)
                }
                var bounds = [xy(-200, -200), xy(300, 185)]
                /**添加图层 */
                    L.imageOverlay(mapUrl, 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 = [27*docWidth/1920, 33*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})
                    })                    
                }      
                markers.addTo(map)
                this.getLayers((res)=>{
                    if(res&&res.length>0){
                        for(let i=0;i<res.length;i++){
                            drawMark({
                                tip:`${res[i].jobactivityTitle}`,
                                icon:`project-${res[i].typeId}`,
                                coordinates:[res[i].jobactQywzwd,res[i].jobactQywzjd],
                                options:{id:14}
                            }) 
                        }
                    }
                })
            },
            getLayers(callback){
                request({
                    url:'JobActivitys/vedit/list'
                }).then((res)=>{
                    callback(res.data)
                })
            },
            mqttResponse(message){
                console.log({message})
            }
        }
    }
</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>