arcgis api for JavaScript _加载三维图层(scene layer)
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)的更多相关文章
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- ArcGIS API for Silverlight中加载Google地形图（瓦片图）
原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS ...
- arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
- ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示
我加载的是ArcGIS Server本地发布的FeatureService,ArcGIS API for JS4.7记载FeatureLayer时,在二维需要通过代码启用WebGL渲染,在三维模式下, ...
- ArcGIS api for javascript——合并切片和动态图层
描述 这个示例加入一个通过ArcGISTiledMapServiceLayer表示的cachedArcGIS Server地图服务,和一个通过ArcGISDynamicMapServiceLayer表 ...
- ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- RequireJS加载ArcGIS API for JavaScript
1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- arcgis api for javascript本地部署加载地图
最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...
随机推荐
- OpenGL资料
苹果官方文档:OpenGL ES for iOS苹果官方文档:OpenGL for OS X OpenGL是源自SGI IRIS GL library,并不是SUN开发的.SGI提供了一个OPENGL ...
- 利用广播实现ip拨号——示例
1.创建activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...
- linux 查看硬件信息
1.查看内存槽数.那个槽位插了内存,大小是多少 dmidecode|grep -P -A5 "Memory\s+Device"|grep Size|grep -v Range ...
- 3dmax osg格式导出插件 osgExp OpenSceneGraph Max Exporter
https://sourceforge.net/projects/osgmaxexp/files/OpenSceneGraph%20Max%20Exporter/
- spring配置文件中xsd引用问题
XML的一些概念 首先来看下xml的一些概念: xml的schema里有namespace,可以给它起个别名.比如常见的spring的namespace: xmlns:mvc="http ...
- 关于Android开发中使用的XML
1.布局 FrameLayout: 以堆叠方式显示一个或多个子视图. GridLayout: 将子视图按行和列排列. LinearLayout: 将所有子视图排列成一行或一列. RelativeLay ...
- 13条Android手机必备技巧 让玩机更有趣
腾讯数码讯(编译:张秀梅)如果你不是一名极客或手机爱好者,那么或许对于手中的Android手机来说,肯定无法做到百分之百了解.对于这款世界上最受欢迎的操作系统来说,有许多不为大部分人所知晓的使用技巧或 ...
- 【技术分享会】 @第六期 iOS开发基础
前言 iOS之前被称为 iPhone OS,是一个由苹果公司开发的移动操作系统. iOS的第一个版本是在2007年发布的,其中包括iPhone和iPod Touch. iOS开发工具:Xcode 运行 ...
- python基础---->python的使用(五)
这里记录一些python的一些基础知识,主要内容是高阶函数的使用.或许我的心包有一层硬壳,能破壳而入的东西是极其有限的.所以我才不能对人一往情深. python中的高阶函数 一.map().reduc ...
- Openstack 在VMware虚拟机ESXI和Workstation下安装需要更改参数
[vmware vsphere] 要在esxi 5i的系统文件/etc/vmware/config最后添加vhv.allow = “TRUE” 一行.重启 VMware ESXi 后编辑虚拟机选项(需 ...