OpenLayers实例：打开ArcGIS Rest服务

最新推荐文章于 2024-01-28 14:59:13 发布

Sw1zzle

最新推荐文章于 2024-01-28 14:59:13 发布

阅读量1.3k

点赞数

文章标签： arcgis

本文链接：https://blog.csdn.net/Sw1zzle/article/details/115199797

版权

由于OpenLayers的例子实在太少并且没有注释，便在此整理工作中遇到的问题。

OpenLayers打开ArcGIS Rest 图层服务

html部分
javascript部分
运行效果

This example loads new features from ArcGIS REST Feature Service.

html部分

<!doctype html>
<html lang="en">
  <head>
    <title>ArcGIS REST Feature Service</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="../build/ol.js"></script>
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <h2>ArcGIS REST Feature Service</h2>
    <div id="map" class="map"></div>
  </body>
  <script src="main.js"></script>
 </html>

javascript部分

      var serviceUrl = 'Your ArcGIS Rest Feature Server url';
      //注意此处layer的值，取决于你想添加的图层
      var layer = '0';
      var esrijsonFormat = new ol.format.EsriJSON();
      var vectorSource = new ol.source.Vector({
          loader: function (extent, resolution, projection) {
          var url =
              serviceUrl +
              layer +
              '/query/?f=json&' +
              'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
              encodeURIComponent(
                '{"xmin":' +
                  extent[0] +
                  ',"ymin":' +
                  extent[1] +
                  ',"xmax":' +
                  extent[2] +
                  ',"ymax":' +
                  extent[3] +
                  ',"spatialReference":{"wkid":102100}}'
              ) +
              '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
              '&outSR=102100';
            $.ajax({
              url: url,
              dataType: 'jsonp',
              success: function (response) {
                if (response.error) {
                  alert(
                    response.error.message + '\n' + response.error.details.join('\n')
                  );
                } else {
                  // dataProjection will be read from document
                  var features = esrijsonFormat.readFeatures(response, {
                    featureProjection: projection,
                  });
                  if (features.length > 0) {
                    vectorSource.addFeatures(features);
                  }
                }
              },
            });
          },
          strategy: ol.loadingstrategy.tile(
            ol.tilegrid.createXYZ({
              tileSize: 512,
            })
          ),
        });
      //添加矢量图层
      var vector = new ol.layer.Vector({
        source: vectorSource,
      });
      //添加栅格底图
      var raster = new ol.layer.Tile({
        source: new ol.source.XYZ({
          attributions:
            'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
            'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
          url:
            'https://server.arcgisonline.com/ArcGIS/rest/services/' +
            'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        }),
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: ol.proj.fromLonLat([120.170205, 35.9418055]),
          zoom: 13,
        }),
      });

运行效果

在这里插入图片描述

Sw1zzle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers实例：打开ArcGIS Rest服务

由于OpenLayers的例子实在太少并且没有注释，便在此整理工作中遇到的问题。OpenLayers打开ArcGIS Rest 图层服务html部分javascript部分运行效果This example loads new features from ArcGIS REST Feature Service.html部分<!doctype html><html lang="en"> <head> <title>ArcGIS REST Fe
复制链接

扫一扫