这段时间一直在看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. 代码规范之争——[个人Week2作业]

    这四个问题均是出自 http://goodmath.scientopia.org/2011/07/14/stuff-everyone-should-do-part-2-coding-standards ...

  2. 《构建之法》第8、9、10章读书笔记、读后感以及Sprint1总结

    第八章:需求分析 软件需求 人们(用户)的需求五花八门,作为一个软件团队要准确而全面地获取这些需求主要有以下四个步骤: 获取和引导需求.这一步骤也被叫做“需求捕捉”.软件团队需要为用户着想,设身处地, ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. phpBB论坛 代码 语法高亮 模块 Codebox Plus

    phpBB代码语法高亮模块 Codebox Plus Code-By.Org (https://www.phpbb.com/customise/db/mod/codebox_plus/) (https ...

  5. 概率论 --- Uva 11181 Probability|Given

    Uva 11181 Probability|Given Problem's Link:   http://acm.hust.edu.cn/vjudge/problem/viewProblem.acti ...

  6. 微软参考源代码 referencesource.microsoft.com

    微软参考源代码 http://referencesource.microsoft.com/ referencesource 下载地址 https://github.com/Microsoft/refe ...

  7. MYSQL企业常用架构与调优经验分享

    一.选择Percona Server.MariaDB还是MYSQL  mysql应用源码:http://www.jinhusns.com/Products/Download/?type=xcj 1.M ...

  8. nginx对网站限速

    注意:nginx 1.1.8 之后的版本的语法改为limit_conn_zone $binary_remote_addr zone=NAME:10m; NAME 就是 zone 的名字限制连接数:要限 ...

  9. 性能分析之-- JAVA Thread Dump 分析综述

    性能分析之-- JAVA Thread Dump 分析综述       一.Thread Dump介绍 1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工 ...

  10. 【GPU编解码】GPU硬解码---CUVID

    问题描述:项目中,需要对高清监控视频分析处理,经测试,其解码过程所占CPU资源较多,导致整个系统处理效率不高,解码成为系统的瓶颈. 解决思路: 利用GPU解码高清视频,降低解码所占用CPU资源,加速解 ...