如何創建在某種程度上適合OpenLayers5的自定義圖塊

Question

我想創建一個在某種程度上非常合適的自定義圖塊。 例如，我希望能夠在開放源地圖的確切位置上將其映射到地圖上。 我看到了這個示例，但沒有說明如何制作圖塊以及如何制作圖塊以使其完全適合范圍。 下面的示例在一定程度上放置了自定義層，我想知道如何創建這樣的圖塊。 我正在使用XYZ源代碼。 示例取自：

https://openlayers.org/en/latest/examples/arcgis-tiled.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.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>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import TileLayer from 'ol/layer/Tile.js';
      import {OSM, TileArcGISRest} from 'ol/source.js';

      var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new TileLayer({
          source: new OSM()
        }),
        new TileLayer({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new TileArcGISRest({
            url: url
          })
        })
      ];
      var map = new Map({
        layers: layers,
        target: 'map',
        view: new View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

Answer 1

在該示例中，圖塊使用標准的EPSG：3857網格，與OSM層相同。 范圍已設置為將請求限制在特定區域（美國，包括夏威夷和阿拉斯加的大部分地區，但不包括阿留申群島的西端）。 縮放級別為零時，單個圖塊覆蓋整個世界（透明顯示為黑色）：

如果在OSM層上設置相同的范圍，則還將限制顯示的區域，但不會影響圖塊。 使用全局投影時，通常會堅持使用標准網格並限制圖層范圍以避免對沒有瓷磚的區域提出請求。 在其他投影中，您可以創建自己的網格，並在OpenLayers中使用源的tileGrid選項將其指定為匹配您創建的網格。

這是一個如何為https://server.arcgisonline.com/ArcGIS/rest/services/Polar/Antarctic_Imagery/MapServer設置自定義圖塊網格的示例

 // define polar projection proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); ol.proj.proj4.register(proj4); // redefine transforms to catch errors var inverse = ol.proj.getTransform('EPSG:3031', 'EPSG:3857'); var forward = ol.proj.getTransform('EPSG:3857', 'EPSG:3031'); ol.proj.addCoordinateTransforms( 'EPSG:3857', 'EPSG:3031', function(coordinate) { try { return forward(coordinate) } catch (e) { return [undefined, undefined] } }, function(coordinate) { try { return inverse(coordinate) } catch (e) { return [undefined, undefined] } } ); var baseMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', maxZoom: 23 }) }); var extent = [-3.369955099203E7, -3.369955099203E7, 3.369955099203E7, 3.369955099203E7]; var maxResolution = 238810.81335399998; var resolutions = []; for (var i = 0; i < 24; i++) { resolutions[i] = maxResolution / Math.pow(2, i); } var esriArctic = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}', projection: 'EPSG:3031', tileGrid: new ol.tilegrid.TileGrid({ extent: extent, resolutions: resolutions }) }) }); // create a "layer spy" around the pole esriArctic.on('precompose', function(event) { radius = 4000000 / event.frameState.viewState.resolution; var ctx = event.context; var pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); position = map.getPixelFromCoordinate(ol.proj.fromLonLat([0, -90], 'EPSG:3031')); // only show a circle around the position ctx.arc(position[0] * pixelRatio, position[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI); ctx.clip(); }); // after rendering the layer, restore the canvas context esriArctic.on('postcompose', function(event) { var ctx = event.context; ctx.restore(); }); var map = new ol.Map({ target: 'map', layers: [baseMapLayer, esriArctic], view: new ol.View({ projection: 'EPSG:3031', center: ol.proj.fromLonLat([0, -80], 'EPSG:3031'), zoom: 3 }) });

  html, body, #map { width: 100%; height: 100%; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <body> <div id="map" class="map"></div> </body>

如何創建在某種程度上適合OpenLayers5的自定義圖塊

問題描述

1 個解決方案

解決方案1
0 2019-08-02 09:05:11

如何創建在某種程度上適合OpenLayers5的自定義圖塊

問題描述

1 個解決方案

解決方案1 0 2019-08-02 09:05:11

解決方案1
0 2019-08-02 09:05:11