依赖

package.json

@@ -1,117 +1,118 @@
 {
-  "name": "epmet-oper-gov",
+    "name": "epmet-oper-gov",
-  "version": "1.0.0",
+    "version": "1.0.0",
-  "private": true,
+    "private": true,
-  "scripts": {
+    "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",
+        "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+        "build": "vue-cli-service build",
-    "build:sit": "vue-cli-service build --mode production.sit",
+        "build:sit": "vue-cli-service build --mode production.sit",
-    "build:uat": "vue-cli-service build --mode production.uat",
+        "build:uat": "vue-cli-service build --mode production.uat",
-    "build:preview": "vue-cli-service build --mode preview",
+        "build:preview": "vue-cli-service build --mode preview",
-    "build:prod": "vue-cli-service build --mode production",
+        "build:prod": "vue-cli-service build --mode production",
-    "build:shibei_prod": "vue-cli-service build --mode shibei_production",
+        "build:shibei_prod": "vue-cli-service build --mode shibei_production",
-    "lint": "vue-cli-service lint",
+        "lint": "vue-cli-service lint",
-    "et": "node_modules/.bin/et",
+        "et": "node_modules/.bin/et",
-    "et:init": "node_modules/.bin/et -i",
+        "et:init": "node_modules/.bin/et -i",
-    "et:list": "gulp themes"
+        "et:list": "gulp themes"
-  },
-  "dependencies": {
-    "@antv/l7": "2.9.14",
-    "@antv/l7-draw": "3.0.5",
-    "@antv/l7-maps": "2.9.14",
-    "@riophae/vue-treeselect": "^0.4.0",
-    "@tinymce/tinymce-vue": "^3.2.8",
-    "async-validator": "^4.2.5",
-    "axios": "^0.19.0",
-    "babel-eslint": "^8.0.1",
-    "babel-plugin-component": "^1.1.1",
-    "echarts": "^5.2.2",
-    "echarts-gl": "^2.0.9",
-    "element-theme": "2.0.1",
-    "element-ui": "2.13.2",
-    "file-saver": "^2.0.5",
-    "gulp-autoprefixer": "^6.1.0",
-    "gulp-clean-css": "^4.2.0",
-    "gulp-load-plugins": "^2.0.0",
-    "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2",
-    "js-cookie": "^2.2.0",
-    "jsencrypt": "^3.0.3",
-    "lodash": "^4.17.15",
-    "mint-ui": "^2.2.13",
-    "node-sass": "^4.12.0",
-    "ol": "^7.2.2",
-    "portfinder": "^1.0.21",
-    "proj4": "^2.8.0",
-    "qs": "^6.7.0",
-    "quill": "^1.3.6",
-    "screenfull": "^4.2.1",
-    "sortablejs": "^1.12.0",
-    "svg-sprite-loader": "^4.1.6",
-    "throttle-debounce": "^3.0.1",
-    "turf": "^3.0.14",
-    "v-distpicker": "^1.2.2",
-    "vue": "^2.6.11",
-    "vue-baidu-map": "^0.21.22",
-    "vue-i18n": "^8.12.0",
-    "vue-quill-editor": "^3.0.6",
-    "vue-router": "^3.0.7",
-    "vuex": "^3.1.1",
-    "xlsx": "^0.17.1"
-  },
-  "devDependencies": {
-    "@antv/f2": "^3.8.10-beta.1",
-    "@tinymce/tinymce-vue": "3.2.8",
-    "@vue/cli-plugin-babel": "^3.10.0",
-    "@vue/cli-plugin-eslint": "^3.10.0",
-    "@vue/cli-service": "^3.10.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "dai-js": "^0.0.12",
-    "element-theme-chalk": "^2.13.0",
-    "natives": "^1.1.6",
-    "ol": "^6.9.0",
-    "sass-loader": "^7.3.1",
-    "script-loader": "^0.7.2",
-    "tinymce": "5.8.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
     },
-    "extends": [
+    "dependencies": {
-      "plugin:vue/essential",
+        "@antv/l7": "2.9.14",
-      "@vue/standard"
+        "@antv/l7-draw": "3.0.5",
+        "@antv/l7-maps": "2.9.14",
+        "@riophae/vue-treeselect": "^0.4.0",
+        "@tinymce/tinymce-vue": "^3.2.8",
+        "async-validator": "^4.2.5",
+        "axios": "^0.19.0",
+        "babel-eslint": "^8.0.1",
+        "babel-plugin-component": "^1.1.1",
+        "echarts": "^5.2.2",
+        "echarts-gl": "^2.0.9",
+        "element-theme": "2.0.1",
+        "element-ui": "2.13.2",
+        "file-saver": "^2.0.5",
+        "gulp-autoprefixer": "^6.1.0",
+        "gulp-clean-css": "^4.2.0",
+        "gulp-load-plugins": "^2.0.0",
+        "gulp-rename": "^1.4.0",
+        "gulp-sass": "^4.0.2",
+        "js-cookie": "^2.2.0",
+        "jsencrypt": "^3.0.3",
+        "lodash": "^4.17.15",
+        "mint-ui": "^2.2.13",
+        "node-sass": "^4.12.0",
+        "ol": "^7.2.2",
+        "portfinder": "^1.0.21",
+        "proj4": "^2.8.0",
+        "qs": "^6.7.0",
+        "quill": "^1.3.6",
+        "screenfull": "^4.2.1",
+        "sortablejs": "^1.12.0",
+        "svg-sprite-loader": "^4.1.6",
+        "throttle-debounce": "^3.0.1",
+        "turf": "^3.0.14",
+        "v-distpicker": "^1.2.2",
+        "vue": "^2.6.11",
+        "vue-baidu-map": "^0.21.22",
+        "vue-i18n": "^8.12.0",
+        "vue-quill-editor": "^3.0.6",
+        "vue-router": "^3.0.7",
+        "vuex": "^3.1.1",
+        "xlsx": "^0.17.1"
+    },
+    "devDependencies": {
+        "@antv/f2": "^3.8.10-beta.1",
+        "@tinymce/tinymce-vue": "3.2.8",
+        "@vue/cli-plugin-babel": "^3.10.0",
+        "@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": "^7.2.2",
+        "sass-loader": "^7.3.1",
+        "script-loader": "^0.7.2",
+        "tinymce": "5.8.2",
+        "vue-template-compiler": "^2.6.11"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "@vue/standard"
+        ],
+        "rules": {},
+        "parserOptions": {
+            "parser": "babel-eslint"
+        }
+    },
+    "postcss": {
+        "plugins": {
+            "autoprefixer": {}
+        }
+    },
+    "engines": {
+        "node": ">= 8.11.1",
+        "npm": ">= 5.6.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 10"
     ],
-    "rules": {},
+    "element-theme": {
-    "parserOptions": {
+        "config": "./src/element-ui/theme-variables.scss",
-      "parser": "babel-eslint"
+        "out": "./src/element-ui/theme",
-    }
+        "minimize": true,
-  },
+        "browsers": [
-  "postcss": {
+            "> 1%",
-    "plugins": {
+            "last 2 versions",
-      "autoprefixer": {}
+            "not ie <= 10"
+        ]
     }
-  },
+
-  "engines": {
-    "node": ">= 8.11.1",
-    "npm": ">= 5.6.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ],
-  "element-theme": {
-    "config": "./src/element-ui/theme-variables.scss",
-    "out": "./src/element-ui/theme",
-    "minimize": true,
-    "browsers": [
-      "> 1%",
-      "last 2 versions",
-      "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) {