完成大屏地图功能

src/api/largeScreen/mapOpt.ts

@@ -0,0 +1,184 @@
+import { fa } from "element-plus/es/locale/index.mjs";
+
+var map = null;
+
+
+function initMap(click) {
+    // let key = '90bc158992feb8ccd0145e168cab1307';
+    let init = function () {
+        map = new AMap.Map("map", {
+            viewMode: '2D', //默认使用 2D 模式
+            zoom: 11, //地图级别
+            center: [114.420739, 30.487514], //地图中心点
+            mapStyle: "amap://styles/8c3efc37298895fd78e6aa0e799e78ce"
+        });
+
+        map.on('click', function (evt) {
+            //   alert('您点击的位置:'+evt.lnglat.longitude+' , '+ evt.lnglat.latitude);
+            if (click) {
+                click(evt.lnglat);
+            }
+        });
+    }
+    return new Promise((resolve, reject) => {
+        if (map) {
+            resolve(200);
+            return;
+        }
+        if (window.AMap) {
+            init();
+            resolve(200);
+            return;
+        }
+        reject({ code: 500, msg: '高德地图未能初始化成功' });
+    });
+
+}
+
+//添加一个点
+function AddPoint(point, index, dragEnd, click, iconImg) {
+
+    return new Promise((resolve, reject) => {
+        try {
+            let center = point ? new AMap.LngLat(point.longitude, point.latitude) : map.getCenter();
+
+            let icon = new AMap.Icon({
+                size: new AMap.Size(45, 45), //图标尺寸
+                image: iconImg, //Icon 的图像
+
+                imageSize: new AMap.Size(45, 45), //根据所设置的大小拉伸或压缩图片
+            });
+            let marker = new AMap.Marker({
+                icon: icon,
+                position: center,
+                offset: new AMap.Pixel(-15, -24),
+                draggable: dragEnd ? true : false,
+                cursor: 'point',
+                title: point.isAlarming ? '正在报警:' + point.deviceName : point.deviceName,
+                text: index,
+                class: 'point',
+                extData: point
+            });
+            marker.setMap(map);
+
+            let lays = map.getAllOverlays('text');
+            for (let i = 0; i < lays.length; i++) {
+                const element = lays[i];
+                let cls = element.getOptions();
+                if (cls.class) {
+                    element.dom.classList.add(cls.class);
+                }
+            }
+
+
+            resolve(center);
+        } catch (ex) {
+            reject(ex)
+        }
+
+    });
+
+
+}
+
+function getCenter() {
+    var center = map.getCenter().toJSON();
+    return center;
+}
+
+function setCenter(lon, latitude) {
+    var position = new AMap.LngLat(lon, latitude); //传入经纬度    
+    map.setCenter(position); //简写 设置地图中心点
+
+}
+//画多边形
+function DrawPoy(points) {
+    if (!map) {
+        return;
+    }
+    if (!points) {
+        return;
+    }
+    let path = [];
+    let path1 = [];
+
+    setTimeout(() => {
+        points.coordinates.filter(v => {
+            path.push(new AMap.LngLat(v.longitude, v.latitude));
+            path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
+            return true;
+        });
+
+        let polygon = new AMap.Polygon({
+            path: path,
+            fillColor: '#F00C0C',
+            fillOpacity: 0.03,
+            strokeOpacity: 0.1,
+            strokeColor: '#F00C0C',
+
+            strokeWeight: 3,
+            strokeStyle: 'dashed',
+            // strokeDasharray: [50,50,50],
+            extData: points
+        });
+        map.add(polygon);
+    }, 0);
+
+}
+//画圆形
+function DrawCicle(points, raduis, dragEnd) {
+    if (!map) {
+        return;
+    }
+
+
+    let circle = new AMap.Circle({
+        center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
+        radius: raduis ? raduis : 1000, //半径
+        borderWeight: 3,
+        strokeColor: "#F00C0C",
+        strokeWeight: 1,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        strokeStyle: 'dashed',
+        strokeDasharray: [10, 10],
+        // 线样式还支持 'dashed'
+        fillColor: '#1791fc',
+        zIndex: 50,
+    })
+
+
+
+    map.add(circle);
+    // 缩放地图到合适的视野级别
+
+}
+
+//清除所有
+function clearOverLays() {
+    map && map.clearMap();
+}
+
+
+
+function removeOverLay(lay) {
+    map && map.remove(lay);
+}
+
+
+
+function setFitView() {
+    if (map) { map.setFitView(); }
+}
+export default {
+    gdMap: map,
+    initMap: initMap,
+    AddPoint: AddPoint,
+    getCenter: getCenter,
+    DrawPoy: DrawPoy,
+    DrawCicle: DrawCicle,
+    clearOverLays: clearOverLays,
+    removeOverLay: removeOverLay,
+
+    setFitView: setFitView
+}