这段时间一直在看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. Ioc原理及常用框架

    1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑.  图1:软件系统中耦合的对象 如果我们 ...

  2. Mysql创建用户的三种基本方法

    1.采用create user e.g.  create user 'username'@'host' identified by 'password'; 2.采用grant语句 e.g.  gran ...

  3. Spring总结—— IOC 和 Bean 的总结

    一.Spring 官方文档中给出的 Spring 的整体结构. 二.我自己所理解的 Spring 整体结构图. 三.本次总结 Spring 核心部分 1.从上面图中可以看出,Beans 和 Conte ...

  4. 设计模式--简单工厂(Factory)模式

    温故而知新,看了以前写的博文<Asp.net读取Excel文件 2>http://www.cnblogs.com/insus/archive/2011/05/05/2037808.html ...

  5. C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表

    调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...

  6. Error generating Swagger server (Python Flask) from Swagger editor

    1down votefavorite   http://stackoverflow.com/questions/36416679/error-generating-swagger-server-pyt ...

  7. mysql学习笔记 第八天

    where,group by,having重新详解 where的用法: where与in的配合使用,in(值1,值2,...)表示结果在值1,值2,...其中任何一个. 聚合函数和group by的用 ...

  8. How Tomcat Works读书笔记之升级架构

    上一篇HttpServer类职责很多,包括启动服务器,创建ServerSocket,得到客户端Socket,创建Request对象和Response对象,并解析Http请求,这样很混乱,不利于以后服务 ...

  9. JMS学习（二）- JMS Message Model 组成介绍及消息头详解

    一.前言 从本文起依次详细介绍JMS中的一些重要的概念,主要参考了官方的JMS1.1的文档,该文档很老了,是02年的,那年,JAVA还没有被Oracle收购..本文主要介绍Message及其相关概念, ...

  10. UVA 10090 - Marbles 拓展欧几里得

    I have some (say, n) marbles (small glass balls) and I am going to buy some boxes to store them. The ...