zoukankan      html  css  js  c++  java
  • Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    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>

    效果如下:

     

  • 相关阅读:
    如何给博客园添加背景canvas线条动画背景
    过去-现在-未来
    如何将图片转化为代码图片
    css3炫酷登录页面
    图片跟随鼠标移动特效
    css3实现鼠标移入图片特效
    在线上传图片获取url
    《程序员修炼之道:从小工到专家》读后感01
    动手动脑-随机数和重载
    JAVA学习第三周
  • 原文地址:https://www.cnblogs.com/tracine0513/p/7795464.html
Copyright © 2011-2022 走看看