云主机建站,做自己照片视频网站,网站服务公司代买空间有无义务,wordpress主题菜单目录 SceneView类的常用属性SceneView类的常用方法vue3中使用SceneView类创建三维地球项目准备引入ArcGIS API创建Vue组件在OnMounted中调用初始化函数initArcGisMap创建Camera对象Camera的常用属性Camera的常用方法 要在Vue 3中使用ArcGIS API for JavaScript加载和展示三维地… 目录 SceneView类的常用属性SceneView类的常用方法vue3中使用SceneView类创建三维地球项目准备引入ArcGIS API创建Vue组件在OnMounted中调用初始化函数initArcGisMap创建Camera对象Camera的常用属性Camera的常用方法 要在Vue 3中使用ArcGIS API for JavaScript加载和展示三维地球需要用到ArcGIS提供的SceneView类。SceneView类是ArcGIS API for JavaScript中用于呈现和操作3D场景的类。下面我们先来了解下SceneView类的常用属性和方法 SceneView类的常用属性
container设置场景视图的容器元素比如一个div元素。map设置或获取场景视图中使用的地图。spatialReference获取或设置场景视图的空间参考。zoom获取或设置场景视图的缩放级别。camera获取或设置场景视图的相机位置和朝向。center获取或设置场景视图的中心点。constraints获取或设置一组约束条件如缩放级别范围相机倾角范围等。interacting获取场景视图是否正在交互。navigating是否正在导航视图例如平移时。navigation用于配置视图导航行为的选项。Viewpoint获取或设置场景视图的视图点包括位置、缩放级别、相机朝向等信息。
SceneView类的常用方法
when在场景视图及其所有相关资源加载完成后执行一个回调函数。可以通过该方法来执行一些场景加载完成后的操作。goTo移动视图到指定位置可以指定target参数来指定位置如经纬度坐标、图层范围等。hitTest从给定的屏幕坐标处执行一次命中测试以查找命中的图形或要素。toMap将屏幕坐标转换为场景坐标系对应的地理坐标。toScreen将场景坐标转换为屏幕坐标。takeScreenshot获取当前场景视图的屏幕截图。
vue3中使用SceneView类创建三维地球
项目准备 创建Vue 3项目 使用vite构建工具创建一个新的Vue项目运行以下命令 npm create vitelatest创建vite项目输入项目名称vite-vue3-arcgis,选择vue框架并选中JavaScript语音创建项目创建成功后进入vite-vue3-arcgis文件夹并使用npm i 安装依赖 安装ArcGIS JS API依赖包 在项目目录下运行以下命令安装需要的依赖包 npm install arcgis/core引入ArcGIS API
在Vue组件中引入ArcGIS API for JavaScript模块在需要使用地球的Vue组件中使用import语句引入ArcGIS API
import Map from arcgis/core/Map.js;
import SceneView from arcgis/core/views/SceneView.js;创建Vue组件
创建vue组件在components文件夹下新建ArcGisMap.vue组件准备三维地球展示的容器元素 在ArcGisMap.vue组件的模板中准备一个div元素作为地球的容器templatediv idviewDiv/div
/template创建一个初始化函数initArcGisMap()用于创建Map实例和SceneView实例
const initArcGisMap () {const map new Map({basemap: topo-vector});view new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: viewDiv,map: map});view.ui.components [];
}在OnMounted中调用初始化函数initArcGisMap
引入vue的OnMounted生命周期函数并在其中调用上面定义的initArcGisMap方法
import { onMounted } from vue
onMounted(() {initArcGisMap()
})运行浏览器可以看到三维地球已经呈现在了浏览器中 完整代码如下
templatediv idviewDiv/div
/templatescript setup
import { onMounted } from vue
import Map from arcgis/core/Map.js;
import SceneView from arcgis/core/views/SceneView.js;
let view
onMounted(() {initArcGisMap()
})const initArcGisMap () {const map new Map({basemap: topo-vector});view new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: viewDiv,map: map});view.ui.components [];
}
/script
style scoped #viewDiv {width: 100%;height: 100vh;}
/style创建Camera对象
在 SceneView 中可以通过创建 Camera 对象并将其设置为 SceneView 的 camera 属性来定义相机。Camera 对象将定义要在 SceneView 中使用的相机属性如位置、方向、投影方式等。
引入Camera对象 要使用Camera对象需要先引入Camera模块 import Camera from arcgis/core/Camera.js;创建Camera实例 通过new Camera()方法来创建Camera的实例 var camera new Camera({position: { // 相机位置x: -123.12,y: 40.57,z: 2000 // 高度},tilt: 60, // 相机俯仰角heading: 0 // 相机偏航角});将SceneView实例的camera属性设置为上面的camera实例 view new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: viewDiv,map: map,camera: camera // 设置相机});运行浏览器可以看到地图视角已经按照camera设置的参数显示了
Camera的常用属性
position相机的位置可以使用 x、y 和 z 坐标表示。例如camera.position { x: -118, y: 34, z: 5000 };heading相机的偏航角表示相机绕其位置的垂直轴旋转的角度。例如camera.heading 180;tilt相机的俯仰角表示相机绕其位置的水平轴旋转的角度。例如camera.tilt 45;fov相机的视场角表示可视范围的大小。例如camera.fov 60; 示例代码如下 var camera new Camera({position: {x: -118,y: 34,z: 5000},heading: 180,tilt: 45,fov: 60});Camera的常用方法
clone()创建相机的副本。例如var clonedCamera camera.clone();fromJSON() 根据传入的 JSON 对象提取其中的属性值并使用这些属性值创建一个新的 Camera 对象。这可以方便地将已存储的相机属性还原为 Camera 对象。toJSON()将相机属性转换为 JSON 对象。例如var cameraJson camera.toJSON();
下面的代码我们使用 fromJSON() 方法来初始化 Camera 对象
const initArcGisMap () {const map new Map({basemap: topo-vector}); var cameraJson {position: {x: -118,y: 34,z: 5000},heading: 180,tilt: 45,fov: 60,near: 0.1,far: 100000
};
// 使用 fromJSON() 方法创建一个新的 Camera 实例
var camera Camera.fromJSON(cameraJson);
console.log(camera) view new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: viewDiv,map: map,camera: camera // 设置相机});view.ui.components [];
}在上面的代码中我们创建了一个包含相机信息的 JSON 对象 cameraJson然后通过 fromJSON() 方法将其转换为 Camera 对象 camera。这样可以快速将已存储的相机信息还原为可操作的对象。
需要注意的是fromJSON() 方法只能用于从 ArcGIS 产品生成的 JSON 对象初始化 Camera 对象。如果传入的 JSON 对象不符合相机属性的结构则该方法可能会抛出错误。确保传入的 JSON 对象与相机属性的期望结构相匹配。
通过使用 fromJSON() 方法可以轻松地将相机的状态从一个应用程序传递到另一个应用程序或者将相机属性保存到持久存储中以备将来使用。
好啦这节就先到这里吧更多内容小伙伴们可以上ArcGIS的官网进行查看学习。
