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. iOS 定时器的比较
			
    然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资料,大概有三种方法:NSTimer.CADisplayLink.GCD.接下来我就一一介绍它们的用法. 一.NSTimer 1. ...
    
			
    2. 
						
  2. window.open被拦截
			
    1)直接调用window.open 或 点击的时候直接调用 window.open 是不会被拦截的 // 不会被拦截$('.btn-open').click(function(){ window.op ...
    
			
    3. 
						
  3. System.exit(0)会跳过finally块的执行
			
    public class test { public static void main(String[] args) { try { System.exit(0); System.out.printl ...
    
			
    4. 
						
  4. PHP代码层防护与绕过
			
    0x01 前言 在一些网站通常会在公用文件引入全局防护代码进行SQL注入.XSS跨站脚本等漏洞的防御,在一定程度上对网站安全防护还是比较有效的. 这里讨论一下关键字过滤不完善及常见正则匹配存在的问题, ...
    
			
    5. 
						
  5. unity2017.4.0f1使用AS3.0的AndroidSDK遇到的问题
			
    原因: Unity 在编译时会调用 Android SDK tools 中的 android 命令,而在新版本的 Android SDK tools 中,android这个命令已经废弃了,导致 Uni ...
    
			
    6. 
						
  6. Java中获取资源文件的方法总结
			
    这里总结3中方法获取资源文件的 ServletContext Class ClassLoader 文件的位置 1. ServletContext public void doGet(HttpServl ...
    
			
    7. 
						
  7. iOS使用TFHpple解析html
			
    iOS 开发中解析html 网上有很多写好的解析框架 今天就来讲一下如何用框架TFHpple来解析html 使用TFHpple解析html github地址:https://github.com/to ...
    
			
    8. 
						
  8. spring定时任务配置，以及不执行的解决办法
			
    前几天,同事问了我一个问题,我告诉他用spring的定时任务解决,并给他配置了spring的定时任务.当时随便找了一个bean写了一段代码,验证定时任务正确执行后,就没再管,昨天下午,同事写代码的时候 ...
    
			
    9. 
						
  9. SpringBoot集成Mybatis并具有分页功能PageHelper
			
    SpringBoot集成Mybatis并具有分页功能PageHelper   环境:IDEA编译工具   第一步:生成测试的数据库表和数据   SET FOREIGN_KEY_CHECKS=0;    ...
    
			
    10. 
						
  10. sencha touch 百度地图扩展(2014-6-24)（废弃 仅参考）
			
    扩展代码如下: Ext.define('ux.BMap', { alternateClassName: 'bMap', extend: 'Ext.Container', xtype: 'bMap',  ...
    
			
    11.