function () {switchView();}); 2.二三维切换功能实现: function switchV

时间:2021-10-12 06:29:14

arcgis api3.x for js转向arcgis api4.x,我也是比来的3-4个月时间的工作,恰好公司有个webgis项目需要展示三维场景,项目选择arcgis api4.x。我纯碎记录一下本身学习arcgis api4.x过程中的一些心得体会,本身小我私家的一些理解,不同错误之处,还请列位同仁见谅以及多多指教。

一、谈谈本篇本身认为对照重要的几个专业术语名称的理解: 1.View

View即视图,供给了检察和与舆图组件交互的要领。舆图仅仅是一个容器,存储了包罗在根本层和操纵层中的地舆信息,而视图泛起舆图及其各个层,使它们对用户可见。View是基类,它有两个子类,代表两种类型的视图:MapView和SceneView。

function () {switchView();}); 2.二三维切换功能实现: function switchV

2.MapView

MapView显示一个二维视图的舆图实例,MapView必需成立和参考至少两个东西:一个舆图实例和一个DOM元素,,每个分袂设置在映射和容器属性中。

3. SceneView

SceneView显示3D检察舆图或webscene实例,衬着3D技术给与的是WebGL。SceneView必需有有效的舆图实例和一个DOM元素中的一个非零的高度和宽度来衬着。

4.Map

map类包罗用于存储、打点和笼罩二维和三维视图配合的图层的属性和要领。图层可以添加和删除去,但通过一个视图(在二维检察数据)或场景视图中能(在3D检察数据)。因此,舆图的实例是一个简单的容器生存层,而视图显示与舆图的层和基彼此感化的方法。Map类有两个子类:WebMap以及WebScene,分袂对应二维视图MapView和三维视图SceneView。

5.Basemap

Basemap用于创建自界说底图。这些底图创建可以从本身处事器颁布瓦片处事或者由第三方颁布的瓦片处事。

6.Camera

Camera相机从位置、倾斜和航向角度来界说SceneView视图可见水平,Camera只适用于3D sceneviews。

二、arcgis api4.x离线部署:

离线部署的思路跟我之前写的:arcgis api3.x离线部署,根基一致的。稍微改的是我在项目里面界说一个变量arcgisapiPath来配置离线api的路径:

var arcgisapiPath = "http://localhost:8888/ocean/js/arcgisapi/4.5/dojo";

然后配置api的init.js以及dojo.js文件即可:

function () {switchView();}); 2.二三维切换功能实现: function switchV

function () {switchView();}); 2.二三维切换功能实现: function switchV

function () {switchView();}); 2.二三维切换功能实现: function switchV

备注:项目引用arcgis api之前,必需要引入arcgisapiPath变量才行,不然api的离线配置那里获取不到arcgisapiPath配置路径的。

三、根本底图具体实现思路: 1.配置舆图信息文件mapconfig.js

/* --------------------------------舆图初始信息配置-------------------------------- */ function MapConfig() { } MapConfig.mapInitParams = { fullExtent: {//全图范畴 xmin: 13026179.382488998, ymin: 2677291.306672236, xmax: 13044409.613734988, ymax: 2685919.1362399133 }, extent: {//初始化范畴 xmin: 11810425.929735247, ymin: 2257718.8019195194, xmax: 13209314.679703815, ymax: 2956468.0219521355 }, center: { x:12561975.237333735, y:2440969.8343777806, spatialReference:3857 }, spatialReference: { wkid: 3857 }, } MapConfig.imgMap={Url: "http://localhost:6080/arcgis/rest/services/ImageMap/MapServer", LabelUrl: "", type: 1 };

2.初始化变量界说

var appConfig = { mapView: null, sceneView: null, activeView: null, container: "viewDiv" };

3.初始化视图参数

var initialViewParams = { map: map, //zoom: 4, //center: MapConfig.center, extent:new Extent({ xmin: MapConfig.mapInitParams.extent.xmin, ymin: MapConfig.mapInitParams.extent.ymin, xmax: MapConfig.mapInitParams.extent.xmax, ymax: MapConfig.mapInitParams.extent.ymax, spatialReference: { wkid: MapConfig.mapInitParams.spatialReference.wkid } }), container: appConfig.container };

部分参数说明:

(1)extent,视图初始化显示范畴;

(2)zoom,视图初始化缩放级别;

(3)center,视图初始化显示的中心点位置;

(4)container,视图衬着的容器DIV;

<div> <div> <div> <input type="button" value="2D"> </div> </div> </div>

(5)map,舆图东西。