这段时间一直在看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. GitLab安装说明

    GitLab,是一个使用 Ruby on Rails 开发的开源应用程序,与Github类似,能够浏览源代码,管理缺陷和注释,非常适合在团队内部使用. gitlab是基于Ruby on Rails的, ...

  2. 组合数(Lucas定理) + 快速幂 --- HDU 5226 Tom and matrix

    Tom and matrix Problem's Link:   http://acm.hdu.edu.cn/showproblem.php?pid=5226 Mean: 题意很简单,略. analy ...

  3. C#设计模式——生成器模式(Builder Pattern)

    一.概述在软件系统中,有时候面临着复杂的对象创建,该对象由一定算法构成的子对象组成,由于需求变化,这些子对象会经常变换,但组合在一起的算法却是稳定的.生成器模式可以处理这类对象的构建,它提供了一种封装 ...

  4. ANT自动打包U3D安卓项目研究笔记

    概述 因项目使用Atlassian Stash作为项目源码管理端,且其支持Ant命令自动编译,可使其根据最新的代码自动打包,故产生该研究Ant打包的任务.在此将研究过程及一些相关知识整理记录在此. 本 ...

  5. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  6. Android Studio 中 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':compileDebugAidl'.的问题解答

    Android Studio 中 FAILURE: Build failed with an exception. * What went wrong: Execution failed for ta ...

  7. [Xamarin.Android] ActionBar Tips

    [Xamarin.Android] ActionBar Tips ActionBar用途 快速搞懂 ActionBar的用途,可以参考下列文章: [Android]使用 ActionBarCompat ...

  8. jQuery corner 圆角插件

    jquery.corner是一款强大的圆角插件(所产生的不止只是圆角效果),兼容包括IE6.IE7.IE8.firefox.Opera .Safari.Chrome等主流浏览器,唯一的缺点是为了产生边 ...

  9. request.getRequestDispatcher()的两个方法forward()/include()!!!

    RequestDispatcher rd = request.getRequestDispatcher("/MyServlet");请求转发: rd.forward( reques ...

  10. Tomcat一些小事

    1.编码问题 1.1.乱码 客户端发请GET请求,如果这个请求地址上有中文,而且也没有进行encode的时候,后端就可能接收到乱码. --解决办法 在tomcat , conf/server.xml ...