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. 在Windows系统上搭建aria2下载器
			
    Aria2是一个命令行下运行.多协议.多来源下载工具(HTTP/HTTPS.FTP.BitTorrent.Metalink),并且支持迅雷离线以及百度云等常用网盘的多线程下载(甚至可以超过专用客户端的 ...
    
			
    2. 
						
  2. Linux 添用户报错：useradd：警告：此主目录已经存在
			
    建立mysql用户.组 groupadd mysql useradd -g mysql mysql 然后删除 userdel mysql 再添用户和组加时,提示: 解决方法:删除用户不用userdel ...
    
			
    3. 
						
  3. 【DVWA】Web漏洞实战之File Upload
			
    File Upload File Upload,即文件上传漏洞,一般的上传漏洞可能是未验证上传后缀 或者是验证上传后缀被bypass 或者是上传的文件验证了上传后缀但是文件名不重命名. LOW 直接上 ...
    
			
    4. 
						
  4. U3D之Editor扩展学习
			
    Unity3D提供了强大的编辑器扩展机制,在项目开发中,如果可以将一些繁琐的工作放在编辑器扩展中进行,则会大大提高效率.本文对编辑器扩展进行了一些总结,希望对有兴趣编写编辑器扩展的开发人员有所帮助.当 ...
    
			
    5. 
						
  5. javaweb使用cookie存取中文以及读取中文
			
    要想在cookie中存储中文,那么必须使用URLEncoder类里面的encode(String s, String enc)方法进行中文转码,例如: 1 Cookie cookie = new Co ...
    
			
    6. 
						
  6. sql server性能查询,连接数
			
    1)使用以下查询语句:   select * from sysprocesses where dbid in (select dbid from sysdatabases where name='My ...
    
			
    7. 
						
  7. 【分布式系列之ActiveMq】ActiveMq入门示例
			
    前言 github地址:https://github.com/AndyFlower/web-back/tree/master/ActiveMq01 下载ActiveMQ :http://activem ...
    
			
    8. 
						
  8. 【CSS系列】获取实时数据做进度
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    9. 
						
  9. Cordova 3.3 开发环境搭建（视频）
			
    图文文章参见: http://www.cnblogs.com/mlzs/p/3332199.html 视频共享链接 百度:http://pan.baidu.com/s/1c0EHfqC
    
			
    10. 
						
  10. win10 与linux mint双系统 只能进入mint而无法进入windows的解决方案
			
    新购买了一块ssd,和以前的hdd硬盘一起装双系统:win10和mint ssd:win10       sdb1  sdb2 sdb3    sda2 hdd:  mint         sda1 ...
    
			
    11.