初始化demo

package.json

@@ -6,10 +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",
-    "vue": "^3.2.13"
+    "esri-loader": "^3.7.0",
+    "ncp": "^2.0.0",
+    "vue": "^3.2.13",
+    "webpack": "^5.91.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

public/mk/Lession01.md

@@ -0,0 +1,27 @@
+## 初始化项目
+### 1.基础类
+#### 1.1 Map
+  `Map`类只是一个用来管理图层（layers，basemaps）的容器，包含了很多2D和3D图层的存储和管理的属性和方法。图层可以添加到map和被移除map中，而图层的范围的渲染需要通过`MapView`(2D数据)和`SceneView`(3D数据)。
+> 一个map实例可以被多个View引用
+
+常用属性：
+
+ | name | type | description |
+ 
+
+
+#### 1.2 View
+ `View`类是负责与map容器中的图层和底图的展示及交互，还有一些气泡弹窗、微件、以及地图定位等。
+ map只是一个容器而已，view渲染Map和其中的一系列图层，展示给用户。
+它有两种类型：
+- `MapView`(2D)：负责在2D场景下渲染图层。
+- `SceneView`(3D)：负责在三维场景下渲染图层。
+`View`是一个基础类（抽象类），没有构造器，创建一个view实例必须通过`MapView`或`SceneView`来创建。
+
+### 2.工作流程
+通过`Map`类创建map实例，再将其传递给`View`对象，展示2D通过`MapView`创建，如果展示3D的内容则通过`SceneView`创建
+
+创建Map实例的方式：
+- 通过new一个Map类的方式。
+
+- 

src/App.vue

@@ -1,26 +1,40 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+  <Lession06 msg="Welcome to Your App"/>
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Lession01 from './components/Lession01.vue'
+import Lession02 from './components/Lession02.vue'
+import Lession03 from './components/Lession03.vue'
+import Lession04 from './components/Lession04.vue'
+import Lession05 from './components/Lession05.vue'
+import Lession06 from './components/Lession06.vue'
+
+import "@arcgis/core/assets/esri/themes/light/main.css";
+import esriConfig from "@arcgis/core/config.js";
+// esriConfig.assetsPath = "./assets";
+esriConfig.apiKey = "AAPK1cfe97dcfec94638878da15e4491bde6bxFKMuZg_LW_d6b4qca-QdRPvGjZtOGgAZ40dO1QOxnktWJcu66FJ4HyNMbCZxJT";
     
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Lession01,
+    Lession06
   }
 }
 </script>
 
 <style>
+html,body,
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  height:100vh;
+  width:100%;
+  margin:0;
+  padding: 0;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Lession01.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import MapView from "@arcgis/core/views/MapView.js";
+
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      const map = new Map({
+        //basemap: "topo-vector"
+        basemap: "arcgis-topographic" // Basemap layer
+      });
+      // Create a MapView instance (for 2D viewing)
+      const view = new MapView({
+        map: map,  // References a Map instance
+        center: [-118.805, 34.027],
+        zoom: 13, // scale: 72223.819286
+        container: "viewDiv",
+        constraints: {
+          snapToZoom: false
+        }
+      });
+      console.log(view)
+    },
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+</style>

src/components/Lession02.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+  </div>
+</template>
+
+<script>
+import MapView from "@arcgis/core/views/MapView.js";
+import WebMap from "@arcgis/core/WebMap.js";
+import ScaleBar from "@arcgis/core/widgets/ScaleBar.js";
+import Legend from "@arcgis/core/widgets/Legend.js";
+
+export default {
+  name: 'Lession02',
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      /*
+        加载一个arcgis online上面的服务，需要有一个 arcgis 开发者账号，配置API key.
+      */
+      const webmap = new WebMap({
+        portalItem: {
+          id: "41281c51f9de45edaf1c8ed44bb10e30"
+        }
+      });
+      // Create a MapView instance (for 2D viewing)
+      const view = new MapView({
+        map: webmap,  // References a Map instance
+        container: "viewDiv",
+       
+      });
+      const scalebar = new ScaleBar({
+        view: view
+      });
+
+      view.ui.add(scalebar, "bottom-left");
+      const legend = new Legend ({
+        view: view
+      });
+      view.ui.add(legend, "top-right");
+
+      console.log(view)
+    },
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+</style>

src/components/Lession03.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+    <div id="basemapStyles" class="esri-widget">
+      <calcite-label>Basemap style</calcite-label>
+      <calcite-combobox id="styleCombobox" selection-mode="single" clear-disabled>
+        <calcite-combobox-item value="arcgis/navigation" text-label="arcgis/navigation"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/navigation-night" text-label="arcgis/navigation-night"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets" text-label="arcgis/streets"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets-relief" text-label="arcgis/streets-relief"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets-night" text-label="arcgis/streets-night"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/outdoor" text-label="arcgis/outdoor"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/imagery" text-label="arcgis/imagery"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/topographic" text-label="arcgis/topographic" selected></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/terrain" text-label="arcgis/terrain"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/oceans" text-label="arcgis/oceans"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/light-gray" text-label="arcgis/light-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/dark-gray" text-label="arcgis/dark-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/human-geography" text-label="arcgis/human-geography"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/human-geography-dark" text-label="arcgis/human-geography-dark"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/charted-territory" text-label="arcgis/charted-territory"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/colored-pencil" text-label="arcgis/colored-pencil"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/nova" text-label="arcgis/nova"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/modern-antique" text-label="arcgis/modern-antique"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/midcentury" text-label="arcgis/midcentury"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/newspaper" text-label="arcgis/newspaper"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/standard" text-label="osm/standard"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/standard-relief" text-label="osm/standard-relief"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/navigation" text-label="osm/navigation"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/navigation-dark" text-label="osm/navigation-dark"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/streets" text-label="osm/streets"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/hybrid" text-label="osm/hybrid"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/light-gray" text-label="osm/light-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/dark-gray" text-label="osm/dark-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/blueprint" text-label="osm/blueprint"></calcite-combobox-item>
+      </calcite-combobox>
+    </div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import MapView from "@arcgis/core/views/MapView.js";
+import "@esri/calcite-components/dist/components/calcite-combobox";
+import "@esri/calcite-components/dist/components/calcite-combobox-item";
+export default {
+  name: 'Lession03',
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      /*
+        底图的选择
+      */
+      const map = new Map({
+        basemap: "arcgis/topographic" // basemap styles service
+      });
+      const view = new MapView({
+        map: map,
+        center: [-118.805, 34.027], // Longitude, latitude
+        zoom: 13, // Zoom level
+        container: "viewDiv" // Div element
+      });
+      const updateBasemapStyle = (basemapId) => {
+        console.log("变化前："+ view.map.basemap.title);
+        view.map.basemap = basemapId;
+        // console.log("变化后："+ view.map.basemap.title);
+      };
+      const basemapStylesDiv = document.getElementById("basemapStyles");
+      view.ui.add(basemapStylesDiv, "top-right");
+
+      const styleCombobox = document.getElementById("styleCombobox");
+      styleCombobox.addEventListener("calciteComboboxChange", (event) => {
+        updateBasemapStyle(event.target.value);
+      });
+
+      console.log(view)
+    },
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+#basemapStyles {
+  width: 250px;
+  padding: 10px;
+}
+@import "@esri/calcite-components/dist/calcite/calcite.css"
+</style>

src/components/Lession04.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+    <div id="basemapStyles" class="esri-widget">
+      <calcite-label>Basemap style</calcite-label>
+      <calcite-combobox id="styleCombobox" selection-mode="single" clear-disabled>
+        <calcite-combobox-item value="arcgis/navigation" text-label="arcgis/navigation"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/navigation-night" text-label="arcgis/navigation-night"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets" text-label="arcgis/streets"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets-relief" text-label="arcgis/streets-relief"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/streets-night" text-label="arcgis/streets-night"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/outdoor" text-label="arcgis/outdoor"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/imagery" text-label="arcgis/imagery"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/topographic" text-label="arcgis/topographic" selected></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/terrain" text-label="arcgis/terrain"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/oceans" text-label="arcgis/oceans"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/light-gray" text-label="arcgis/light-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/dark-gray" text-label="arcgis/dark-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/human-geography" text-label="arcgis/human-geography"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/human-geography-dark" text-label="arcgis/human-geography-dark"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/charted-territory" text-label="arcgis/charted-territory"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/colored-pencil" text-label="arcgis/colored-pencil"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/nova" text-label="arcgis/nova"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/modern-antique" text-label="arcgis/modern-antique"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/midcentury" text-label="arcgis/midcentury"></calcite-combobox-item>
+        <calcite-combobox-item value="arcgis/newspaper" text-label="arcgis/newspaper"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/standard" text-label="osm/standard"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/standard-relief" text-label="osm/standard-relief"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/navigation" text-label="osm/navigation"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/navigation-dark" text-label="osm/navigation-dark"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/streets" text-label="osm/streets"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/hybrid" text-label="osm/hybrid"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/light-gray" text-label="osm/light-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/dark-gray" text-label="osm/dark-gray"></calcite-combobox-item>
+        <calcite-combobox-item value="osm/blueprint" text-label="osm/blueprint"></calcite-combobox-item>
+      </calcite-combobox>
+      <div id="basemapLanguage" class="esri-widget">
+        <calcite-label>Basemap language</calcite-label>
+        <calcite-combobox id="languageCombobox" selection-mode="single" clear-disabled="true">
+            <calcite-combobox-item value="global" text-label="Global"></calcite-combobox-item>
+            <calcite-combobox-item value="local" text-label="Local"></calcite-combobox-item>
+            <calcite-combobox-item value="ar" text-label="Arabic"></calcite-combobox-item>
+            <calcite-combobox-item value="bs" text-label="Bosnian"></calcite-combobox-item>
+            <calcite-combobox-item value="ca" text-label="Catalan"></calcite-combobox-item>
+            <calcite-combobox-item value="zh-HK" text-label="Chinese (Hong Kong)"></calcite-combobox-item>
+            <calcite-combobox-item value="zh-CN" text-label="Chinese (Simplified)"></calcite-combobox-item>
+            <calcite-combobox-item value="zh-TW" text-label="Chinese (Taiwan)"></calcite-combobox-item>
+            <calcite-combobox-item value="hr" text-label="Croatian"></calcite-combobox-item>
+            <calcite-combobox-item value="cs" text-label="Czech"></calcite-combobox-item>
+            <calcite-combobox-item value="da" text-label="Danish"></calcite-combobox-item>
+            <calcite-combobox-item value="nl" text-label="Dutch"></calcite-combobox-item>
+            <calcite-combobox-item value="en" text-label="English"></calcite-combobox-item>
+            <calcite-combobox-item value="et" text-label="Estonian"></calcite-combobox-item>
+            <calcite-combobox-item value="fi" text-label="Finnish"></calcite-combobox-item>
+            <calcite-combobox-item value="fr" text-label="French"></calcite-combobox-item>
+            <calcite-combobox-item value="de" text-label="German"></calcite-combobox-item>
+            <calcite-combobox-item value="el" text-label="Greek"></calcite-combobox-item>
+            <calcite-combobox-item value="he" text-label="Hebrew"></calcite-combobox-item>
+            <calcite-combobox-item value="hu" text-label="Hungarian"></calcite-combobox-item>
+            <calcite-combobox-item value="id" text-label="Indonesian"></calcite-combobox-item>
+            <calcite-combobox-item value="it" text-label="Italian"></calcite-combobox-item>
+            <calcite-combobox-item value="ja" text-label="Japanese"></calcite-combobox-item>
+            <calcite-combobox-item value="ko" text-label="Korean"></calcite-combobox-item>
+            <calcite-combobox-item value="lv" text-label="Latvian"></calcite-combobox-item>
+            <calcite-combobox-item value="lt" text-label="Lithuanian"></calcite-combobox-item>
+            <calcite-combobox-item value="nb" text-label="Norwegian"></calcite-combobox-item>
+            <calcite-combobox-item value="pl" text-label="Polish"></calcite-combobox-item>
+            <calcite-combobox-item value="pt-BR" text-label="Portuguese (Brazil)"></calcite-combobox-item>
+            <calcite-combobox-item value="pt-PT" text-label="Portuguese (Portugal)"></calcite-combobox-item>
+            <calcite-combobox-item value="ro" text-label="Romanian"></calcite-combobox-item>
+            <calcite-combobox-item value="ru" text-label="Russian"></calcite-combobox-item>
+            <calcite-combobox-item value="sr" text-label="Serbian"></calcite-combobox-item>
+            <calcite-combobox-item value="es" text-label="Spanish" selected></calcite-combobox-item>
+            <calcite-combobox-item value="sv" text-label="Swedish"></calcite-combobox-item>
+            <calcite-combobox-item value="th" text-label="Thai"></calcite-combobox-item>
+            <calcite-combobox-item value="tr" text-label="Turkish"></calcite-combobox-item>
+            <calcite-combobox-item value="uk" text-label="Ukrainian"></calcite-combobox-item>
+            <calcite-combobox-item value="vi" text-label="Vietnamese"></calcite-combobox-item>
+        </calcite-combobox>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import MapView from "@arcgis/core/views/MapView.js";
+import "@esri/calcite-components/dist/components/calcite-combobox";
+import "@esri/calcite-components/dist/components/calcite-combobox-item";
+import * as intl from "@arcgis/core/intl.js";
+export default {
+  name: 'Lession04',
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      intl.setLocale("es");
+      /*
+        底图的选择,设置地图的语言language
+      */
+      const map = new Map({
+        basemap: "arcgis/outdoor", // basemap styles service
+        language: "es"
+      });
+      const view = new MapView({
+        map: map,
+        center: [-118.805, 34.027], // Longitude, latitude
+        zoom: 13, // Zoom level
+        container: "viewDiv" // Div element
+      });
+
+      // 切换底图
+      const updateBasemapStyle = (basemapId) => {
+        console.log("变化前："+ view.map.basemap.title);
+        view.map.basemap = basemapId;
+      };
+      const basemapStylesDiv = document.getElementById("basemapStyles");
+      view.ui.add(basemapStylesDiv, "top-right");
+
+      const styleCombobox = document.getElementById("styleCombobox");
+      styleCombobox.addEventListener("calciteComboboxChange", (event) => {
+        updateBasemapStyle(event.target.value);
+      });
+
+
+      // 切换语言
+      const updateBasemapLanguage = (languageCode) => {
+          intl.setLocale(languageCode);
+          view.map.basemap = {
+              style: {
+                  id: "arcgis/outdoor",
+                  language: languageCode
+              }
+          }
+      };
+      const basemapLanguage = document.getElementById("basemapLanguage");
+      // add to the view UI
+      view.ui.add(basemapLanguage, "top-right");
+
+      const languageCombobox = document.getElementById("languageCombobox");
+      // when the combobox value changes, update the basemap language
+      languageCombobox.addEventListener("calciteComboboxChange", (event) => {
+          updateBasemapLanguage(event.target.value);
+      });
+    },
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+#basemapStyles {
+  width: 250px;
+  padding: 10px;
+}
+#basemapLanguage {
+    width: 200px;
+    padding: 10px;
+}
+@import "@esri/calcite-components/dist/calcite/calcite.css"
+</style>

src/components/Lession05.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import MapView from "@arcgis/core/views/MapView.js";
+import Graphic from "@arcgis/core/Graphic.js";
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+export default {
+  name: 'Lession05',
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      /*
+        添加点线面
+      */
+      const map = new Map({
+        basemap: "arcgis/outdoor" // basemap styles service
+      });
+      const view = new MapView({
+        map: map,
+        center: [-118.805, 34.027], // Longitude, latitude
+        zoom: 13, // Zoom level
+        container: "viewDiv" // Div element
+      });
+
+      const graphicsLayer = new GraphicsLayer();
+      map.add(graphicsLayer);
+      const popupTemplate = {
+          title: "{Name}",
+          content: "{Description}"
+      }
+      const attributes = {
+          Name: "Graphic",
+          Description: "I am a polygon"
+      }
+      const point = { //Create a point
+          type: "point",
+          longitude: -118.80657463861,
+          latitude: 34.0005930608889
+      };
+      const simpleMarkerSymbol = {
+          type: "simple-marker",
+          color: [226, 119, 40],  // Orange
+          outline: {
+              color: [255, 255, 255], // White
+              width: 1
+          }
+      };
+      // Graphic将会在构造器中转换点geometry和symbol样式
+      const pointGraphic = new Graphic({
+          geometry: point,
+          symbol: simpleMarkerSymbol
+      });
+      graphicsLayer.add(pointGraphic);
+
+      // Create a line geometry
+      const polyline = {
+          type: "polyline",
+          paths: [
+              [-118.821527826096, 34.0139576938577], //Longitude, latitude
+              [-118.814893761649, 34.0080602407843], //Longitude, latitude
+              [-118.808878330345, 34.0016642996246]  //Longitude, latitude
+          ]
+      };
+      const simpleLineSymbol = {
+          type: "simple-line",
+          color: [226, 119, 40], // Orange
+          width: 2
+      };
+      const polylineGraphic = new Graphic({
+          geometry: polyline,
+          symbol: simpleLineSymbol
+      });
+      graphicsLayer.add(polylineGraphic);
+
+
+      // Create a polygon geometry
+      const polygon = {
+          type: "polygon",
+          rings: [
+              [-118.818984489994, 34.0137559967283], //Longitude, latitude
+              [-118.806796597377, 34.0215816298725], //Longitude, latitude
+              [-118.791432890735, 34.0163883241613], //Longitude, latitude
+              [-118.79596686535, 34.008564864635],   //Longitude, latitude
+              [-118.808558110679, 34.0035027131376]  //Longitude, latitude
+          ]
+      };
+
+      const simpleFillSymbol = {
+          type: "simple-fill",
+          color: [227, 139, 79, 0.8],  // Orange, opacity 80%
+          outline: {
+              color: [255, 255, 255],
+              width: 1
+          }
+      };
+      const polygonGraphic = new Graphic({
+          geometry: polygon,
+          symbol: simpleFillSymbol,
+          popupTemplate,
+          attributes
+      });
+      graphicsLayer.add(polygonGraphic);
+
+
+       
+    },
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+#basemapStyles {
+  width: 250px;
+  padding: 10px;
+}
+#basemapLanguage {
+    width: 200px;
+    padding: 10px;
+}
+@import "@esri/calcite-components/dist/calcite/calcite.css"
+</style>

src/components/Lession06.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+   <div class="btn-box">
+    <calcite-button @click="goto"> goTo</calcite-button>
+   </div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import SceneView from "@arcgis/core/views/SceneView.js";
+import WebScene from "@arcgis/core/WebScene.js";
+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";
+export default {
+  name: 'HelloWorld',
+  data(){
+    return {
+      view:null
+    }
+  },
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      // 创建Map的第一种方式，new Map(),同时指定一个basemap
+      // const map = new Map({
+      //   //basemap: "topo-vector",
+      //   basemap: "arcgis-topographic", // Basemap layer
+      //   ground: "world-elevation"
+      // });
+      // // Create a SceneView instance (for 3D viewing)
+      // const view = new SceneView({
+      //   map: map,  // References a Map instance
+      //   center: [-118.805, 34.027],
+      //   zoom: 13, // scale: 72223.819286
+      //   container: "viewDiv",
+      //   constraints: {
+      //     snapToZoom: false
+      //   }
+      // });
+      // console.log(view)
+
+      // 通过 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会为它们分
+      // 配一个唯一的ID，并作为portal items存储.
+      // WebMap或WebSecne可以通过它们的id来加载服务
+      // 
+      const webScene = new WebScene({                    // Define the web scene reference
+        portalItem: {
+          id: "d9dcd5c18cd5427ba9861e6e1a70d703",
+          portal: "https://qiushijie.maps.arcgis.com/"               // Default: The ArcGIS Online Portal
+        }
+      });
+      const webMap = new WebMap({                    // Define the web scene reference
+        portalItem: {
+          id: "19f428303bf64cfab132dd407abe6eed",
+          portal: "https://qiushijie.maps.arcgis.com/"               // Default: The ArcGIS Online Portal
+        }
+      });
+      
+      // const view = new SceneView({                       // Load the web scene
+      //   map: webScene,
+      //   container: "viewDiv"
+      // });
+
+      // 3D修改地图初始化姿态
+      // 1、通过camera属性修改地图展示的位置
+      // 2、通过center和zoom来确定
+      const view = new SceneView({                       // Load the web scene
+        map: webScene,
+        container: "viewDiv",
+        camera:{
+          position:[113.305,23.085665,1300],
+          heading:15, // direction the camera is looking
+          tilt:65 // tilt of the camera relative to the ground
+        },
+        // center: [ 113.349931,23.115665 ],         // The center of the map as lon/lat
+        // zoom: 13      
+      });
+      // 存进去的时候会被代理
+      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
+
+      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"
+            });
+          }
+        })
+      });
+
+      // 添加微件和UI组件到view中
+      // view也是一个容纳弹出层微件和HTML元素的容器。`view.ui`提供一个DefaultUI容器，用来展示默认的微件。
+      // 另外widgets微件和HTML元素可以通过 `view.ui.add`方法添加到view中。
+      var searchWidget = new Search({
+        view: view
+      });
+
+      // Add the search widget to the top right corner of the view
+      view.ui.add(searchWidget, {
+        position: "top-right"
+      });
+
+    },
+    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 }
+      );
+    }
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+.btn-box{
+  position: absolute;
+  top: 50px;
+  left: 80px;
+}
+</style>

src/components/Lession07Layers.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="hello">
+   <div id="viewDiv"></div>
+   <div class="btn-box">
+    <calcite-button @click="goto"> goTo</calcite-button>
+   </div>
+  </div>
+</template>
+
+<script>
+import Map from "@arcgis/core/Map.js";
+import SceneView from "@arcgis/core/views/SceneView.js";
+import WebScene from "@arcgis/core/WebScene.js";
+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";
+export default {
+  name: 'HelloWorld',
+  data(){
+    return {
+      view:null
+    }
+  },
+  props: {
+    msg: String
+  },
+  methods:{
+    initMap(){
+      // 创建Map的第一种方式，new Map(),同时指定一个basemap
+      // const map = new Map({
+      //   //basemap: "topo-vector",
+      //   basemap: "arcgis-topographic", // Basemap layer
+      //   ground: "world-elevation"
+      // });
+      // // Create a SceneView instance (for 3D viewing)
+      // const view = new SceneView({
+      //   map: map,  // References a Map instance
+      //   center: [-118.805, 34.027],
+      //   zoom: 13, // scale: 72223.819286
+      //   container: "viewDiv",
+      //   constraints: {
+      //     snapToZoom: false
+      //   }
+      // });
+      // console.log(view)
+
+      // 通过 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会为它们分
+      // 配一个唯一的ID，并作为portal items存储.
+      // WebMap或WebSecne可以通过它们的id来加载服务
+      // 
+      const webScene = new WebScene({                    // Define the web scene reference
+        portalItem: {
+          id: "d9dcd5c18cd5427ba9861e6e1a70d703",
+          portal: "https://qiushijie.maps.arcgis.com/"               // Default: The ArcGIS Online Portal
+        }
+      });
+      const webMap = new WebMap({                    // Define the web scene reference
+        portalItem: {
+          id: "19f428303bf64cfab132dd407abe6eed",
+          portal: "https://qiushijie.maps.arcgis.com/"               // Default: The ArcGIS Online Portal
+        }
+      });
+      
+      // const view = new SceneView({                       // Load the web scene
+      //   map: webScene,
+      //   container: "viewDiv"
+      // });
+
+      // 3D修改地图初始化姿态
+      // 1、通过camera属性修改地图展示的位置
+      // 2、通过center和zoom来确定
+      const view = new SceneView({                       // Load the web scene
+        map: webScene,
+        container: "viewDiv",
+        camera:{
+          position:[113.305,23.085665,1300],
+          heading:15, // direction the camera is looking
+          tilt:65 // tilt of the camera relative to the ground
+        },
+        // center: [ 113.349931,23.115665 ],         // The center of the map as lon/lat
+        // zoom: 13      
+      });
+      // 存进去的时候会被代理
+      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
+
+      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"
+            });
+          }
+        })
+      });
+
+      // 添加微件和UI组件到view中
+      // view也是一个容纳弹出层微件和HTML元素的容器。`view.ui`提供一个DefaultUI容器，用来展示默认的微件。
+      // 另外widgets微件和HTML元素可以通过 `view.ui.add`方法添加到view中。
+      var searchWidget = new Search({
+        view: view
+      });
+
+      // Add the search widget to the top right corner of the view
+      view.ui.add(searchWidget, {
+        position: "top-right"
+      });
+
+    },
+    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 }
+      );
+    }
+  },
+  mounted(){
+    this.initMap();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello,#viewDiv{
+  height:100%;
+  width:100%;
+}
+.btn-box{
+  position: absolute;
+  top: 50px;
+  left: 80px;
+}
+</style>

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  lintOnSave:false
 })