一、創建VUE項目
1.假設Vscode、nodejs等已經安裝好了。
2.全局安裝vue-cli,vue-cli可以幫助我們快速構建Vue項目。
安裝命令:
npm install -g vue-cli
3.安裝webpack,它是打包js的工具
安裝命令:
npm install -g webpack
4.安裝完成之後就可以開始創建vue項目,首先創建一個文件夾用來存放你的項目,用vscode打開對應的文件夾,並在終端cd到對應的文件夾。比如我的文件夾就是myvue
創建項目命令,輸入回車:
vue init webpack myvue
二、引入ArcGIS
1、使用arcgis for js
安裝命令:
npm install --save esri-loader
三、創建GIS樣例
arcGIS for js: API地址
1、創建sceneview.vue
<template>
<div id="SceneView"></div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
data() {
return {};
},
mounted() {
this.createView();
},
methods: {
//創建視圖
createView() {
let options = {
url: "https://js.arcgis.com/4.15/",
css: "https://js.arcgis.com/4.15/esri/themes/light/main.css"
};
loadModules(["esri/Map", "esri/views/SceneView"], options).then(
([Map, SceneView]) => {
let map = new Map({
basemap: "streets",
ground: "world-elevation"
});
let view = new SceneView({
container: "SceneView", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
console.info(view, 111);
}
);
}
}
};
</script>
<style>
#SceneView {
position: absolute;
width: 100%;
height: 100%;
}
</style>
2、效果圖
四、代碼分析
1、創建視圖展示域
注:定義ID
<template>
<div id="SceneView"></div>
</template>
2、定義樣式,完美展示
<style>
#SceneView {
position: absolute;
width: 100%;
height: 100%;
}
</style>
3、引入GIS包
import { loadModules } from "esri-loader";
4、業務邏輯代碼分析