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.xml中出现Package struts2 extends undefined package struts-default解决办法
在struts.xml中出现extends undefined package struts-default,经过查阅资料原来是因为没有联网的缘故.这样解决:在myeclipse中关联本地的dtd文件 ...
- 在MVC视图的代码块中,直接输出文本,有几种方式?
@{ <div>我爱IT,我是程序员,我骄傲---</div> <!--在C#代码块中,输出文本--> <!--1.0 使用Razor内置标签text--&g ...
- 【iOS】单例模式
单例模式在软件开发中经常用到,在iOS系统framework也很多地方用到单例模式,例如 [NSUserDefaults standardUserDefaults], [NSBundle mainBu ...
- ACM训练场
http://acm.nyist.net/JudgeOnline/problemset.php http://blog.csdn.net/SJF0115/article/category/910592 ...
- Html5学习笔记(1)
1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...
- datagrid动态数据添加超链接的方法
首先,我我们要有一个json格式的datagrid_data.json文件,如下:
- PHP(1)——学习之前做点啥准备
工欲善其事必先利其器,当然是先准备工具咯.首先硬件条件就是双核CPU以及8G内存的电脑一台,操作系统环境:windows(64bit)7+.Mac OSX 10.10+.Linux 64bit.软件环 ...
- 泛函编程(8)-数据结构-Tree
上节介绍了泛函数据结构List及相关的泛函编程函数设计使用,还附带了少许多态类型(Polymorphic Type)及变形(Type Variance)的介绍.有关Polymorphism的详细介绍会 ...
- CodeForces 149D Coloring Brackets
Coloring Brackets time limit per test: 2 seconds memory limit per test: 256 megabytes input: standar ...
- 配置VS代码生成工具ReSharper快捷键
VS代码生成工具ReSharper提供了丰富的快捷键,可以极大地提高你的开发效率.安装ReSharper后首次启动Visual Studio时,会出现一个名为ReSharper Keyboard Sc ...