ArcGIS API for JavaScript Beta初步试探(一)
这段时间一直在看https://developers.arcgis.com/javascript/beta/sample-code/index.html,
下面直接看图片:

叠加了二维arcgis server服务,就是酷~~~

增加了3维元素,还在试探中~~~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3D Graphics - 4.0beta3</title> <link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta3/"></script> <style>
html,
body {
padding: 0;
margin: 0;
}
</style> <script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/Camera",
"esri/layers/GraphicsLayer", "esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "dojo/domReady!"
],
function(
Map, SceneView, Camera, GraphicsLayer,
Graphic, Point, Polyline, Polygon,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol
) { var map = new Map({
basemap: "hybrid"
}); var view = new SceneView({
container: "viewDiv",
map: map, camera: new Camera({
position: new Point({
x: -0.17746710975334712,
y: 51.44543992422466,
z: 1266.7049653716385
}),
heading: 0.34445102566290225,
tilt: 82.95536300536367
})
}); /*********************
* Add graphics layer
*********************/ var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer); /*************************
* Add a 3D point graphic
*************************/ // London
var point = new Point({
x: -0.178,
y: 51.48791,
z: 1000
}), markerSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40], outline: new SimpleLineSymbol({
color: [255, 255, 255],
width: 2
})
}); var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
}); graphicsLayer.add(pointGraphic); /****************************
* Add a 3D polyline graphic
****************************/ var polyline = new Polyline([
[-0.178, 51.48791, 0],
[-0.178, 51.48791, 1000]
]), lineSymbol = new SimpleLineSymbol({
color: [226, 119, 40],
width: 4
}); var polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
}); graphicsLayer.add(polylineGraphic); /***************************
* Add a 3D polygon graphic
***************************/ var polygon = new Polygon([
[-0.184, 51.48391, 400],
[-0.184, 51.49091, 500],
[-0.172, 51.49091, 500],
[-0.172, 51.48391, 400],
[-0.184, 51.48391, 400]
]), fillSymbol = new SimpleFillSymbol({
color: [227, 139, 79, 0.8], outline: new SimpleLineSymbol({
color: [255, 255, 255],
width: 1
})
}); var polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
}); graphicsLayer.add(polygonGraphic); });
</script>
</head> <body>
<div id="viewDiv"></div>
</body> </html>
你的一个3D WebGIS就呈现了!
ArcGIS API for JavaScript Beta初步试探(一)的更多相关文章
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
- 基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
- ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for JavaScript 4.0(一)
原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...
- 创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...
- RequireJS加载ArcGIS API for JavaScript
1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...
随机推荐
- Struts 2 拦截器
什么是Struts 2 拦截器 拦截器就是当用户请求后台Action类时在Action的Excute()方法执行前和Result返回魔板试图之后(将页面(数据)发送给浏览器渲染之前)所需要的一些通用 ...
- Spring MVC的web.xml配置详解(转)
出处http://blog.csdn.net/u010796790 1.spring 框架解决字符串编码问题:过滤器 CharacterEncodingFilter(filter-name) 2.在w ...
- thread_ThreadPoolExecutor
目录 1.基础知识 2.简单应用 3.异常机制 4.丰富的扩展 一.基础知识 构造函数. public ThreadPoolExecutor( int corePoolSize, 指的是保留的线程池大 ...
- MVC应用程序实现上传文件
学习MVC以来,一直想实现上传文件的功能,使用jQuery来实现上传,有很多插件.此篇演示中,Insus.NET是使用Uploadify.http://www.uploadify.com/,它有更多的 ...
- 关于 hangfire 的权限问题
hangfire 是一个分布式后台执行服务. 官网:http://hangfire.io/ 我看中hangfire的地方是 1:使用简单 2:多种持久化保存方案.支持sqlserver ,msmq等 ...
- Visual Studio《加载此属性页时出错》的解决办法
打开aspx页面时不能切换到设计视图,vs 2008工具箱中无控件.打开vs 2008的工具>选项>HTML设计器时提示:加载此属性页时出错 有时还会有其它错误提示,比如打开一个Windo ...
- JPA学习(2)注解
上一篇学习了JPA的helloworld,也初略的使用了一些注解,接下来就细细的了解一下有哪些注解,和这些注解的作用 JPA的基本注解: ①@Entity,@Table,@Id,@GeneratedV ...
- 隐藏android系统标题栏和状态栏
//隐藏系统title requestWindowFeature(Window.FEATURE_NO_TITLE); //隐藏状态栏 getWindow().addFlags(WindowManage ...
- Mysql的简单使用(三)
接上文Mysql的简单使用(二) mysql中结构相同的两个表进行合并:(注意需要两个表的结构是一样的) 有如下结构的两个表father和person. 合并的步骤为: 1.把person表和fath ...
- [译] 你应该升级 MQTT3.1.1 的6个理由
原文 6 facts why it’s worth upgrading to the brand new MQTT 3.1.1version 摘要:新版 MQTT 3.1.1 终于在 2014 年 1 ...