1. 安装esri-loader依赖
npm i esri-loader --save-dev
2. 在页面中引入loadModules
import { loadModules } from 'esri-loader'
3. 使用loadMoudule建立arcgis服务链接,和引入相关模块,创建arcgis应用
createSceneView() {
let options = {
url: 'https://js.arcgis.com/4.14/',
css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
}
loadModules([
'esri/Map',
'esri/views/SceneView'
], options).then(([Map, SceneView]) => {
const map = new Map({
basemap: 'streets',
ground: 'world-elevation'
})
const view = new SceneView({
container: 'sceneview',
map: map,
scale: 50000000,
center: [-101.17, 21.78]
})
console.log(view)
})
}
4. 完整代码
<template>
<div id="sceneview">
</div>
</template>
<script>
import { loadModules } from 'esri-loader'
export default {
name: 'HomeView',
components: {
},
methods: {
createSceneView() {
let options = {
url: 'https://js.arcgis.com/4.14/',
css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
}
loadModules([
'esri/Map',
'esri/views/SceneView'
], options).then(([Map, SceneView]) => {
const map = new Map({
basemap: 'streets',
ground: 'world-elevation'
})
const view = new SceneView({
container: 'sceneview',
map: map,
scale: 50000000,
center: [-101.17, 21.78]
})
console.log(view)
})
}
},
mounted() {
this.createSceneView()
}
}
</script>
<style scoped>
#sceneview {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
5. 效果如图: