添加页面布局

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": {

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/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
       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:

src/App.vue

@@ -1,14 +1,17 @@
 <template>
-  <Lession06 msg="Welcome to Your App"/>
+  <TargetCom />
 </template>
 
 <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 esriConfig from "@arcgis/core/config.js";
@@ -18,8 +21,7 @@ esriConfig.apiKey = "AAPK1cfe97dcfec94638878da15e4491bde6bxFKMuZg_LW_d6b4qca-QdR
 export default {
   name: 'App',
   components: {
-    Lession01,
+    TargetCom
-    Lession06
   }
 }
 </script>

src/components/Lession07Layers.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="hello">
    <div id="viewDiv"></div>
-   <div class="btn-box">
-    <calcite-button @click="goto"> goTo</calcite-button>
-   </div>
   </div>
 </template>
 
@@ -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交互
+      // 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(){

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')

src/routers/constRoutes.js

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

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

src/views/Layout.vue

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

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'))
+  }
 })