diff --git a/src/api/largeScreen/mapOpt.ts b/src/api/largeScreen/mapOpt.ts new file mode 100644 index 0000000..43e8b5e --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/assets/images/mapPoint.png b/src/assets/images/mapPoint.png new file mode 100644 index 0000000..57e432e Binary files /dev/null and b/src/assets/images/mapPoint.png differ diff --git a/src/assets/images/mapWarn.png b/src/assets/images/mapWarn.png new file mode 100644 index 0000000..805d43c Binary files /dev/null and b/src/assets/images/mapWarn.png differ diff --git a/src/views/fys-equipment/fenceAccessRecord/index.vue b/src/views/fys-equipment/fenceAccessRecord/index.vue index 2ab505b..56c89a4 100644 --- a/src/views/fys-equipment/fenceAccessRecord/index.vue +++ b/src/views/fys-equipment/fenceAccessRecord/index.vue @@ -83,13 +83,14 @@ - + +