diff --git a/package.json b/package.json index d5067c4..5e53347 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,15 @@ "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" - }, "dependencies": { "@arcgis/core": "^4.29.10", "core-js": "^3.8.3", + "element-plus": "^2.6.3", "esri-loader": "^3.7.0", "ncp": "^2.0.0", "vue": "^3.2.13", + "vue-router": "4", "webpack": "^5.91.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca22420..0f5ca5d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: core-js: specifier: ^3.8.3 version: 3.36.1 + element-plus: + specifier: ^2.6.3 + version: 2.6.3(vue@3.4.21) esri-loader: specifier: ^3.7.0 version: 3.7.0 @@ -20,6 +23,9 @@ dependencies: vue: specifier: ^3.2.13 version: 3.4.21 + vue-router: + specifier: '4' + version: 4.3.0(vue@3.4.21) webpack: specifier: ^5.91.0 version: 5.91.0 @@ -39,7 +45,7 @@ devDependencies: version: 5.0.8(@vue/cli-service@5.0.8)(eslint@7.32.0) '@vue/cli-service': specifier: ~5.0.0 - version: 5.0.8(vue@3.4.21) + version: 5.0.8(lodash@4.17.21)(vue@3.4.21) eslint: specifier: ^7.32.0 version: 7.32.0 @@ -1345,11 +1351,24 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@ctrl/tinycolor@3.6.1: + resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} + engines: {node: '>=10'} + dev: false + /@discoveryjs/json-ext@0.5.7: resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} dev: true + /@element-plus/icons-vue@2.3.1(vue@3.4.21): + resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==} + peerDependencies: + vue: ^3.2.0 + dependencies: + vue: 3.4.21 + dev: false + /@eslint/eslintrc@0.4.3: resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==} engines: {node: ^10.12.0 || >=12.0.0} @@ -1568,6 +1587,10 @@ packages: hasBin: true dev: false + /@sxzz/popperjs-es@2.11.7: + resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==} + dev: false + /@trysound/sax@0.2.0: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -1665,6 +1688,16 @@ packages: /@types/json-schema@7.0.15: resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + /@types/lodash-es@4.17.12: + resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==} + dependencies: + '@types/lodash': 4.17.0 + dev: false + + /@types/lodash@4.17.0: + resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==} + dev: false + /@types/mime@1.3.5: resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==} dev: true @@ -1735,6 +1768,10 @@ packages: resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} dev: false + /@types/web-bluetooth@0.0.16: + resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==} + dev: false + /@types/ws@8.5.10: resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: @@ -2063,7 +2100,7 @@ packages: dependencies: '@babel/core': 7.24.4 '@vue/babel-preset-app': 5.0.8(@babel/core@7.24.4)(core-js@3.36.1)(vue@3.4.21) - '@vue/cli-service': 5.0.8(vue@3.4.21) + '@vue/cli-service': 5.0.8(lodash@4.17.21)(vue@3.4.21) '@vue/cli-shared-utils': 5.0.8 babel-loader: 8.3.0(@babel/core@7.24.4)(webpack@5.91.0) thread-loader: 3.0.4(webpack@5.91.0) @@ -2085,7 +2122,7 @@ packages: '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 eslint: '>=7.5.0' dependencies: - '@vue/cli-service': 5.0.8(vue@3.4.21) + '@vue/cli-service': 5.0.8(lodash@4.17.21)(vue@3.4.21) '@vue/cli-shared-utils': 5.0.8 eslint: 7.32.0 eslint-webpack-plugin: 3.2.0(eslint@7.32.0)(webpack@5.91.0) @@ -2105,7 +2142,7 @@ packages: peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 dependencies: - '@vue/cli-service': 5.0.8(vue@3.4.21) + '@vue/cli-service': 5.0.8(lodash@4.17.21)(vue@3.4.21) '@vue/cli-shared-utils': 5.0.8 transitivePeerDependencies: - encoding @@ -2116,10 +2153,10 @@ packages: peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 dependencies: - '@vue/cli-service': 5.0.8(vue@3.4.21) + '@vue/cli-service': 5.0.8(lodash@4.17.21)(vue@3.4.21) dev: true - /@vue/cli-service@5.0.8(vue@3.4.21): + /@vue/cli-service@5.0.8(lodash@4.17.21)(vue@3.4.21): resolution: {integrity: sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==} engines: {node: ^12.0.0 || >= 14.0.0} hasBin: true @@ -2158,8 +2195,8 @@ packages: '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8) '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8) '@vue/cli-shared-utils': 5.0.8 - '@vue/component-compiler-utils': 3.3.0 - '@vue/vue-loader-v15': /vue-loader@15.11.1(css-loader@6.11.0)(webpack@5.91.0) + '@vue/component-compiler-utils': 3.3.0(lodash@4.17.21) + '@vue/vue-loader-v15': /vue-loader@15.11.1(css-loader@6.11.0)(lodash@4.17.21)(webpack@5.91.0) '@vue/web-component-wrapper': 1.3.0 acorn: 8.11.3 acorn-walk: 8.3.2 @@ -2329,10 +2366,10 @@ packages: '@vue/compiler-dom': 3.4.21 '@vue/shared': 3.4.21 - /@vue/component-compiler-utils@3.3.0: + /@vue/component-compiler-utils@3.3.0(lodash@4.17.21): resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==} dependencies: - consolidate: 0.15.1 + consolidate: 0.15.1(lodash@4.17.21) hash-sum: 1.0.2 lru-cache: 4.1.5 merge-source-map: 1.1.0 @@ -2398,6 +2435,10 @@ packages: - whiskers dev: true + /@vue/devtools-api@6.6.1: + resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==} + dev: false + /@vue/reactivity@3.4.21: resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==} dependencies: @@ -2432,6 +2473,31 @@ packages: resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==} dev: true + /@vueuse/core@9.13.0(vue@3.4.21): + resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==} + dependencies: + '@types/web-bluetooth': 0.0.16 + '@vueuse/metadata': 9.13.0 + '@vueuse/shared': 9.13.0(vue@3.4.21) + vue-demi: 0.14.7(vue@3.4.21) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + + /@vueuse/metadata@9.13.0: + resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==} + dev: false + + /@vueuse/shared@9.13.0(vue@3.4.21): + resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==} + dependencies: + vue-demi: 0.14.7(vue@3.4.21) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@webassemblyjs/ast@1.12.1: resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} dependencies: @@ -2710,6 +2776,10 @@ packages: engines: {node: '>=8'} dev: true + /async-validator@4.2.5: + resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} + dev: false + /async@2.6.4: resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==} dependencies: @@ -3164,7 +3234,7 @@ packages: engines: {node: '>=0.8'} dev: true - /consolidate@0.15.1: + /consolidate@0.15.1(lodash@4.17.21): resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==} engines: {node: '>= 0.10.0'} deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog @@ -3331,6 +3401,7 @@ packages: optional: true dependencies: bluebird: 3.7.2 + lodash: 4.17.21 dev: true /content-disposition@0.5.4: @@ -3780,6 +3851,31 @@ packages: /electron-to-chromium@1.4.730: resolution: {integrity: sha512-oJRPo82XEqtQAobHpJIR3zW5YO3sSRRkPz2an4yxi1UvqhsGm54vR/wzTFV74a3soDOJ8CKW7ajOOX5ESzddwg==} + /element-plus@2.6.3(vue@3.4.21): + resolution: {integrity: sha512-U4L/mr+1r+EmAUYUHrs0V/8hHMdBGP07rPymSC72LZCN4jK1UwygQYICegTQ5us4mxeqBvW6wfoEfo003fwCqw==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@ctrl/tinycolor': 3.6.1 + '@element-plus/icons-vue': 2.3.1(vue@3.4.21) + '@floating-ui/dom': 1.6.3 + '@popperjs/core': /@sxzz/popperjs-es@2.11.7 + '@types/lodash': 4.17.0 + '@types/lodash-es': 4.17.12 + '@vueuse/core': 9.13.0(vue@3.4.21) + async-validator: 4.2.5 + dayjs: 1.11.10 + escape-html: 1.0.3 + lodash: 4.17.21 + lodash-es: 4.17.21 + lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21) + memoize-one: 6.0.0 + normalize-wheel-es: 1.2.0 + vue: 3.4.21 + transitivePeerDependencies: + - '@vue/composition-api' + dev: false + /emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} dev: true @@ -3856,7 +3952,6 @@ packages: /escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} - dev: true /escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} @@ -5016,6 +5111,18 @@ packages: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} dev: false + /lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21): + resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==} + peerDependencies: + '@types/lodash-es': '*' + lodash: '*' + lodash-es: '*' + dependencies: + '@types/lodash-es': 4.17.12 + lodash: 4.17.21 + lodash-es: 4.17.21 + dev: false + /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: true @@ -5050,7 +5157,6 @@ packages: /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - dev: true /log-symbols@4.1.0: resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} @@ -5129,6 +5235,10 @@ packages: fs-monkey: 1.0.5 dev: true + /memoize-one@6.0.0: + resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==} + dev: false + /merge-descriptors@1.0.1: resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==} dev: true @@ -5344,6 +5454,10 @@ packages: engines: {node: '>=10'} dev: true + /normalize-wheel-es@1.2.0: + resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==} + dev: false + /npm-run-path@2.0.2: resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==} engines: {node: '>=4'} @@ -6924,6 +7038,21 @@ packages: engines: {node: '>= 0.8'} dev: true + /vue-demi@0.14.7(vue@3.4.21): + resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.4.21 + dev: false + /vue-eslint-parser@8.3.0(eslint@7.32.0): resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -6946,7 +7075,7 @@ packages: resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==} dev: true - /vue-loader@15.11.1(css-loader@6.11.0)(webpack@5.91.0): + /vue-loader@15.11.1(css-loader@6.11.0)(lodash@4.17.21)(webpack@5.91.0): resolution: {integrity: sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==} peerDependencies: '@vue/compiler-sfc': ^3.0.8 @@ -6965,7 +7094,7 @@ packages: vue-template-compiler: optional: true dependencies: - '@vue/component-compiler-utils': 3.3.0 + '@vue/component-compiler-utils': 3.3.0(lodash@4.17.21) css-loader: 6.11.0(webpack@5.91.0) hash-sum: 1.0.2 loader-utils: 1.4.2 @@ -7047,6 +7176,15 @@ packages: webpack: 5.91.0 dev: true + /vue-router@4.3.0(vue@3.4.21): + resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@vue/devtools-api': 6.6.1 + vue: 3.4.21 + dev: false + /vue-style-loader@4.1.3: resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==} dependencies: diff --git a/src/App.vue b/src/App.vue index 71e4419..74f7d84 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,17 @@ diff --git a/src/components/Lession07Layers.vue b/src/components/Lession07Layers.vue index 8fff0ad..182d2dd 100644 --- a/src/components/Lession07Layers.vue +++ b/src/components/Lession07Layers.vue @@ -1,9 +1,6 @@ @@ -15,6 +12,11 @@ import WebMap from "@arcgis/core/WebMap.js"; import { toRaw } from "vue" import "@esri/calcite-components/dist/components/calcite-button"; import Search from "@arcgis/core/widgets/Search.js"; +import Graphic from "@arcgis/core/Graphic.js"; +import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"; +import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js"; +import CSVLayer from "@arcgis/core/layers/CSVLayer.js"; + export default { name: 'HelloWorld', data(){ @@ -45,7 +47,7 @@ export default { // }); // console.log(view) - // 通过 web map(2D) 或 web scene(3D) 创建 map 实例 + // 创建Map的第二种方式，通过 web map(2D) 或 web scene(3D) 创建 map 实例 // Web maps和Web scenes是JSON格式构造的，包含map或scene的basemap、layers/ // layer styling、popups、legends、labels等设置，它们是通过ArcGIS Online map Viewer或 // ArcGIS Online scene viewer交互式的创建，ArcGIS Online或ArcGIS Enterprise会为它们分 @@ -86,54 +88,221 @@ export default { }); // 存进去的时候会被代理 this.view = view; - // setTimeout(()=>{ - // view.goTo( // go to point with a custom animation duration - // { center: [113.896193, 22.538811] }, - // { duration: 5000 } - // ); - // },5000) - // view交互 - // 这也是很重要的，view还负责用户交互和展示气泡弹窗popups，view提供多种类型的事件处理方法， - // 如鼠标点击、键盘输入、触屏交互、手柄控制等其他设备的输入。 - // 当用户点击地图时，默认行为是展示气泡弹窗popups（如果图层有预先配置的话），这个行为也可以被下列代码监听到点击事件 - // 使用`hitTest()`方法，找到用户点击的要素features + // Layers是Map中的数据集合。layers数据可以是在客户端创建的， + // 也可以是服务端的（ArcGIS Online|ArcGIS Enterprise|其他服务器） + // ArcGIS API 有很多图层Layer类来展示数据，它们都继承至`Layer`,不同的数据有与之对应的Layer类。 + /* + - FeatureLayer: 展示同一几何类型的地理几何要素数据 + - GraphicLayer: 展示独立的地理几何要素或文本注记 + - CSVLayer/KMLLayer/GeoJSONLayer: 展示符合文件格式的数据 + - TileLayer/VectorTileLayer: 展示basemaps和其它瓦片数据集（矢量瓦片） + - MapImageLayer: 动态渲染ArcGIS Server中的图层服务 + - ImageryLayer:展示遥感卫星或其它的图片数据 + */ - view.popupEnabled = false; // Disable the default popup behavior - - view.on("click", function(event) { // Listen for the click event - view.hitTest(event).then(function (hitTestResults){ // Search for features where the user clicked - if(hitTestResults.results) { - view.openPopup({ // open a popup to show some of the results - location: event.mapPoint, - title: "Hit Test Results", - content: hitTestResults.results.length + "Features Found" - }); + // this.addFeatureLayer(webScene); + // this.addGraphicsLayer(webScene); + this.addCSVLayer(webScene); + }, + addFeatureLayer(map){ + /** + * FeatureLayer是引用一个具有相同几何类型geometry和属性attributes字段的地理几何要素。 + * 图层的数据可以从内存中获取，也可以通过REST请求从服务端（ArcGIS Online|ArcGIS Enterprise）获取 + * FeatureLayer 在客户端和服务端都进行了高度优化，以实现快速显示，并支持各种其它功能，包括： + * - 用户交互和气泡弹窗展示 + * - 客户端过滤、查询和分析 + * - 在线编辑 + * - 数据驱动可视化 + * ArcGIS Developers和ArcGIS Online提供导入数据（如：GeoJSON|Excel|CSV|file geodatabases|shapefiles）的工具, + * 导入数据创建要素图层实例，作为服务端数据源（ArcGIS Online） + */ + // 方式一：直接在客户端内存中创建。 + let places = [ + { + "id": 1, + "address": "200 N Spring St, Los Angeles, CA 90012", + "longitude": 113.305, + "latitude": 23.185665 + }, + { + "id": 2, + "address": "419 N Fairfax Ave, Los Angeles, CA 90036", + "longitude": 113.315, + "latitude": 23.185665 + } + ] + // 第一步是将每个位置转换为具有属性attributes和几何属性geometry的图形对象Graphic。 + const graphics = places.map((place) => { + // 一个Graphic由 geometry、symbol、attributes、template组成 + return new Graphic({ + attributes: { + ObjectId: place.id, + address: place.address + }, + geometry: { + type: "point", + longitude: place.longitude, + latitude: place.latitude + }, + symbol: { + // autocasts as new SimpleMarkerSymbol() + type: "simple-marker", + color: [226, 119, 40], + outline: { + // autocasts as new SimpleLineSymbol() + color: [255, 255, 255], + width: 2 + } } - }) + }); }); - // 添加微件和UI组件到view中 - // view也是一个容纳弹出层微件和HTML元素的容器。`view.ui`提供一个DefaultUI容器，用来展示默认的微件。 - // 另外widgets微件和HTML元素可以通过 `view.ui.add`方法添加到view中。 - var searchWidget = new Search({ - view: view + // 第二步是创建FeatureLayer，实际创建一个FeatureLayer对象，创建时至少指定objectIdField、fields、renderer和source属性。 + /** + * - source:是用来创建要素的Graphic对象集合 + * - renderer：用来展示要素符号的渲染器 + * - objectIdField：要素标识的属性字段名称（id） + * - fields:一个JSON对象，属性 + * - popup Template:要素的信息弹窗模板 + */ + const featureLayer = new FeatureLayer({ + source: graphics, + renderer: { + type: "simple", // autocasts as new SimpleRenderer() + symbol: { // autocasts as new SimpleMarkerSymbol() + type: "simple-marker", + color: "#102A44", + outline: { // autocasts as new SimpleLineSymbol() + color: "#598DD8", + width: 2 + } + } + }, + popupTemplate: { // autocasts as new PopupTemplate() + title: "Places in Los Angeles", + content: [{ + type: "fields", + fieldInfos: [ + { + fieldName: "address", + label: "Address", + visible: true + } + ] + }] + }, + objectIdField: "ObjectID", // This must be defined when creating a layer from `Graphic` objects + fields: [ + { + name: "ObjectID", + alias: "ObjectID", + type: "oid" + }, + { + name: "address", + alias: "address", + type: "string" + } + ] }); - // Add the search widget to the top right corner of the view - view.ui.add(searchWidget, { - position: "top-right" + map.layers.add(featureLayer); + + + //方式二：引用服务端的数据源，一份洛杉矶的点数据 + var layer = new FeatureLayer({ + url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" }); + map.layers.add(layer); + + }, + addGraphicsLayer(map){ + /** + * Graphics 通常用来添加文本、图形形状、images图标. + * 创建Graphics layer最简单的方式就是创建一个graphic数组，传递给GraphicsLayer对象的graphics属性。 + * 每个Graphic都包含下列四个属性： + * - attribute：k-v键值对，用来存储要素的属性信息 + * - geometry：提供要素的几何位置信息，可以是Point、Polyline、Polygon对象 + * - popupTemplate：气泡弹窗的模板 + * - symbol：样式符号 + */ + var pointGraphic = new Graphic({ + attributes: { + name: "LA City Hall", + address: "200 N Spring St, Los Angeles, CA 90012" + }, + geometry: { + type: "point", // autocasts as new Point() + longitude: 113.305, + latitude: 23.185665 + }, + symbol: { + type: "simple-marker", // autocasts as new SimpleMarkerSymbol() + color: [ 226, 119, 40 ], + outline: { // autocasts as SimpleLineSymbol() + color: [ 255, 255, 255 ], + width: 2 + } + }, + popupTemplate: { // autocasts as new PopupTemplate() + title: "Places in Los Angeles", + content: [{ + type: "fields", + fieldInfos: [ + { + fieldName: "name", + label: "Name", + visible: true + }, + { + fieldName: "address", + label: "Address", + visible: true + } + ] + }] + }, + }); + + var graphicsLayer = new GraphicsLayer({ + graphics: [ pointGraphic ] + }); + + map.layers.add(graphicsLayer); + }, - goto(e){ - console.log("------------",this.view) - // 拿到的是一个代理对象，调用方法是会报错因为代理对象没有返回实际的值， - // 通过toRaw方法将从reactive对象中获取到原始数据 - toRaw(this.view).goTo( // go to point with a custom animation duration - { center: [113.896193, 22.538811] }, - { duration: 5000 } - ); + addCSVLayer(map){ + /** + * CSVLayer是基于CSV文件(.csv|.txt)解析的点图层，文件中必须要有代表点坐标的数据列。 + * 其中坐标数据的坐标系必须是WGS84的。 + * + */ + // 方式一：引用服务端数据源 + var earthquakesLayer = new CSVLayer({ + url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv", + copyright: "USGS Earthquakes", + latitudeField: "latitude", // Defaults to "latitude" + longitudeField: "longitude" // Defaults to "longitude" + }); + + // map.layers.add(earthquakesLayer) + + // 方式二：引用内存中的数据，通过一个blob URL + const csv = `name|year|latitude|Longitude + aspen|2020|40.418|20.553 + birch|2018|-118.123|35.888`; + + const blob = new Blob([csv], { + type: "plain/text" + }); + let url = URL.createObjectURL(blob); + + const layer = new CSVLayer({ + url: url + }); + map.layers.add(layer) } }, mounted(){ diff --git a/src/main.js b/src/main.js index 01433bc..c24c3d8 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,10 @@ import { createApp } from 'vue' import App from './App.vue' -createApp(App).mount('#app') +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import reouter from "./routers/index" +createApp(App) + .use(reouter) + .use(ElementPlus) + .mount('#app') diff --git a/src/routers/constRoutes.js b/src/routers/constRoutes.js new file mode 100644 index 0000000..4b08c85 --- /dev/null +++ b/src/routers/constRoutes.js @@ -0,0 +1,5 @@ +import TargetCom from '../components/Lession07Layers.vue' +const constRoutes = [ + { path: '/', component: TargetCom }, + ] + export default constRoutes \ No newline at end of file diff --git a/src/routers/index.js b/src/routers/index.js new file mode 100644 index 0000000..dc3d7c0 --- /dev/null +++ b/src/routers/index.js @@ -0,0 +1,10 @@ +import { createRouter, createWebHashHistory } from 'vue-router' +import constRoutes from './constRoutes' + +const router = createRouter({ + // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 + history: createWebHashHistory(), + routes: constRoutes, // `routes: routes` 的缩写 +}) + +export default router \ No newline at end of file diff --git a/src/views/Layout.vue b/src/views/Layout.vue new file mode 100644 index 0000000..f305a91 --- /dev/null +++ b/src/views/Layout.vue @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index 5662471..274c828 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,13 @@ const { defineConfig } = require('@vue/cli-service') +const path = require('path') +function resolve(dir){ + return path.join(__dirname,dir) +} module.exports = defineConfig({ transpileDependencies: true, - lintOnSave:false + lintOnSave:false, + chainWebpack:(config)=>{ + config.resolve.alias + .set("@",resolve('src')) + } })