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. GSAP JS基础教程--TweenLite操作元素的相关属性
			
    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
    
			
    2. 
						
  2. Failed to resolve
			
    一: 把//classpath 'com.android.tools.build:gradle:2.2.2'改成classpath 'com.android.tools.build:gradle:3. ...
    
			
    3. 
						
  3. iOS - 截屏，view截图的基本方法
			
    推荐一个第三方好用的框架:SDScreenshotCapture #define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v) ([[[UIDevice cur ...
    
			
    4. 
						
  4. LOCAL_WHOLE_STATIC_LIBRARIES与LOCAL_STATIC_LIBRARIES的区别
			
    在分析Jelly Bean Audio Subsystem的时候,发现HAL层的库audio_policy.xxx.so与其依赖的静态库libaudiopolicy_legacy.a都有audio_p ...
    
			
    5. 
						
  5. android中：/system/bin/sh: : No such file or directory错误
			
    将一个raspberry下编译好的可执行文件放在android的system/bin下,修改为777权限,运行,出现下面的错误: /system/bin/sh: XXX: No such file o ...
    
			
    6. 
						
  6. DLL注入之Appinit_Dlls
			
    AppInit_DLLs is a mechanism that allows an arbitrary list of DLLs to be loaded into each user mode p ...
    
			
    7. 
						
  7. PrintWriter 和 Scanner 类的组合使用
			
    // 示例程序:将一个Employee记录数组存储成一个文本文件,其中每个记录都保存在单独的一行中, // 而实例的域彼此之间使用分隔符分离开. // 众所周知: // 以二进制格式写出数据,需要使用 ...
    
			
    8. 
						
  8. RH318之域控服务器
			
    Windows2012域控服务器 一.安装域服务及DNS 1.配置静态IP 2.点击左下角 3.进入--->服务器管理器 4.点击角色和功能 勾选Active Directory域服务与DNS服 ...
    
			
    9. 
						
  9. 转载>>六款大数据采集平台的架构分析
			
    随着大数据越来越被重视,数据采集的挑战变的尤为突出.今天为大家介绍几款数据采集平台: Apache Flume Fluentd Logstash Chukwa Scribe Splunk Forwar ...
    
			
    10. 
						
  10. Oracle相关内容整理
			
    一.常用sql 1.查看版本 SELECT * FROM V$VERSION; SELECT version FROM V$INSTANCE 2.数据库发生死锁时,跟踪文件的位置 关于跟踪文件,大义是 ...
    
			
    11.