arcgis api for JavaScript _加载三维图层(scene layer)

arcgis api for JavaScript  4.x 版本增加对三维的支持。

关于三维图层(scene layer)：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-SceneLayer.html

把官方示例代码下载下来，在可以联网的环境中使用浏览器打开该文件即可，

官方示例：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-scenelayer

官方示例可以在线修改，点击刷新查看修改效果。便于测试使用。

三维图层 即  scene layer， 翻译为场景图层，在arcgis api for JavaScript 通过两种方式加载， portal id 或者 图层url

portal id 的方式

var sceneLayer = new SceneLayer({

	  portalItem: {

           id: "2e0761b9a4274b8db52c4bf34356911e"

          },

        popupEnabled: false

      });


图层url的方式


var sceneLayer = new SceneLayer({


    url:"https://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/SceneServer/layers/0",


popupEnabled: false 
});




自己发布的 场景图层这里使用了  场景图层服务url 的方式，如下为发布的场景图层，红框内即场景图层服务url


发布场景服务：http://enterprise.arcgis.com/zh-cn/server/latest/publish-services/windows/scene-services.htm


pro试用申请：https://www.esri.com/arcgis/trial




把下载下来的官方代码  稍作修改，如下文所示：


修改①：


图层服务所使用数据  所在位置与官方数据不同，因此代码中需要修改 position到对应位置。


测试数据下载：链接：https://pan.baidu.com/s/1c3Kg7cs 密码：13a0


另外一份测试数据：链接：https://pan.baidu.com/s/1nwfSDmx 密码：vt46


修改②


另外由于跨越请求问题，还添加了  “esriConfig.request.corsEnabledServers.push("server1041.esrichina.com");等少量代码。


关于跨越请求问题，参考：http://www.cnblogs.com/mumu122GIS/p/8482445.html


修改③


修改为  自己的场景图层服务url




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Get started with SceneView - Create a 3D map</title>

<style>

  html,

  body,

  #viewDiv {

    padding: 0;

    margin: 0;

    height: 100%;

    width: 100%;

  }

</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

<script src="https://js.arcgis.com/4.6/"></script>

<script>

//require(["esri/config"], function(esriConfig) {

//  esriConfig.defaults.io.corsEnabledServers.push("server1041.esrichina.com");

//});

require([

  "esri/Map",

  "esri/views/SceneView",

  "esri/layers/SceneLayer",

  "esri/config",

  "dojo/domReady!"

], function(Map, SceneView, SceneLayer,esriConfig){

  esriConfig.request.corsEnabledServers.push("server1041.esrichina.com");

  var map = new Map({

    basemap: "streets",

    ground: "world-elevation"

  });

  var view = new SceneView({

    container: "viewDiv",

    map: map,

	camera: {

          //position: [-74.0338, 40.6913, 707],

	  //position: [10, 53.5, 707],

          position: [-75.175, 39.95, 707],

          tilt: 50,

          heading: 10

        }

  });

    // Create SceneLayer and add to the map

      var sceneLayer = new SceneLayer({

	    //portalItem: {

        //  id: "2e0761b9a4274b8db52c4bf34356911e"

        //},

	//url: "https://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/SceneServer/layers/0",

	url:"http://server1041.esrichina.com/arcgisserver/rest/services/Hosted/Scene_JS_WSL1/SceneServer",

        popupEnabled: false

      });

      map.add(sceneLayer);

      // Create MeshSymbol3D for symbolizing SceneLayer

   var symbol = {

        type: "mesh-3d", // autocasts as new MeshSymbol3D()

        symbolLayers: [{

          type: "fill", // autocasts as new FillSymbol3DLayer()

          // If the value of material is not assigned, the default color will be grey

          material: {

            color: [244, 247, 134]

          }

        }]

    };

      // Add the renderer to sceneLayer

    sceneLayer.renderer = {

        type: "simple", // autocasts as new SimpleRenderer()

        symbol: symbol

      };

});

</script>

</head>

<body>

  <div id="viewDiv"></div>

</body>

</html>





　　


结果如下




将代码复制粘贴到在线示例中，也可以进行调试：


												


											
arcgis api for JavaScript _加载三维图层(scene layer)的更多相关文章
	

    
								
  1. ArcGis API for JavaScript学习——加载地图
		
    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
    
		
    2. 
						
  2. ArcGIS API for Silverlight中加载Google地形图（瓦片图）
		
    原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS ...
    
		
    3. 
						
  3. arcgis api for JavaScript _跨域请求
		
    arcgis api for JavaScript  中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
    
		
    4. 
						
  4. ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示
		
    我加载的是ArcGIS Server本地发布的FeatureService,ArcGIS API for JS4.7记载FeatureLayer时,在二维需要通过代码启用WebGL渲染,在三维模式下, ...
    
		
    5. 
						
  5. ArcGIS api for javascript——合并切片和动态图层
		
    描述 这个示例加入一个通过ArcGISTiledMapServiceLayer表示的cachedArcGIS Server地图服务,和一个通过ArcGISDynamicMapServiceLayer表 ...
    
		
    6. 
						
  6. ArcGIS API For JavaScript 开发（二）基础地图
		
    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for  ...
    
		
    7. 
						
  7. RequireJS加载ArcGIS API for JavaScript
		
    1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...
    
		
    8. 
						
  8. ArcGIS API for JavaScript 4.4 版本加载谷歌地图
		
    ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
    
		
    9. 
						
  9. arcgis api for javascript本地部署加载地图
		
    最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Anaconda本地安装python库
			
    很多时候我们需要自己手动安装一些库,例如因为网络原因,或者下载源没有这个包. 以Windows环境为例,无论是pip安装还是anaconda安装,最终的包都是安装在,工作目录/Lib/site-pac ...
    
			
    2. 
						
  2. vux 使用 font-awesome
			
    1)XIcon 太多坑,不好用,无奈之下,搞了一下 font-awesome 2)下载 font-awesome 源码,并放置到 根目录/src 目录下 ,传送门:http://fontawesome ...
    
			
    3. 
						
  3. Linux应急响应（二）：捕捉短连接
			
    0x00 前言 ​ 短连接(short connnection)是相对于长连接而言的概念,指的是在数据传送过程中,只在需要发送数据时,才去建立一个连接,数据发送完成后,则断开此连接,即每次连接只完成一 ...
    
			
    4. 
						
  4. iOS开发--UILabel可以显示\n
			
    UILabel*label; //设置换行 label.lineBreakMode = UILineBreakModeWordWrap; label.numberOfLines = ; 换行符还是“\ ...
    
			
    5. 
						
  5. [WallProxy] WallProxy
			
    1. 在Linux/Ubuntu平台导入CA.crt证书. 1.1. 首先安装libnss3-tools:sudo apt-get install libnss3-tools. 1.2. 导入证书:c ...
    
			
    6. 
						
  6. open-falcon之transfer
			
    功能 负责数据转发,接受agent上报的数据,然后使用一致性hash规则对数据进行分片,最后将分片后的数据分别转发至judge,graph 对接收到的数据进行合法性校验.规整 针对每个后端实例维护一个 ...
    
			
    7. 
						
  7. LeetCode-494. Target Sum(DFS&DP)
			
    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...
    
			
    8. 
						
  8. Android  density、dpi、dp、px
			
    Density DPI Example Device Scale Pixels ldpi 120 Galaxy Y 0.75x 1dp = 0.75px mdpi 160 Galaxy Tab 1.0 ...
    
			
    9. 
						
  9. 其它终端设备连接gmail账户提示密码错误解决方法
			
    换新手机配置Google Account继续使用Gmail服务,输入用户名.密码进入状态同步一段时间后再次提示输入用户名.密码并显示账号信息不正确.网上有人提到"修改用户密码"再进 ...
    
			
    10. 
						
  10. ubuntu 14.04 升级到 16.04 问题总结
			
    1. 需要的依赖关系未安装 The required dependency 'apt (>= 1.0.1ubuntu2.13)' is not installed. http://forum.u ...
    
			
    11.