依赖

package.json

@@ -3,7 +3,7 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-    "dev": "vue-cli-service serve",
+        "dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "build:sit": "vue-cli-service build --mode production.sit",
@@ -67,10 +67,11 @@
         "@vue/cli-plugin-eslint": "^3.10.0",
         "@vue/cli-service": "^3.10.0",
         "@vue/eslint-config-standard": "^4.0.0",
+        "cross-env": "^7.0.3",
         "dai-js": "^0.0.12",
         "element-theme-chalk": "^2.13.0",
         "natives": "^1.1.6",
-    "ol": "^6.9.0",
+        "ol": "^7.2.2",
         "sass-loader": "^7.3.1",
         "script-loader": "^0.7.2",
         "tinymce": "5.8.2",
@@ -114,4 +115,4 @@
             "not ie <= 10"
         ]
     }
-}
+

src/views/dataBoard/fifteen/components/index.vue

@@ -53,28 +53,28 @@
 </template>
 <script>
 
+import dy from '@/assets/images/fifteen/dy.png';
+import education from '@/assets/images/fifteen/education.png';
+import jr from '@/assets/images/fifteen/jr.png';
+import qt from '@/assets/images/fifteen/qt.png';
+import sy from '@/assets/images/fifteen/sy.png';
+import sz from '@/assets/images/fifteen/sz.png';
+import wt from '@/assets/images/fifteen/wt.png';
+import xz from '@/assets/images/fifteen/xz.png';
+import yl from '@/assets/images/fifteen/yl.png';
+import { requestPostBi } from "@/js/dai/request-bipass";
+import { Feature, Overlay } from 'ol';
 import Map from 'ol/Map';
-import { XYZ } from 'ol/source';
 import View from 'ol/View';
 import { defaults as defaultControls } from 'ol/control.js';
-import { Icon, Style, Fill, Stroke, Text } from 'ol/style';
+import { Circle, Point, Polygon } from 'ol/geom';
+import { Select } from 'ol/interaction';
 import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
-import education from '@/assets/images/fifteen/education.png'
+import { getPointResolution } from 'ol/proj';
-import xz from '@/assets/images/fifteen/xz.png'
+import { METERS_PER_UNIT } from 'ol/proj/Units';
-import jr from '@/assets/images/fifteen/jr.png'
+import { Vector as VectorSource, XYZ } from 'ol/source';
-import qt from '@/assets/images/fifteen/qt.png'
+import { Fill, Icon, Stroke, Style, Text } from 'ol/style';
-import sy from '@/assets/images/fifteen/sy.png'
+import Dialog from "./dialog.vue";
-import sz from '@/assets/images/fifteen/sz.png'
-import wt from '@/assets/images/fifteen/wt.png'
-import yl from '@/assets/images/fifteen/yl.png'
-import dy from '@/assets/images/fifteen/dy.png'
-import { Vector as VectorSource } from 'ol/source';
-import { Feature, Overlay } from 'ol'
-import { Point, Polygon, Circle } from 'ol/geom'
-import { requestPostBi } from "@/js/dai/request-bipass";
-import { getPointResolution } from 'ol/proj'
-import { METERS_PER_UNIT } from 'ol/proj/Units'
-import Dialog from "./dialog.vue"
 export default {
     components: {
         Dialog
@@ -142,6 +142,28 @@ export default {
             //添加标注
             this.map.addOverlay(this.overlay);
             const _this = this;
+            let select = new Select({
+                style: new Style({
+                    stroke: new Stroke({
+                        color: "rgb(0, 153, 255,1)",
+                        width: 2
+                    }),
+                    fill: new Fill({
+                        color: "rgb(209, 203, 189,0.6)"
+                    })
+                })
+            });
+            //map加载该控件，默认是激活可用的
+            _this.map.addInteraction(select);
+            console.log(99999, select);
+            select.on("select", function (e) {
+                console.log("选中要素");
+                // console.log(e.selected[0].get('name')); //打印已选择的Feature的name属性
+                let currentRome = e.selected[0]; //获取当前选中的节点
+                console.log(e)
+
+            })
+            return
             _this.map.on("click", function (e) {
                 _this.featureInfo = {}
                 let feature = _this.map.forEachFeatureAtPixel(e.pixel, function (feature) {