JDHDB/src/components/Layouts/Map.vue

<script>
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'
    import axios from'axios'


    import mapUrl from '@/assets/images/layout_cont.png'
    export default{
        mounted(){
            this.$nextTick(()=>{
                this.init()
            })
        },
        methods:{
            init(){
                // let w = 2420,
                //       h = 1868;
                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){
                axios.request({
                    url:'http://192.168.3.5:8080/JobActivitys/vedit/list',
                    headers:{
                        Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJvY0lkXCI6NDA2MjgzLFwib2NUeXBlSWRcIjoyLFwidXNlcklkXCI6NDA2MjgzLFwidXNlck5hbWVcIjpcImFkbWluMDAzXCIsXCJ1c2VyUmVhbE5hbWVcIjpcIueuoeeQhuWRmDNcIn0iLCJpYXQiOjE2ODA1OTY4MTksImV4cCI6MTY4MDYzMjgxOX0.dht0awVtwmjzzwpN-kbLo-jf1hXEb5w-3fYcJ4Tgp64'
                    }
                }).then((res)=>{
                    if(res.data.code===0){
                        callback(res.data.data)
                    }else{
                        alert('接口异常')
                    }
                    
                })
            }
        }
    }
</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>