这段时间一直在看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初步试探（一）的更多相关文章

  1. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  2. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  3. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  4. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

  5. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  6. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  7. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

  8. 创建ArcGIS API for JavaScript的第一个示例程序

    原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...

  9. RequireJS加载ArcGIS API for JavaScript

    1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...

随机推荐

  1. 如何将oc代码转换成运行时代码

    // 运行时 其实就是oc的底层  平时写的代码 最终都是转成底层的运行时代码以下面程序为例子: 如果我们想要看我们的main.m文件底层转换成了怎样的运行时代码 ,我们可以这样做. 1.打开终端  ...

  2. sql date()函数，时间格式

    (1).GETDATE() 函数从 SQL Server 返回当前的日期和时间. 语法 GETDATE() 实例 下面是 SELECT 语句: SELECT GETDATE() AS CurrentD ...

  3. datagrid动态数据添加超链接的方法

    首先,我我们要有一个json格式的datagrid_data.json文件,如下:

  4. 织梦CMS的MVC体系

    13年无意中翻看DedeCMS的代码,发现DedeCMS中是有了一个基本MVC框架的,在现有的版本中,主要是应用到了ask.book等模块上. 织梦这个东西,里面很多设计思想是非常优秀的,但整体代码的 ...

  5. 机器学习实战 - 读书笔记(14) - 利用SVD简化数据

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第14章 - 利用SVD简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. 基 ...

  6. NYOJ 58 最少步数

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...

  7. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  8. EntityFramework学习

    本文档主要介绍.NET开发中两项新技术,.NET平台语言中的语言集成查询技术 - LINQ,与ADO.NET中新增的数据访问层设计技术ADO.NET Entity Framework.ADO.NET的 ...

  9. Angularjs中对时间格式：/Date(1448864369815)/ 的处理

    注:本文使用的 angular 版本为 1.3 版 我们在后台对数据进行json序列化时,如果数据中包含有日期,序列化后返回到前端的结果可能是这样的: /Date(1448864369815)/  . ...

  10. JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

    今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...