Image ArcGIS MapServer——ArcGIS地图图像服务

最新推荐文章于 2024-07-23 13:38:27 发布

桃李不言_下自成蹊

最新推荐文章于 2024-07-23 13:38:27 发布

阅读量2.3k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

该示例展示了如何利用OpenLayers与动态ArcGIS REST MapService交互，创建一个地图应用。数据源支持地图和图像服务，特别适合有标注的底图。通过ol.source.ImageArcGISRest设置数据源，实现地图显示。

摘要由CSDN通过智能技术生成

This example shows how to use a dynamic ArcGIS REST MapService. This source type supports Map and Image Services. For dyamic ArcGIS services.
这个例子用来展示如何使用动态的ArcGIS REST MapService，对于动态的ArcGIS服务来说，数据源的类型支持地图和图像服务。
代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Image ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
     //指定ArcGIS地图服务地址
    var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Image({
        /*
          ol.source.ImageArcGISRest:
          Source for data from ArcGIS Rest services providing single, untiled images. 
          来自ArcGIS Rest服务提供的单个、未切片的图像数据源
          Useful when underlying map service has labels.
          当底图服务有标注时有用
          If underlying map service is not using labels,
          如果底图服务不使用标注
          take advantage of ol image caching and use ol.source.TileArcGISRest data source.
          则利用图像缓存并使用ol.source.TileArcGISRest数据源
        */
        //指定数据源类型为ImageArcGISRest
       source: new ol.source.ImageArcGISRest({
            ratio: 1,
            params: {},
            url: url
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>