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. SpringBoot（十二）-- 整合Redis
			
    1.pom依赖 <!-- 添加redis支持 --> <dependency> <groupId>org.springframework.boot</grou ...
    
			
    2. 
						
  2. 最简单的GLSL,Shader
			
    Vertex Shader void main() { gl_FrontColor = gl_Color; gl_Position = ftransform(); } Fragment Shader  ...
    
			
    3. 
						
  3. 分析JobInProgress中Map/Reduce任务分配
			
    1.JobTracker能否决定给当前的TaskTracker节点分配一个Job的具体的哪一个任务? 2.什么是map本地任务? 3.nonRunningMapCache的作用是什么? 4.从Task ...
    
			
    4. 
						
  4. 安装win7到移动硬盘
			
    jpg改rar http://www.360doc.com/content/16/0816/10/19373891_583556875.shtml
    
			
    5. 
						
  5. php原生实现图片上传和查看
			
    先上源码:upload_file.php <html> <body> <form action="upload_file.php" method=&q ...
    
			
    6. 
						
  6. 【Nginx】服务器中HTTP 301跳转到带www的域名的方法
			
    从nginx的官方文档 documentation, 正确的nginx https 301跳转到带www域名方法的方法如下: HTTP 301跳转到带www域名方法 需要两个server段. serv ...
    
			
    7. 
						
  7. Python 编码规范(Google)
			
    Python 编码规范(Google) https://blog.csdn.net/q469587851/article/details/54096093 Python 风格规范(Google) 本项 ...
    
			
    8. 
						
  8. C++中的异常安全性【转】
			
    原文写的非常好,来自这里 一个函数如果说是“异常安全”的,必须同时满足以下两个条件:1.不泄漏任何资源:2.不允许破坏数据. 我们先通过两个反面的例子开始. 第一个是造成资源泄漏的例子.一个类Type ...
    
			
    9. 
						
  9. css方法 - 移动端h5在iphonex的适配
			
    @media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-rati ...
    
			
    10. 
						
  10. Android 请求运行时权限
			
    写文件到sd卡中,会报权限问题,需要动态申请申请运行时权限 1. MainActivity.java public class MainActivity extends Activity { priv ...
    
			
    11.