zoukankan      html  css  js  c++  java
  • 14 添加影像图层

           上一篇文章中我们介绍了如何向地图添加切片图层,这篇文章介绍如何添加影像图层。如果要实现此功能,同样的,我们需要“esri/layers/ArcGISImageServiceLayer”组件,通过实例化一个地图,然后实例化一个影像图层,再用map的addLayer方法将它添加到地图之上,效果如下:

    具体操作如下所示:

    1 实例化地图:

    map = new Map("map", {
    
    basemap: "osm",
    
    center: [89.689085,39.09635],
    
    zoom: 6
    
    });

    2 实例化影像图层并添加至地图之上:

    var imageServiceLayer = new ArcGISImageServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/imageservertest/ImageServer", {
    
    opacity: 0.75
    
    });
    
    map.addLayer(imageServiceLayer);

    3 至此,我们实现了将一个影像图层添加在地图之上,此处只是一个简单的演示,关于具体的需求,大家可以查看此API的文档来进行进一步的操作。完整代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Simple Image Service</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
    <style>
    html, body, #map { height: 100%;  100%; margin: 0; padding: 0; }
    </style>
    <script src="https://js.arcgis.com/3.25/"></script>
    <script>
    var map;
    require([
    "esri/map", "esri/layers/ArcGISImageServiceLayer",
    "dojo/parser", "dojo/domReady!"
    ], function(
    Map, ArcGISImageServiceLayer,
    parser
    ) {
    
    parser.parse();
    
    map = new Map("map", {
    basemap: "osm",
    center: [89.689085,39.09635],
    zoom: 6
    });
    
    var imageServiceLayer = new ArcGISImageServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/imageservertest/ImageServer", {
    opacity: 0.75
    });
    
    map.addLayer(imageServiceLayer);
    
    });
    
    </script>
    </head>
    <body>
    <div id="map"> </div>
    </body>
    </html>
    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    HDU 3336 Count the string(KMP+DP)
    PHP 错误与异常 笔记与总结(13 )自定义异常类
    数据分析中,你认为用户行为分析最重要的点是什么
    数据分析中,你认为用户行为分析最重要的点是什么
    如何进行大数据分析及处理_数据分析师
    如何进行大数据分析及处理_数据分析师
    大数据与传统数据的区别_数据分析师
    大数据与传统数据的区别_数据分析师
    数据分析师 之量化用户研究
    数据分析师 之量化用户研究
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794669.html
Copyright © 2011-2022 走看看