Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
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版本)-三维地图并叠加天地图标注的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- 视频编码器评測系统:VideoCodecRank
视频编码器领域一直有个比較复杂的问题:mpeg2.divx.xvid.mpeg4.vp8.vp9.x264.openh264.x265等等这一系列编码器究竟哪个好?而对于同一种视频编码器,又包括了各种 ...
- 【例题5-8 UVA - 400】Unix ls
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设n个字符串中出现的最长的为len; 最后一列能容纳len个字符,然后前面的列能容纳len+2个字符. 每行最多60个字符. 按照这 ...
- 【例题5-6 UVA 540 】Team Queue
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用两个队列模拟就好. 记录某个队在不在队列里面. 模拟 [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] #in ...
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
You often use the same data in different ways across pages. This lesson walks you through setting up ...
- openCV 和GDI画线效率对比
一. 由于项目需要,原来用GDI做的画线的功能,新的项目中考虑到垮平台的问题,打算用openCV来实现,故此做个效率对比. 二. 2点做一条线,来测试效率. 用了同样的画板大小---256*256的大 ...
- 2、Cocos2dx 3.0游戏开发找小三之引擎简单介绍
尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简单介绍 Cocos2d-x 的 ...
- dmalloc在嵌入式的开发板上的应用
下面是我实际在开发环境里面做的dmalloc移植时候的一些随笔 配置PC的dmalloc环境1. 首先把源码包打开,进入dmalloc文件夹2. ./configure 配置Makefile,我是加了 ...
- 在windows下远程访问linux服务器
在网络性能.安全性.可管理性上,Linux有着其他系统无法比拟的强大优势,而服务器对这些方面要求特别高,因此Linux常常被用来做服务器使用.而当我们需要维护linux服务器的时候,就需要远程访问li ...
- php汉字 字节数组转换
<?php function stringToByteArray($str,$charset) { $str = iconv($charset,'UTF-16',$str); preg_matc ...
- 浅谈struts2的国际化----i18n
可能大家在使用struts框架的时候,偶尔会看到这个词: i18n.也就是 Internationalization i 开头,n 结尾. 总共18个字母,今天的主要内容就是环绕这 四个字母. ...