任务管理添加地图绘制地图功能

xiebin

2022-09-19 09ee4f46546548070be3abdc6223fad88553fa5e

任务管理添加地图绘制地图功能

 package-lock.json

@@ -1085,6 +1085,36 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
    "@mapbox/jsonlint-lines-primitives": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
    },
    "@mapbox/mapbox-gl-style-spec": {
      "version": "13.26.0",
      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.26.0.tgz",
      "integrity": "sha512-Ya1WiNz1qYau7xPYPQUbionrw9pjgZAIebGQdDXgwJuSAWeVCr02P7rqbYFHbXqX5TeAaq4qVpcaJb9oZtgaVQ==",
      "requires": {
        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
        "@mapbox/point-geometry": "^0.1.0",
        "@mapbox/unitbezier": "^0.0.0",
        "csscolorparser": "~1.0.2",
        "json-stringify-pretty-compact": "^2.0.0",
        "minimist": "^1.2.6",
        "rw": "^1.3.3",
        "sort-object": "^0.3.2"
      }
    },
    "@mapbox/point-geometry": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
    },
    "@mapbox/unitbezier": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
    },
    "@mrmlnc/readdir-enhanced": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1100,6 +1130,11 @@
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
      "dev": true
    },
    "@petamoriken/float16": {
      "version": "3.6.6",
      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
      "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg=="
    },
    "@soda/friendly-errors-webpack-plugin": {
      "version": "1.8.1",
@@ -3947,6 +3982,11 @@
      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
      "dev": true
    },
    "csscolorparser": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
    },
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4633,6 +4673,11 @@
        "readable-stream": "^2.0.0",
        "stream-shift": "^1.0.0"
      }
    },
    "earcut": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
    },
    "easy-stack": {
      "version": "1.0.1",
@@ -5829,6 +5874,40 @@
      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
      "dev": true
    },
    "geotiff": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
      "requires": {
        "@petamoriken/float16": "^3.4.7",
        "lerc": "^3.0.0",
        "lru-cache": "^6.0.0",
        "pako": "^2.0.4",
        "parse-headers": "^2.0.2",
        "web-worker": "^1.2.0",
        "xml-utils": "^1.0.2"
      },
      "dependencies": {
        "lru-cache": {
          "version": "6.0.0",
          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
          "requires": {
            "yallist": "^4.0.0"
          }
        },
        "pako": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
          "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg=="
        },
        "yallist": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
        }
      }
    },
    "get-caller-file": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6479,8 +6558,7 @@
    "ieee754": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
      "dev": true
      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
    },
    "iferr": {
      "version": "0.1.5",
@@ -7264,6 +7342,11 @@
      "dev": true,
      "optional": true
    },
    "json-stringify-pretty-compact": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
    },
    "json-stringify-safe": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -7331,6 +7414,11 @@
      "requires": {
        "launch-editor": "^2.6.0"
      }
    },
    "lerc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
    },
    "levn": {
      "version": "0.3.0",
@@ -7559,6 +7647,11 @@
      "requires": {
        "object-visit": "^1.0.0"
      }
    },
    "mapbox-to-css-font": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow=="
    },
    "md5.js": {
      "version": "1.3.5",
@@ -8559,6 +8652,32 @@
      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
      "dev": true
    },
    "ol": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/ol/-/ol-7.1.0.tgz",
      "integrity": "sha512-mAeV5Ca4mFhYaJoGWNZnIMN5VNnFTf63FgZjBiYu/DjQDGKNsD5QyvvqVziioVdOOgl6b8rPB/ypj2XNBinPwA==",
      "requires": {
        "earcut": "^2.2.3",
        "geotiff": "2.0.4",
        "ol-mapbox-style": "9.1.0",
        "pbf": "3.2.1",
        "rbush": "^3.0.1"
      }
    },
    "ol-mapbox-style": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
      "requires": {
        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
        "mapbox-to-css-font": "^2.4.1"
      }
    },
    "olcs": {
      "version": "2.13.1",
      "resolved": "https://registry.npmjs.org/olcs/-/olcs-2.13.1.tgz",
      "integrity": "sha512-/h1ldzUGQG05k9KR3M56m7qVRDruXfrHiaLujMKk+EiNvpGuxlwtsj2Kkcm2wVx9t+DQvDXemf2SeV8K/ME9qw=="
    },
    "on-finished": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -8770,6 +8889,11 @@
        "safe-buffer": "^5.1.1"
      }
    },
    "parse-headers": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
    },
    "parse-json": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -8884,6 +9008,15 @@
      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
      "dev": true
    },
    "pbf": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
      "requires": {
        "ieee754": "^1.1.12",
        "resolve-protobuf-schema": "^2.1.0"
      }
    },
    "pbkdf2": {
      "version": "3.1.2",
@@ -10195,6 +10328,11 @@
      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
      "dev": true
    },
    "protocol-buffers-schema": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
    },
    "proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -10327,6 +10465,11 @@
      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
      "dev": true
    },
    "quickselect": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -10368,6 +10511,14 @@
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
    },
    "rbush": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
      "requires": {
        "quickselect": "^2.0.0"
      }
    },
    "read-pkg": {
      "version": "5.2.0",
@@ -10819,6 +10970,14 @@
      "dev": true,
      "optional": true
    },
    "resolve-protobuf-schema": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
      "requires": {
        "protocol-buffers-schema": "^3.3.1"
      }
    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10892,6 +11051,11 @@
      "requires": {
        "aproba": "^1.1.1"
      }
    },
    "rw": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
    },
    "rx-lite": {
      "version": "4.0.8",
@@ -11609,6 +11773,16 @@
        }
      }
    },
    "sort-asc": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw=="
    },
    "sort-desc": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw=="
    },
    "sort-keys": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
@@ -11616,6 +11790,15 @@
      "dev": true,
      "requires": {
        "is-plain-obj": "^1.0.0"
      }
    },
    "sort-object": {
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
      "requires": {
        "sort-asc": "^0.1.0",
        "sort-desc": "^0.1.1"
      }
    },
    "source-list-map": {
@@ -13255,6 +13438,11 @@
        "defaults": "^1.0.3"
      }
    },
    "web-worker": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
    },
    "webpack": {
      "version": "4.46.0",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
@@ -13872,6 +14060,11 @@
        "async-limiter": "~1.0.0"
      }
    },
    "xml-utils": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.2.0.tgz",
      "integrity": "sha512-z4unVPZruEDC3tfyd7wvWfjclnMz34iwQpv8H28H+qREpjKkR083MBvcrWXfJrIcrSmHR5ghguOcgQqWdnBpVA=="
    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

 package.json

@@ -24,6 +24,8 @@
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "ol": "^7.1.0",
    "olcs": "^2.13.1",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",

 public/index.html

@@ -20,6 +20,8 @@
  <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
  <link rel="icon" href="<%= BASE_URL %>favicon.png">

  <script type="text/javascript" src="<%= BASE_URL %>js/jquery.min.js"></script>

  <!--  inputMap地图选择器 开始  -->
  <script>
    window._AMapSecurityConfig = {

 public/js/jquery.min.js

New file
Diff too large

 src/components/OpenLayersMap/index.vue

New file
@@ -0,0 +1,330 @@
<template>
  <div>
    <div id='map' style='width: 100%; height: 400px'>
      <div style="position: absolute;right:12px;top:12px;z-index: 999999">
        <p style="margin-top: 10px">
          <Button type="primary" size="small" @click="point()">绘制点</Button>
          <Button type="primary" size="small" @click="polygon()">绘制面</Button>
          <Button type="warning" size="small" @click="clearDraw()">重置</Button>
        </p>
      </div>

    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import {Map, View, Feature} from 'ol'
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
import LineString from "ol/geom/LineString";
import {Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle} from 'ol/style'
import {Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon} from 'ol/geom'
import Draw from 'ol/interaction/Draw'
import XYZ from "ol/source/XYZ";
import 'ol/ol.css'

export default {
  name: 'OpenLayersMap',
  props:['routeRange'],
  data() {
    return {
      map: null,
      points: [],
      // 线条点数组
      linePoints: [],
      // 多边形数组
      polygonPoints: [],
      draw: null,
      drawLayer: null,
      lineVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
    }
  },
  methods: {

    createMap() {
      let _this = this

      _this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
            })
          }),

        ],
        view: new View({
          // 设置中心点，默认南昌，用于规划南昌市的路线
          center: [115.9032747077233, 28.67433116990186],
          projection: 'EPSG:4326',
          // 设置缩放倍数
          zoom: 13,
          minZoom: 6,
          maxZoom: 20
        })
      })
      _this.lineVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.map.addLayer(_this.lineVector)

      _this.addLineDraw(_this.routeRange)
    },
    // 绘画之后的样式
    styleFunction() {
      // 绘画之后的样式
      let styles = [
        new Style({
          fill: new StyleFill({color: "rgba(255, 255, 255, 0.2)"}),
          stroke: new StyleStroke({
            color: 'rgb(252, 94, 32)',
            width: 5
          })
        })
      ]
      return styles
    },
    // 添加线路
    addLineDraw(toData) {
      // toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
      if (toData) {
        // 将数据库点坐标数据转换
        let entityData = "";
        let entityArr = [];
        entityData = toData.match(/\(([^)]*)\)/);
        if (entityData && entityData != "") {
          entityData = entityData[1].split(",");
          for (let j = 0; j < entityData.length; j++) {
            entityArr.push([
              Number(entityData[j].split(" ")[0]),
              Number(entityData[j].split(" ")[1]),
            ]);
          }
        }
        // let lineCoords = [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717],[115.90696542732779, 28.73408542233564],[115.90696542732779, 28.73408542233564]]
        let lineCoords = entityArr
        let view = this.map.getView();
        view.setCenter([
          lineCoords[Math.ceil(lineCoords.length / 2)][0],
          lineCoords[Math.ceil(lineCoords.length / 2)][1],
        ]);
        view.setZoom(14.5);

        let feature_LineString = new Feature({
          geometry: new LineString(lineCoords),
        });
        feature_LineString.setStyle(this.styleFunction());// 设置样式
        this.lineVector.getSource().addFeature(feature_LineString);
      }
    },
    // 将点坐标集合转换为数据库数据
    doData(val) {
      let str = "LINESTRING(";
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
        if (k != val.length - 1) {
          str += ",";
        }
      }
      str += ")";
      // console.log(str)
      return '\''+str+'\'';
    },
    // 开始绘制
    point() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      _this.draw = new Draw({
        source: _this.lineVector.getSource(),
        type: 'LineString',
        style: new Style({
          stroke: new StyleStroke({
            color: "red",
            width: 3,
          })
        }),
      })
      _this.map.addInteraction(_this.draw)

      // 点击事件
      _this.map.on('click', function (e) {
        // 将点坐标保存集合
        _this.coordinates.push(e.coordinate)
      })
      // 结束事件
      _this.draw.on('drawend', function () {
        _this.map.removeInteraction(_this.draw);
        _this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
        // 将点坐标集合转换为数据库数据
        let toData = _this.doData(_this.coordinates)
        // 传值给父组件
        _this.$emit('toData',toData)
      })
    },
    // 设置统一控制点击事件，需要画图方式在此处切换
    handleClick(point) {
      // 绘制连线
      this.drawLineString(point)
      // 绘制点
      // this.drawPoint(point)
      // 绘制圆形
      // this.drawCircle(point)
      // 绘制多边形
      // this.drawPolygon(point)
    },
    // 绘制点位
    drawPoint(center) {
      let vectorLayer = this.getLayer()

      let point = new GeomPoint(center)
      let feature = new Feature(point)
      vectorLayer.getSource().addFeature(feature)
      this.map.addLayer(vectorLayer)
    },
    // 绘制连线
    drawLineString(point) {
      this.linePoints.push(point)
      let featureLine = new Feature({
        geometry: new GeomLineString(this.linePoints),
      });

      // 添加线的样式
      let lineStyle = new Style({
        fill: new StyleFill({
          color: 'rgba(1, 210, 241, 0.1)'
        }),
        stroke: new StyleStroke({
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      });
      featureLine.setStyle(lineStyle);

      let source = new VectorSource()
      source.addFeature(featureLine)
      let layer = new VectorLayer()
      layer.setSource(source)
      this.map.addLayer(layer)
    },
    // 绘制区域圆形
    drawCircle(center) {
      let vectorLayer = this.getLayer()

      // 设置半径
      let circle = new GeomCircle(center, 0.003)// 新建圆对象
      let feature = new Feature(circle)// 新建Feature对象 并将circle传入
      vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
      this.map.addLayer(vectorLayer) // 将图层添至地图对象
    },
    //画多边形
    drawPolygon(point) {
      this.polygonPoints.push(point)
      let feature = new Feature({
        geometry: new GeomPolygon([this.polygonPoints]),
        attributes: null
      });
      // 添加线的样式
      let lineStyle = new Style({
        fill: new StyleFill({
          color: 'rgba(1, 210, 241, 0.1)'
        }),
        stroke: new StyleStroke({
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      });
      feature.setStyle(lineStyle);
      let source = new VectorSource();
      source.addFeature(feature)
      let vectorLayer = new VectorLayer({
        source: source
      })
      this.map.addLayer(vectorLayer)
    },
    // 设置聚合点
    addMarker() {
      let source = new VectorSource();
      // 随机创建200个要素，后台点位取出后按此格式处理
      for (let i = 1; i <= 200; i++) {
        let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05];
        let feature = new Feature(new GeomPoint(coordinates));
        source.addFeature(feature);
      }

      // 聚合
      let clusterSource = new Cluster({
        source: source,
        distance: 50
      })

      let clusters = new VectorLayer({
        source: clusterSource,
        style: function (feature) {
          let size = feature.get('features').length;
          let style = new Style({
            image: new StyleCircle({
              radius: 20,
              stroke: new StyleStroke({
                color: 'white'
              }),
              fill: new StyleFill({
                color: '#AAD3DF'
              })
            }),
            text: new StyleText({
              text: size.toString(),
              fill: new StyleFill({
                color: 'black'
              })
            })
          })
          return style;
        }
      });

      this.map.addLayer(clusters)
    },

    // 获取新的 layer 图层对象
    getLayer() {
      return new VectorLayer({
        source: new VectorSource({
          features: ''
        }),
        // 设置样式，但不完全兼容
        // style: function (feature) {
        //   let style = new Style({
        //     stroke: new StyleStroke({
        //       color: '#E80000',
        //       width: 2
        //     }),
        //     fill: new StyleFill({
        //       color: 'rgba(0,0,0,0)'
        //     })
        //   })
        //   return style
        // }
      })
    }
  },
  mounted() {
    this.createMap()
  }

}
</script>

<style>

</style>

 src/const/taskinfo/taskinfo.js

@@ -87,7 +87,7 @@
      prop: "state",
      type: "select",
      dicUrl: "/api/blade-system/dict-biz/dictionary?code=TACK_STATE",
      dataType: "number",
      disabled: true,
      props: {
        label: "dictValue",
        value: "dictKey"
@@ -97,7 +97,8 @@
      label: "任务来源",
      prop: "source",
      type: "select",
      dicData: [{id:'WEB',name:'WEB'},{id:'APP',name:'APP'}],
      dicData: [{id:'SYSTEMNEW',name:'系统创建'},{id:'SYSTEMAUTO',name:'计划任务新增'}],
      disabled: true,
      props: {
        label: "name",
        value: "id"
@@ -108,6 +109,9 @@
      prop: "routeRange",
      type: "input",
      hide: true,
      span: 24,
      display: true,
      addDisplay: true
    },
    {
      label: "创建人",

 src/views/taskinfo/taskinfo.vue

@@ -28,16 +28,24 @@
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot="routeRangeForm">
        <open-layers-map ref="OpenLayersMap" @toData="toData" :routeRange="form.routeRange"></open-layers-map>
      </template>

    </avue-crud>

  </basic-container>
</template>

<script>

  import {getList, getDetail, add, update, remove} from "@/api/taskinfo/taskinfo";
  import option from "@/const/taskinfo/taskinfo";
  import {mapGetters} from "vuex";
  import OpenLayersMap from "@/components/OpenLayersMap";

  export default {
    components: { OpenLayersMap },
    data() {
      return {
        form: {},
@@ -149,6 +157,7 @@
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
            this.form.routeRange = '\'' + this.form.routeRange + '\''
          });
        } else {
          const date = new Date()
@@ -157,6 +166,8 @@
          const strDate = date.getDate()
          this.form.startTime = `${year}-${month}-${strDate} 00:00:00`
          this.form.endTime = `${year}-${month}-${strDate} 23:59:59`
          this.form.source = 'SYSTEMNEW'
          this.form.state = '0'
        }
        done();
      },
@@ -165,7 +176,6 @@
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        params
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
@@ -196,6 +206,9 @@
          this.loading = false;
          this.selectionClear();
        });
      },
      toData(toData) {
        this.form.routeRange = toData
      }
    }
  };