ArcGISAPIforJS4.x+Vue之显⽰场景（3D）、距离⾯积测量、光照变换、天⽓
变换
系列⽂章⽬录
【1】 ArcGIS API for JS 4.x + Vue 之 显⽰地图和添加点线⾯
英文证明信【2】 ArcGIS API for JS 4.x + Vue 之 显⽰场景（3D）、距离⾯积测量、光照变换、天⽓变换
⽂章⽬录
前⾔
提⽰：这⾥可以添加本⽂要记录的⼤概内容：
本⽂介绍的是ArcGIS API for JS 4.x版本在Vue上的使⽤，且假设阅读者对Vue有⼀定的了解。
1.假设VScode、nodejs等已经安装好了；
2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项⽬；
3.安装webpack，它是打包js的⼯具；
4.创建Vue项⽬。
提⽰：以下是本篇⽂章正⽂内容，下⾯案例可供参考
⼀、显⽰场景（3D）
安装依赖
从 ArcGIS API for JavaScript v4.18 开始，您可以尝试安装@arcgis/core并使⽤ ES 模块进⾏构建， ⽽不是使⽤ esri-loader。
npm install @arcgis/core --save
1. 添加模块
import Map from"@arcgis/core/Map";
手动变焦import SceneView from"@arcgis/core/views/SceneView";
import esriConfig from"@arcgis/core/config";
2. 引⼊CSS样式
@import"/4.22/@arcgis/core/asts/esri/themes/dark/main.css";
若要在本地导⼊样式可查看。
3. 获取密钥
⼀个API 密钥是访问ArcGIS 服务所必需的。
1. 转到你的以获取API 密钥.
2. 复制密钥，因为它将在下⼀步中使⽤。
若没有ArcGIS账号，直接在跳转页⾯注册即可。（注意不要使⽤企鹅邮箱，如果emit长时间转圈需要搭梯⼦）
4. 创建场景
使⽤⼀个Map设置底图图层和海拔表⾯并应⽤API 密钥，场景使⽤⾼程图层中的信息来确定ground将在地图上呈现的（表⾯）⾼度。
沉静
esriConfig.apiKey ='你的API密钥'
// 创建场景
this.map =new Map({
bamap:"arcgis-topographic",//底图图层
ground:"world-elevation",//⾼程图层
})
5. 创建场景视图
使⽤⼀个SceneView类来设置要绘制的地图和图层，并定义⼀个camera位置。camera是⽤于确定SceneView可见范围内的⼀个点。tilt是相机指向地⾯的⾓度。
// 创建场景视图
this.mapView =new SceneView({
反躬自省
map:this.map,
container:"viewDiv",//地图容器id
camera:{//相机设置
position:{
x:-118.808,//经度
y:33.961,//纬度
z:2000//⾼度
},
tilt:75//相机⾓度
}
})
参考例⼦
⽰例图：
科目一模拟考试题代码如下（⽰例）：
<template>
<div>
<div id="viewDiv"></div>
</div>
</template>
<script>
import Map from"@arcgis/core/Map";
import SceneView from"@arcgis/core/views/SceneView";
import esriConfig from"@arcgis/core/config";
export default{
name:'MapDisplay3D',
data(){
return{
map:null,
mapView:null,
}
},
狮子的画法
methods:{
initMap(){
esriConfig.apiKey ='你的ApiKey'
// 创建场景
this.map =new Map({
bamap:"arcgis-topographic",//底图图层
ground:"world-elevation",//⾼程图层
})
/
/ 创建场景视图
this.mapView =new SceneView({
map:this.map,
container:"viewDiv",//地图容器id
camera:{//相机设置
position:{
x:-118.808,//经度
y:33.961,//纬度
z:2000//⾼度
},
tilt:75//相机⾓度
}
})
},
},
},
mounted(){
this.initMap()
},
}
</script>
<style scoped>
@import"/4.22/@arcgis/core/asts/esri/themes/dark/main.css"; #viewDiv{
height:80vh;
width:100%;
}
</style>
⼆、距离、⾯积测量
1. 添加模块
import DirectLineMeasurement3D from"@arcgis/core/widgets/DirectLineMeasurement3D"; import AreaMeasurement3D from"@arcgis/core/widgets/AreaMeasurement3D";
import promiUtils from"@arcgis/core/core/promiUtils";
2. 距离测量控件
// 创建Web场景
initWebScene(){
esriConfig.apiKey ='你的ApiKey'
// 创建Web场景
this.map =new WebScene({
portalItem:{
id:"b6c889ff1f684cd7a65301984b80b93d"
}
范喜
})
// 创建场景视图
this.mapView =new SceneView({
map:this.map,
container:"viewDiv",//地图容器id
})
// 使⽤DirectLineMeasurement3D类创建距离测量控件
this.activeWidget =new DirectLineMeasurement3D({
view:this.mapView
})
// skip the initial 'new measurement' button
this.activeWidget.viewModel.start().catch((error)=>{
if(promiUtils.isAbortError(error)){
return;// 不显⽰中⽌错误
}
throw error;// 抛出其他可能有⽤的错误
})
// 添加距离测量控件
this.mapView.ui.add(this.activeWidget,"top-right")
//销毁距离测量控件
this.activeWidget.destroy()
},
3. ⾯积测量控件
// 创建Web场景
initWebScene(){
esriConfig.apiKey ='你的ApiKey'
/
/ 创建Web场景
this.map =new WebScene({
portalItem:{孩子的心理
id:"b6c889ff1f684cd7a65301984b80b93d"
}
})
// 创建场景视图
this.mapView =new SceneView({
map:this.map,
container:"viewDiv",//地图容器id
})
/
/ 使⽤AreaMeasurement3D类创建⾯积测量控件this.activeWidget =new AreaMeasurement3D({
view:this.mapView
})
// skip the initial 'new measurement' button
this.activeWidget.viewModel.start().catch((error)=>{ if(promiUtils.isAbortError(error)){
return;// 不显⽰中⽌错误
}
throw error;// 抛出其他可能有⽤的错误
})
// 添加⾯积测量控件
this.mapView.ui.add(this.activeWidget,"top-right") //销毁⾯积测量控件
this.activeWidget.destroy()
},
参考例⼦
