初始化demo
This commit is contained in:
unknown
parent
2545594533
commit
cd3735f527
|
|
@ -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",
|
||||
|
|
|
|||
451
pnpm-lock.yaml
451
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -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类的方式。
|
||||
|
||||
-
|
||||
24
src/App.vue
24
src/App.vue
|
|
@ -1,26 +1,40 @@
|
|||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<Lession06 msg="Welcome to Your 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
lintOnSave:false
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue