地图 关闭在点击问题，坐标被覆盖问题

dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js

@@ -8,6 +8,7 @@ import {
     defaults
 } from "ol/control";
 import TileLayer from "ol/layer/Tile";
+import ImageLayer from 'ol/layer/Image';
 import XYZ from "ol/source/XYZ";
 import LayerGroup from "ol/layer/Group";
 
@@ -15,11 +16,10 @@ import { fromLonLat, toLonLat, transform, get} from "ol/proj";
 import Feature from "ol/Feature";
 import { Icon, Style, Text, Fill, Stroke } from "ol/style";
 import { Vector as VectorLayer } from "ol/layer";
-import { Vector as VectorSource } from 'ol/source';
+import { Vector as VectorSource,Raster as RasterSource, Stamen } from 'ol/source';
 import Point from "ol/geom/Point";
 import Overlay from 'ol/Overlay';
 import Select from 'ol/interaction/Select'
-
 import Draw from 'ol/interaction/Draw';
 import GeoJSON from 'ol/format/GeoJSON';
 import Snap from 'ol/interaction/Snap';
@@ -34,6 +34,54 @@ export default class Mutil {
         this.option = option;
         this.MAP = this.initMap()
     }
+    //openlayer 像素转换类，可以直接当做source使用
+    getrester(layerOrigin){
+        let a =[];
+        const raster = new RasterSource({
+            sources: [
+                //传入图层，这里是天地图矢量图或者天地图矢量注记
+                layerOrigin,
+            ],
+            //这里设置为image类型，与官方示例不同，优化速度
+            operationType: 'image',
+            operation: function (pixels, data) {
+                //执行颜色转换方法，注意，这里的方法需要使用lib引入进来才可以使用
+                    this.Mapcolor(pixels[0].data)
+                    a = pixels[0].data;
+                return pixels[0];
+            },
+            //线程数量
+            threads: 10,
+            //允许operation使用外部方法
+              lib: {
+                  Mapcolor: this.Mapcolor(a),
+              }
+        });
+        return raster;
+    }
+
+
+    Mapcolor (pixelsTemp) {
+        console.log(pixelsTemp)
+        return "aa";
+        //蓝色
+        for (var i = 0; i < pixelsTemp.length; i += 4) {
+            var r = pixelsTemp[i];
+            var g = pixelsTemp[i + 1];
+            var b = pixelsTemp[i + 2];
+            //运用图像学公式，设置灰度值
+            var grey = r * 0.3 + g * 0.59 + b * 0.11;
+            //将rgb的值替换为灰度值
+            pixelsTemp[i] = grey;
+            pixelsTemp[i + 1] = grey;
+            pixelsTemp[i + 2] = grey;
+
+            //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+            pixelsTemp[i] = 55 - pixelsTemp[i];
+            pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+            pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+        }
+    };
     //初始化地图
     initMap() {
         /*  天地图 */
@@ -52,11 +100,14 @@ export default class Mutil {
             className: "mapTypeC",
             source: new XYZ({
                 //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
-                url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
+                //url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
+                //url: " http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
             }),
             visible: false,
             name: "天地图标注(不含路网)",
         });
+
         let tianSlC = new TileLayer({
             className: "mapTypeC",
             source: new XYZ({
@@ -84,6 +135,10 @@ export default class Mutil {
         // 	label: "\u00AB",
         // 	collapsed: false,
         // });
+        // let layer = new ImageLayer({
+        //     name: "地图矢量图层",
+        //     source: this.getrester(tianSlB)
+        // });
         MAP = new Map({
             projection: "EPSG:4326",
             target: that.divId,
@@ -226,7 +281,11 @@ export default class Mutil {
         that.MAP.addOverlay(overlay);
         //点击X隐藏企业气泡
         document.getElementById(`pop-close${id}`).onclick = function () {
-            overlay.setPosition(undefined)
+            //overlay.setPosition(114.514793, 38.042225)
+            //console.log("=="+`${id}`)
+            var box =document.getElementById("popup"+`${id}`)
+            box.parentNode.removeChild(box);
+            //console.log(document.getElementById("popup"+`${id}`))
         }
     }
     mapSelectBind(callbcak) {//地图绑定选中feature事件
@@ -348,14 +407,15 @@ export default class Mutil {
         return geojsonObject;
     }
 
-    getBoundaries(name) {  //根据name传参
-        axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
+     async getBoundaries(name) {  //根据name传参
+         await axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
             let local = res.data.districts[0].center.split(",");
             let view = this.MAP.getView();
             view.setCenter(fromLonLat(local));
             view.setZoom(10);
             this.drawArea(res.data.districts[0])
         })
+        return "" ;
     }
 
     combineDrawAreas(json){
@@ -379,17 +439,29 @@ export default class Mutil {
             style: new Style({
                 stroke: new Stroke({
                     color: '#08d527',
-                    width: 4
+                    width: 4,
                 }),
+                font: '24px Calibri,sans-serif',
                 fill: new Fill({
-                    color: 'rgba(212, 220, 29, 0.1)'
+                    color: 'rgba(21, 220, 229, 0.1)'
+                    //color: 'rgba(21, 220, 229, 0.1)'
+                })
+            }),
+            text: new Text({ //文本样式
+                font: '12px Calibri,sans-serif',
+                fill: new Fill ({
+                    color: '#fff'
+                }),
+                stroke: new Stroke({
+                    color: '#fff',
+                    width: 3
                 })
             })
+
         });
         /*if (this.tempLayer != ' ') {
             this.MAP.removeLayer(this.tempLayer);
         }*/
-
         this.MAP.addLayer(vectorLayer);
         //this.tempLayer = vectorLayer;
     }

dcit-hcsystem-hcsystem-master/src/views/guarantee/dangerMap.vue

@@ -647,7 +647,7 @@
             that.getMaterialWindow(maid);
         }
         created() {
-            this.getMaterial();
+            //this.getMaterial();
         }
         cancel(){
             this.goods={};
@@ -655,7 +655,7 @@
             this.dialogVisible1 = false;
             this.dialogVisible2 = false;
         }
-        mounted() {
+        async mounted() {
 
             let that = this;
 
@@ -663,6 +663,7 @@
             that.mapLoadDone = true;
             that.Mutil = new Mutil("mapbox");
             that.MAP = that.Mutil.MAP;
+            await this.Mutil.getBoundaries("新乐")
             that.Mutil.mapSelectBind((evt: any) => {
                 //这是地图marker点击回调监听
                 /*if (evt.selected[0].get('type') === 'qiye') {
@@ -674,11 +675,13 @@
                     let id = evt.selected[0].get('did');
                     if (id) that.getMaterialinfo(id);
 
-
-
             })
+
             this.getStatiData();
-            this.Mutil.getBoundaries("新乐");
+            this.getMaterial();
+
+
+
         }
 
         mapma(){

dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue

@@ -329,7 +329,6 @@
         }
         getMaterialWindow(id: string) {
             let that = this;
-            console.log('----------------------'+id);
             (window as any).checkDetail = function (param: string) {
                 that.$router.push({
                     path: "/EnDetail",
@@ -755,7 +754,7 @@
                 }
             });
         }
-        mounted() {
+        async mounted() {
 
             let that = this;
 
@@ -763,6 +762,7 @@
             that.mapLoadDone = true;
             that.Mutil = new Mutil("mapbox");
             that.MAP = that.Mutil.MAP;
+            await this.Mutil.getBoundaries("新乐");
             that.Mutil.mapSelectBind((evt: any) => {
                 //这是地图marker点击回调监听
                 if (evt.selected[0].get('type') === 'qiye') {
@@ -790,7 +790,6 @@
 
             })
             this.getStatiData();
-            this.Mutil.getBoundaries("新乐");
         }
 
         mapqiye() {