1. 不设置默认底图，第一个图层作为底图，然后叠加另外一个图层

先添加图层1，第一个图层1作为默认底图，然后在图层1上叠加图层2，并设置图层2的透明度为50%。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>simple demo</title>
  5.      <link rel="stylesheet" href="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/esri/css/esri.css">
  6.      <style type="text/css">
  7.          html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
  8.          #viewDiv { width: 100%; height: 100%; }
  9.      </style>
  10.  </head>
  11.  <body>
  12.      <div id="viewDiv"></div>
  13.      <script src="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/init.js"></script>
  14.      <script type="text/javascript">
  15.          require([
  16.              "esri/map",
  17.              "esri/layers/ArcGISTiledMapServiceLayer",
  18.              "dojo/domReady!"],
  19.              function (Map, ArcGISTiledMapServiceLayer) {
  20.                  var map = new Map("viewDiv");
  21.                  var tms1 = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"); //图层1
  22.                  map.addLayer(tms1);
  23.                  var tms2 = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Projected_Population_Change/MapServer", { "opacity": 0.5 }); //图层2，透明度50%
  24.                  map.addLayer(tms2);
  25.              }
  26.          );
  27.      </script>
  28.  </body>
  29.  </html>

效果如下：

Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作的更多相关文章

  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学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

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

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

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

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

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

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

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

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

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

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

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

  8. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

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

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

随机推荐

  1. 【Educational Codeforces Round 31 A】Book Reading

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 水模拟 [代码] #include <bits/stdc++.h> using namespace std; const ...

  2. springmvc+shiro+freemarker实现的安全及权限管理

    本文讲述了基于springmvc+shiro实现安全管理,shiro+freemarker实现权限验证. 首先我们从web.xml开始: <?xml version="1.0" ...

  3. C语言创建删不掉的目录

    上一篇博客写了一个杀不死的进程,如今再写一个删不掉的目录(文件同理),所谓删不掉不是真的删不掉而是删掉后立即又一次创建. 代码例如以下: #include <stdio.h> #inclu ...

  4. 程序员的底色（IDE color scheme、CLI 命令行界面）

    1. IDE ⇒ Dracula(吸血鬼) IDE:PyCharm,VS2013: sublime:color scheme,Monokai: 2. CLI 命令行界面 $ setterm -inve ...

  5. 4、qq物联SDK介绍及实例讲解

    1.到QQ物联官网http://iot.open.qq.com中下载软件SDK S3C2440_20161122_1.6.205_r4288.tar.gz注意:在后续大家实际开发过程中,可能你会下载到 ...

  6. [Javascript] Validate Data with the Every() Method

    The every method returns true or false based on whether or not every item in the array passes the co ...

  7. 运行一个Hadoop Job所需要指定的属性 分类： A1_HADOOP 2015-02-02 21:33 231人阅读 评论(0) 收藏

    1.设置job的基础属性 Job job = new Job(); job.setJarByClass(***.class); job.setJobName("job name") ...

  8. 用Eclipse替代Keil&IAR来开发ARM应用（升级版）

    Eclipse GNU ARM Plugin 2014/7/16 作者 kiya 几个月前写了一篇<),想自己丰衣足食的参考我的上一篇文章,以及GNU ARM的官网. 用Eclipse替代Kei ...

  9. php 下载服务器上存在的文件 到本地

    Header("Location: http://www.weiyunyi.com/Public/youbu_score_template.xls");

  10. Springmvc+Shiro实战

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79010449 springmvc+shiro实现系统粗细粒度的权限管理步骤: 1:表格设 ...