update 看板接口对接增加路由依赖

2023-12-06 16:19:47 +08:00
parent 458009709e
commit 80baa0c7c6
14 changed files with 9540 additions and 28525 deletions
@@ -0,0 +1,99 @@
+import china from '/@/assets/lngLat/china.ts';
+import chinaInner from '/@/assets/lngLat/chinaInner.ts';
+import { typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
+
+export const defaultOption = {
+    center: [106.3, 37.87], //地图中心点
+    zoom: 4.3, //地图显示的缩放级别
+    mapStyle: 'darkblue', //地图样式
+};
+export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON'];
+export const Map = {
+    map: null,
+    overlayGroup: null,
+    initMap({ el, option }) {
+        const { zoom, center, mapStyle } = { ...defaultOption, ...option };
+        //基本地图加载
+        this.map = new AMap.Map(el, {
+            resizeEnable: true,
+            center: center,
+            zoom: zoom,
+            mapStyle: 'amap://styles/' + mapStyle,
+        });
+        // 异步同时加载多个插件
+        new AMap.plugin(mapPlugin, () => {
+            this.drawInnerLine();
+            this.drawOutLine();
+        });
+    },
+    // 中国外层边界线
+    drawOutLine() {
+        let geojson = new AMap.GeoJSON({
+            geoJSON: china,
+            getPolygon: function (geojson, lnglats) {
+                return new AMap.Polyline({
+                    path: lnglats[0],
+                    strokeColor: '#6ccffe',
+                    strokeWeight: 3,
+                    lineJoin: 'round', //折线拐点的绘制样式
+                    isOutline: true,
+                    borderWeight: 2,
+                    outlineColor: '#2d475f',
+                });
+            },
+        });
+        this.map.add(geojson);
+    },
+    // 中国内层边界线
+    drawInnerLine() {
+        let geojson = new AMap.GeoJSON({
+            geoJSON: chinaInner,
+            getPolygon: function (geojson, lnglats) {
+                return new AMap.Polyline({
+                    path: lnglats[0],
+                    strokeColor: '#359de5',
+                    strokeWeight: 1,
+                });
+            },
+        });
+        this.map.add(geojson);
+    },
+    // 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
+    createOverlay(result) {
+        if (this.overlayGroup) {
+            this.map.remove(this.overlayGroup);
+            this.overlayGroup = null;
+        }
+        this.overlayGroup = new AMap.OverlayGroup();
+        for (let i = 0; i < result.length; i++) {
+            let { type, lon, lat } = result[i];
+            // 创建一个 Icon
+            let startIcon = typeToIcon(type);
+            // 将 icon 传入 marker
+            let startMarker = new AMap.Marker({
+                // 点的坐标
+                position: [lon, lat],
+                // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
+                icon: startIcon,
+                //启用点击事件 如果需要点击事件，必须开启
+                clickable: true,
+                //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
+                extData: result[i],
+            });
+            // 可以调用setExtData（）设置自定义属性
+            //startMarker.setExtData('222')
+
+            //将组 挂载到地图上
+            this.overlayGroup.setMap(this.map);
+            //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
+            this.overlayGroup.addOverlay(startMarker);
+        }
+
+        this.overlayGroup.on('click', function (e) {
+            //e.target触发事件的点对象
+            console.log(e.target);
+            //拿到点中携带的数据
+            console.log(e.target.getExtData());
+        });
+    },
+};