qiusj
/
arcgis-maps-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加页面布局

This commit is contained in:
unknown 2024-04-16 17:29:27 +08:00
parent cd3735f527
commit dd020f5235
9 changed files with 440 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -6,14 +6,15 @@
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@arcgis/core": "^4.29.10", "@arcgis/core": "^4.29.10",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-plus": "^2.6.3",
"esri-loader": "^3.7.0", "esri-loader": "^3.7.0",
"ncp": "^2.0.0", "ncp": "^2.0.0",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-router": "4",
"webpack": "^5.91.0" "webpack": "^5.91.0"
}, },
"devDependencies": { "devDependencies": {

168
pnpm-lock.yaml
View File

@ -11,6 +11,9 @@ dependencies:
core-js: core-js:
specifier: ^3.8.3 specifier: ^3.8.3
version: 3.36.1 version: 3.36.1
element-plus:
specifier: ^2.6.3
version: 2.6.3(vue@3.4.21)
esri-loader: esri-loader:
specifier: ^3.7.0 specifier: ^3.7.0
version: 3.7.0 version: 3.7.0
@ -20,6 +23,9 @@ dependencies:
vue: vue:
specifier: ^3.2.13 specifier: ^3.2.13
version: 3.4.21 version: 3.4.21
vue-router:
specifier: '4'
version: 4.3.0(vue@3.4.21)
webpack: webpack:
specifier: ^5.91.0 specifier: ^5.91.0
version: 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) version: 5.0.8(@vue/cli-service@5.0.8)(eslint@7.32.0)
'@vue/cli-service': '@vue/cli-service':
specifier: ~5.0.0 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: eslint:
specifier: ^7.32.0 specifier: ^7.32.0
version: 7.32.0 version: 7.32.0
@ -1345,11 +1351,24 @@ packages:
'@babel/helper-validator-identifier': 7.22.20 '@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0 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: /@discoveryjs/json-ext@0.5.7:
resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
engines: {node: '>=10.0.0'} engines: {node: '>=10.0.0'}
dev: true 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: /@eslint/eslintrc@0.4.3:
resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==} resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
engines: {node: ^10.12.0 || >=12.0.0} engines: {node: ^10.12.0 || >=12.0.0}
@ -1568,6 +1587,10 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/@sxzz/popperjs-es@2.11.7:
resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
dev: false
/@trysound/sax@0.2.0: /@trysound/sax@0.2.0:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}
@ -1665,6 +1688,16 @@ packages:
/@types/json-schema@7.0.15: /@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} 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: /@types/mime@1.3.5:
resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==} resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
dev: true dev: true
@ -1735,6 +1768,10 @@ packages:
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
dev: false dev: false
/@types/web-bluetooth@0.0.16:
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
dev: false
/@types/ws@8.5.10: /@types/ws@8.5.10:
resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
dependencies: dependencies:
@ -2063,7 +2100,7 @@ packages:
dependencies: dependencies:
'@babel/core': 7.24.4 '@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/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 '@vue/cli-shared-utils': 5.0.8
babel-loader: 8.3.0(@babel/core@7.24.4)(webpack@5.91.0) babel-loader: 8.3.0(@babel/core@7.24.4)(webpack@5.91.0)
thread-loader: 3.0.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 '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
eslint: '>=7.5.0' eslint: '>=7.5.0'
dependencies: 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 '@vue/cli-shared-utils': 5.0.8
eslint: 7.32.0 eslint: 7.32.0
eslint-webpack-plugin: 3.2.0(eslint@7.32.0)(webpack@5.91.0) eslint-webpack-plugin: 3.2.0(eslint@7.32.0)(webpack@5.91.0)
@ -2105,7 +2142,7 @@ packages:
peerDependencies: peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
dependencies: 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 '@vue/cli-shared-utils': 5.0.8
transitivePeerDependencies: transitivePeerDependencies:
- encoding - encoding
@ -2116,10 +2153,10 @@ packages:
peerDependencies: peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
dependencies: 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 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==} resolution: {integrity: sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==}
engines: {node: ^12.0.0 || >= 14.0.0} engines: {node: ^12.0.0 || >= 14.0.0}
hasBin: true hasBin: true
@ -2158,8 +2195,8 @@ packages:
'@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8) '@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-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8)
'@vue/cli-shared-utils': 5.0.8 '@vue/cli-shared-utils': 5.0.8
'@vue/component-compiler-utils': 3.3.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)(webpack@5.91.0) '@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 '@vue/web-component-wrapper': 1.3.0
acorn: 8.11.3 acorn: 8.11.3
acorn-walk: 8.3.2 acorn-walk: 8.3.2
@ -2329,10 +2366,10 @@ packages:
'@vue/compiler-dom': 3.4.21 '@vue/compiler-dom': 3.4.21
'@vue/shared': 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==} resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==}
dependencies: dependencies:
consolidate: 0.15.1 consolidate: 0.15.1(lodash@4.17.21)
hash-sum: 1.0.2 hash-sum: 1.0.2
lru-cache: 4.1.5 lru-cache: 4.1.5
merge-source-map: 1.1.0 merge-source-map: 1.1.0
@ -2398,6 +2435,10 @@ packages:
- whiskers - whiskers
dev: true dev: true
/@vue/devtools-api@6.6.1:
resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
dev: false
/@vue/reactivity@3.4.21: /@vue/reactivity@3.4.21:
resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==} resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==}
dependencies: dependencies:
@ -2432,6 +2473,31 @@ packages:
resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==} resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==}
dev: true 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: /@webassemblyjs/ast@1.12.1:
resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
dependencies: dependencies:
@ -2710,6 +2776,10 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true dev: true
/async-validator@4.2.5:
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
dev: false
/async@2.6.4: /async@2.6.4:
resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==} resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
dependencies: dependencies:
@ -3164,7 +3234,7 @@ packages:
engines: {node: '>=0.8'} engines: {node: '>=0.8'}
dev: true dev: true
/consolidate@0.15.1: /consolidate@0.15.1(lodash@4.17.21):
resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==} resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==}
engines: {node: '>= 0.10.0'} 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 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 optional: true
dependencies: dependencies:
bluebird: 3.7.2 bluebird: 3.7.2
lodash: 4.17.21
dev: true dev: true
/content-disposition@0.5.4: /content-disposition@0.5.4:
@ -3780,6 +3851,31 @@ packages:
/electron-to-chromium@1.4.730: /electron-to-chromium@1.4.730:
resolution: {integrity: sha512-oJRPo82XEqtQAobHpJIR3zW5YO3sSRRkPz2an4yxi1UvqhsGm54vR/wzTFV74a3soDOJ8CKW7ajOOX5ESzddwg==} 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: /emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
dev: true dev: true
@ -3856,7 +3952,6 @@ packages:
/escape-html@1.0.3: /escape-html@1.0.3:
resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
dev: true
/escape-string-regexp@1.0.5: /escape-string-regexp@1.0.5:
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@ -5016,6 +5111,18 @@ packages:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
dev: false 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: /lodash.debounce@4.0.8:
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
dev: true dev: true
@ -5050,7 +5157,6 @@ packages:
/lodash@4.17.21: /lodash@4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: true
/log-symbols@4.1.0: /log-symbols@4.1.0:
resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
@ -5129,6 +5235,10 @@ packages:
fs-monkey: 1.0.5 fs-monkey: 1.0.5
dev: true dev: true
/memoize-one@6.0.0:
resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
dev: false
/merge-descriptors@1.0.1: /merge-descriptors@1.0.1:
resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==} resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
dev: true dev: true
@ -5344,6 +5454,10 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/normalize-wheel-es@1.2.0:
resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
dev: false
/npm-run-path@2.0.2: /npm-run-path@2.0.2:
resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==} resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -6924,6 +7038,21 @@ packages:
engines: {node: '>= 0.8'} engines: {node: '>= 0.8'}
dev: true 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): /vue-eslint-parser@8.3.0(eslint@7.32.0):
resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==} resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -6946,7 +7075,7 @@ packages:
resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==} resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
dev: true 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==} resolution: {integrity: sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==}
peerDependencies: peerDependencies:
'@vue/compiler-sfc': ^3.0.8 '@vue/compiler-sfc': ^3.0.8
@ -6965,7 +7094,7 @@ packages:
vue-template-compiler: vue-template-compiler:
optional: true optional: true
dependencies: 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) css-loader: 6.11.0(webpack@5.91.0)
hash-sum: 1.0.2 hash-sum: 1.0.2
loader-utils: 1.4.2 loader-utils: 1.4.2
@ -7047,6 +7176,15 @@ packages:
webpack: 5.91.0 webpack: 5.91.0
dev: true 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: /vue-style-loader@4.1.3:
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==} resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
dependencies: dependencies:

20
src/App.vue
View File

@ -1,14 +1,17 @@
<template> <template>
<Lession06 msg="Welcome to Your App"/> <TargetCom />
</template> </template>
<script> <script>
import Lession01 from './components/Lession01.vue' // import Lession01 from './components/Lession01.vue'
import Lession02 from './components/Lession02.vue' // import Lession02 from './components/Lession02.vue'
import Lession03 from './components/Lession03.vue' // import Lession03 from './components/Lession03.vue'
import Lession04 from './components/Lession04.vue' // import Lession04 from './components/Lession04.vue'
import Lession05 from './components/Lession05.vue' // import Lession05 from './components/Lession05.vue'
import Lession06 from './components/Lession06.vue' // import Lession06 from './components/Lession06.vue'
// import TargetCom from './components/Lession07Layers.vue'
import TargetCom from './views/Layout.vue'
import "@arcgis/core/assets/esri/themes/light/main.css"; import "@arcgis/core/assets/esri/themes/light/main.css";
import esriConfig from "@arcgis/core/config.js"; import esriConfig from "@arcgis/core/config.js";
@ -18,8 +21,7 @@ esriConfig.apiKey = "AAPK1cfe97dcfec94638878da15e4491bde6bxFKMuZg_LW_d6b4qca-QdR
export default { export default {
name: 'App', name: 'App',
components: { components: {
Lession01, TargetCom
Lession06
} }
} }
</script> </script>

253
src/components/Lession07Layers.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div class="hello"> <div class="hello">
<div id="viewDiv"></div> <div id="viewDiv"></div>
<div class="btn-box">
<calcite-button @click="goto"> goTo</calcite-button>
</div>
</div> </div>
</template> </template>
@ -15,6 +12,11 @@ import WebMap from "@arcgis/core/WebMap.js";
import { toRaw } from "vue" import { toRaw } from "vue"
import "@esri/calcite-components/dist/components/calcite-button"; import "@esri/calcite-components/dist/components/calcite-button";
import Search from "@arcgis/core/widgets/Search.js"; 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 { export default {
name: 'HelloWorld', name: 'HelloWorld',
data(){ data(){
@ -45,7 +47,7 @@ export default {
// }); // });
// console.log(view) // 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/ // Web maps和Web scenes是JSON格式构造的，包含map或scene的basemap、layers/
// layer styling、popups、legends、labels等设置，它们是通过ArcGIS Online map Viewer或 // layer styling、popups、legends、labels等设置，它们是通过ArcGIS Online map Viewer或
// ArcGIS Online scene viewer交互式的创建，ArcGIS Online或ArcGIS Enterprise会为它们分 // ArcGIS Online scene viewer交互式的创建，ArcGIS Online或ArcGIS Enterprise会为它们分
@ -86,54 +88,221 @@ export default {
}); });
// 存进去的时候会被代理 // 存进去的时候会被代理
this.view = view; this.view = view;
// setTimeout(()=>{
// view.goTo( // go to point with a custom animation duration
// { center: [113.896193, 22.538811] },
// { duration: 5000 }
// );
// },5000)
// view交互 // Layers是Map中的数据集合。layers数据可以是在客户端创建的，
// 这也是很重要的，view还负责用户交互和展示气泡弹窗popups，view提供多种类型的事件处理方法， // 也可以是服务端的（ArcGIS Online|ArcGIS Enterprise|其他服务器）
// 如鼠标点击、键盘输入、触屏交互、手柄控制等其他设备的输入。 // ArcGIS API 有很多图层Layer类来展示数据，它们都继承至`Layer`,不同的数据有与之对应的Layer类。
// 当用户点击地图时，默认行为是展示气泡弹窗popups（如果图层有预先配置的话），这个行为也可以被下列代码监听到点击事件 /*
// 使用`hitTest()`方法，找到用户点击的要素features - FeatureLayer: 展示同一几何类型的地理几何要素数据
- GraphicLayer: 展示独立的地理几何要素或文本注记
- CSVLayer/KMLLayer/GeoJSONLayer: 展示符合文件格式的数据
- TileLayer/VectorTileLayer: 展示basemaps和其它瓦片数据集（矢量瓦片）
- MapImageLayer: 动态渲染ArcGIS Server中的图层服务
- ImageryLayer:展示遥感卫星或其它的图片数据
*/
view.popupEnabled = false; // Disable the default popup behavior // this.addFeatureLayer(webScene);
// this.addGraphicsLayer(webScene);
view.on("click", function(event) { // Listen for the click event this.addCSVLayer(webScene);
view.hitTest(event).then(function (hitTestResults){ // Search for features where the user clicked },
if(hitTestResults.results) { addFeatureLayer(map){
view.openPopup({ // open a popup to show some of the results /**
location: event.mapPoint, * FeatureLayer是引用一个具有相同几何类型geometry和属性attributes字段的地理几何要素。
title: "Hit Test Results", * 图层的数据可以从内存中获取，也可以通过REST请求从服务端（ArcGIS Online|ArcGIS Enterprise）获取
content: hitTestResults.results.length + "Features Found" * 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中 // 第二步是创建FeatureLayer，实际创建一个FeatureLayer对象，创建时至少指定objectIdField、fields、renderer和source属性。
// view也是一个容纳弹出层微件和HTML元素的容器。`view.ui`提供一个DefaultUI容器，用来展示默认的微件。 /**
// 另外widgets微件和HTML元素可以通过 `view.ui.add`方法添加到view中。 * - source:是用来创建要素的Graphic对象集合
var searchWidget = new Search({ * - renderer：用来展示要素符号的渲染器
view: view * - 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 map.layers.add(featureLayer);
view.ui.add(searchWidget, {
position: "top-right"
//方式二：引用服务端的数据源，一份洛杉矶的点数据
var layer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
}); });
map.layers.add(layer);
}, },
goto(e){ addGraphicsLayer(map){
console.log("------------",this.view) /**
// 拿到的是一个代理对象，调用方法是会报错因为代理对象没有返回实际的值， * Graphics 通常用来添加文本、图形形状、images图标.
// 通过toRaw方法将从reactive对象中获取到原始数据 * 创建Graphics layer最简单的方式就是创建一个graphic数组，传递给GraphicsLayer对象的graphics属性。
toRaw(this.view).goTo( // go to point with a custom animation duration * 每个Graphic都包含下列四个属性：
{ center: [113.896193, 22.538811] }, * - attribute：k-v键值对，用来存储要素的属性信息
{ duration: 5000 } * - 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);
},
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(){ mounted(){

8
src/main.js
View File

@ -1,4 +1,10 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.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')

5
src/routers/constRoutes.js Normal file
View File

@ -0,0 +1,5 @@
import TargetCom from '../components/Lession07Layers.vue'
const constRoutes = [
{ path: '/', component: TargetCom },
]
export default constRoutes

10
src/routers/index.js Normal file
View File

@ -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

32
src/views/Layout.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="common-layout">
<el-container>
<el-header class="layout-header">Header</el-header>
<el-container>
<el-aside width="200px" class="layout-aside">Aside</el-aside>
<el-main class="layout-main">
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
.common-layout,.el-container{
height: 100%;
width: 100%;
}
.layout-header{
background-color: aqua;
}
.layout-aside{
background-color: burlywood;
}
.layout-main{
background-color: aliceblue;
}
</style>

10
vue.config.js
View File

@ -1,5 +1,13 @@
const { defineConfig } = require('@vue/cli-service') const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
lintOnSave:false lintOnSave:false,
chainWebpack:(config)=>{
config.resolve.alias
.set("@",resolve('src'))
}
}) })