这段时间一直在看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. .Net魔法堂：史上最全的ActiveX开发教程——ActiveX与JS间交互篇

    一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserContr ...

  2. struts2重点——ValueStack和OGNL

    一.值栈(ValueStack) 1.实现类:OGNLValueStack 2.对象栈:CompoundRoot(针对的是类级别的) (1)继承自 ArrayList —— 先进后出 (2)提供了栈的 ...

  3. 2015腾讯暑期实习生 Web前端开发 面试经历

    [2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可 ...

  4. JS获取html对象的几种方式说明

    document.getElementById("zx"); 通过ID获取html元素对象,ID号在html文档当中应该是唯一的.返回的是唯一element对象.并且所有浏览器都兼 ...

  5. 关于c++数的进制的经验

    默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. 注意: 1.使用不带.h的头文件& ...

  6. VS2010 根据模型生成数据库 打开edmx.sql文件时 vs出现无响应的解决方案

    今天在VS2010 sp1+sql server 2008 R2+Win7操作系统下测试ADO.NET 实体数据模型时 ,遇到这样一个问题. 首先建好实体模型,然后"根据模型生成数据库&qu ...

  7. C语言回滚(三)-指针

    #include <stdio.h>#include <stdlib.h> //& 地址运算符 //* 间接运算符 // *的作用 当*后面跟一个指针名或地址的时候, ...

  8. 【poj 3461】Oulipo（字符串--KMP）

    题意:求子串在文本串中出现了多少次. 解法:使用KMP的next[ ]和tend[ ]数组计数. #include<cstdio> #include<cstdlib> #inc ...

  9. C++ Const（常类型）的作用总结

    C++ Const的作用总结 面试或者工作中,我们经常遇到const修饰符定义的变量,函数和对象等.那么const的作用具体是什么,有哪些.今天自己好好的总结了一下,记录下来方便自己以后时间久了不记得 ...

  10. emberjs初学记要

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...