1.三维地图实现

在官网的demo中就有三维地图的实现，如下图所示

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>3D Map With Tianditu</title>

    <style>

        html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }

    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        require(["esri/Map", "esri/views/SceneView", "dojo/domReady!"], function (Map, SceneView) {

            var map = new Map({

                "basemap": "satellite",

                "ground": "world-elevation"

            });

            var view = new SceneView({

                "map": map,

                "scale": 500000,

                "container": "viewDiv",

                "center": [103.8000, 34.8000],

            });

        });

    </script>

</head>

<body>

    <div id="viewDiv"></div>

</body>

</html>

2.三维地图并叠加天地图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>3D Map With Tianditu</title>

    <style>

        html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }

    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        require(["esri/Map",

            "esri/config",

            "esri/views/SceneView",

            "esri/layers/TileLayer",

            "esri/layers/WebTileLayer",

            "dojo/domReady!"

        ], function (Map, esriConfig, SceneView, TileLayer, WebTileLayer) {

            esriConfig.request.corsEnabledServers.push(

                "t0.tianditu.com",

                "t1.tianditu.com",

                "t2.tianditu.com",

                "t3.tianditu.com",

                "t4.tianditu.com",

                "t5.tianditu.com",

                "t6.tianditu.com",

                "t7.tianditu.com");

            var map = new Map({

                "ground": "world-elevation"

            });

            var view = new SceneView({

                "map": map,

                "scale": 500000,

                "container": "viewDiv",

                "center": [103.8000, 34.8000],

            });

            var layer = new TileLayer({

                "url": "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",

                "copyright": "底图数据源：ESRI",

            });

            map.add(layer);

            //map.add(tiledLayer);

            var tiledLayer1 = new WebTileLayer({

                "id": "Tianditu Id",

                "title": "Tianditu Title",

                "urlTemplate": "http://t{subDomain}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}",

                "subDomains": ["0", "1", "2", "3", "4", "5", "6", "7"],

                "copyright": "天地图地名"

            });

            map.add(tiledLayer1);

            var tiledLayer2 = new WebTileLayer({

                "id": "Tianditu Id",

                "title": "Tianditu Title",

                "urlTemplate": "http://t{subDomain}.tianditu.com/DataServer?T=ibo_w&x={col}&y={row}&l={level}",

                "subDomains": ["0", "1", "2", "3", "4", "5", "6", "7"],

                "copyright": "天地图边界"

            });

            map.add(tiledLayer2);

        });

    </script>

</head>

<body>

    <div id="viewDiv"></div>

</body>

</html>

效果

Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注的更多相关文章

  1. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  2. Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  4. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

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

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

  6. Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

    在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...

  7. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

  8. Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...

  9. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

随机推荐

  1. 【Codeforces Round #434 (Div. 1) B】Polycarp's phone book

    [链接]h在这里写链接 [题意] 给你n个电话号码. 让你给每一个电话号码选定一个字符串s; 使得这个串s是这个电话号码的子串. 且不是任何一个其他电话号码的子串. s要求最短. [题解] 字典树. ...

  2. 怎样用Adobe Acrobat 7 Pro把PDF文档拆分成多个啊？

    这个pdf文档里有多篇文章,我想把他们分开并分别保存在独立的pdf文档.怎么操作?我的电脑基础不太好,麻烦说得详细一些. Adobe Acrobat 7 Pro拆分PDF文档的方法: 1.点左边的“书 ...

  3. 从零开始使用git第二篇：git的日常操作

    从零开始使用git 第二篇:git的日常操作 第一篇:从零开始使用git第一篇:下载安装配置 第二篇:从零开始使用git第二篇:git实践操作 第三篇:从零开始使用git第三篇:git撤销操作.分支操 ...

  4. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

  5. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  6. 使用u盘量产工具修复写保护的u盘

    自己的u盘突然提示写保护,而且也没有写保护开关,怎么都写不进文件,试了很多办法都无法去除写保护,最后找了一个u盘量产工具,搞定: 插上u盘后,会检测到u盘,点“开始"后静静等待它完成,u盘又 ...

  7. 【note】缩写词

    CoE CANopen EtherCAT应用程序概要文件CANopen™是一个注冊商标的能够自己主动化汽车集团..纽伦堡.德国CiA402CANopen™驱动器配置文件里指定的IEC 61800-7- ...

  8. [Webpack] Configure Prepack with Webpack

    Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ...

  9. 在word中使用notepad++实现代码的语法高亮 分类： C_OHTERS 2013-09-22 10:38 2273人阅读 评论(0) 收藏

    转载自:http://blog.csdn.net/woohello/article/details/7621651 有时写文档时需要将代码粘贴到word中,但直接粘贴到word中的代码虽能保持换行与缩 ...

  10. C#验证手机号

    using System.Text.RegularExpressions; private bool IsMobile(string phoneNo) { return Regex.IsMatch(p ...