Signed-off-by: zhaobao <528046418@qq.com>

src/components/Layouts/Map.vue

@@ -1,7 +1,10 @@
 <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(()=>{
@@ -10,9 +13,8 @@
         },
         methods:{
             init(){
-                let w = 2420,
-                      h = 1868,
-                      url='http://dev.abaoya.cn/layout_cont.png';
+                // let w = 2420,
+                //       h = 1868;
                 const map = L.map('map', {
                     minZoom: 1,
                     maxZoom: 3,
@@ -20,11 +22,19 @@
                     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);
+                // 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(url, bounds).addTo(map);
+                    L.imageOverlay(mapUrl, bounds).addTo(map);
                     map.setMaxBounds(bounds);
                 /**添加标记点 */
                 const docWidth = document.documentElement.clientWidth;
@@ -33,7 +43,7 @@
                 let options={id:1};
                 let icon="project-12";
                 let tip="盲板抽堵作业";
-                let iconSize = [40*docWidth/1920, 50*docWidth/1920];
+                let iconSize = [27*docWidth/1920, 33*docWidth/1920];
                 function drawMark(option={tip,icon,options,coordinates}){
                     console.log({option})
                     let myIcon = L.divIcon({
@@ -45,16 +55,35 @@
                         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)
+                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('接口异常')
+                    }
+                    
+                })
             }
         }
     }