2016-11-09 10 views
0

Ich möchte einen wmts Kartenservice in offenen Schichten verwenden.wmts als Grundkarte in openlayers 3 (basemap.at)

Die Wmts-Schicht sollte die Basisschicht sein und es sollte nur die Wmts-Schicht angezeigt werden, sonst nichts!

Das Problem hier mit offenen Schichten ist, dass ich nur die Osm-Schicht und nicht die Wmts Schicht überhaupt sehen kann.

Oder sollte ich die getCapabilities verwenden?

Wmts-Service

It should look like this

<!DOCTYPE html> 
<html> 
    <head> 
    <title>openlayers3</title> 
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css"> 
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script> 
    </head> 
    <body> 
    <div id="map" class="map"></div> 
    <script> 
     var projection = ol.proj.get('EPSG:3857'); 
     var projectionExtent = projection.getExtent(); 
     var size = ol.extent.getWidth(projectionExtent)/256; 
     var resolutions = new Array(14); 
     var matrixIds = new Array(14); 
     for (var z = 0; z < 14; ++z) { 
     // generate resolutions and matrixIds arrays for this WMTS 
     resolutions[z] = size/Math.pow(2, z); 
     matrixIds[z] = z; 
     } 

     var map = new ol.Map({ 
     layers: [ 
      new ol.layer.Tile({ 
      source: new ol.source.OSM(), 
      opacity: 0.7 
      }), 
      new ol.layer.Tile({ 
      source: new ol.source.WMTS({ 
       attributions: '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>', 
       url: "https://maps.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png", 
       layer: "geolandbasemap", 
       matrixSet: 'google3857', 
       format: 'image/png', 
       projection: projection, 
       tileGrid: new ol.tilegrid.WMTS({ 
       origin: ol.extent.getTopLeft(projectionExtent), 
       resolutions: resolutions, 
       matrixIds: matrixIds 
       }), 
       encoding: "REST", 
       style: 'normal', 
       wrapX: true, 
       visibile: true 
      }) 
      }) 
     ], 
     target: 'map', 
     controls: ol.control.defaults({ 
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
      collapsible: false 
      }) 
     }), 
     view: new ol.View({ 
      center: [1799448, 6124949], 
      zoom: 4 
     }) 
     }); </script> 
    </body> 
</html> 

Antwort

0

Sie können entweder die basemap.at Schichten aus den WMTS Fähigkeiten erstellen, wie im official example gezeigt ist, oder Sie einen pragmatischeren Ansatz wählen und verwenden ol.source.XYZ:

new ol.layer.Tile({ 
    // extent taken from the Capabilities XML 
    extent: ol.proj.transformExtent([8.782379, 46.358770, 17.189532, 49.037872], 'EPSG:4326', 'EPSG:3857'), 
    source: new ol.source.XYZ({ 
     maxZoom: 19, 
     attributions: [new ol.Attribution({ 
     html: 'Datenquelle: <a href="http://www.basemap.at">basemap.at</a> &copy; <a href="http://creativecommons.org/licenses/by/3.0/at/">CC BY 3.0 AT</a>' 
     })], 
     crossOrigin: 'anonymous', 
     url: '//maps{1-4}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png' 
    }) 
    }) 
0

können Sie diesen Code verwenden:

var projection = ol.proj.get('EPSG:3857'); 
    var tileSizePixels = 256; 
    var tileSizeMtrs = ol.extent.getWidth(projection.getExtent())/tileSizePixels; 
    var matrixIds = []; 
    var resolutions = []; 
    for (var i = 0; i <= 20; i++) { 
     matrixIds[i] = i; 
     resolutions[i] = tileSizeMtrs/Math.pow(2, i); 
    } 

var tileGrid = new ol.tilegrid.WMTS({ 
     origin: ol.extent.getTopLeft(projection.getExtent()), 
     resolutions: resolutions, 
     matrixIds: matrixIds 
    }); 

var wmtsSource = new ol.source.WMTS({ 
     url: 'WMTS url', 
     layer: 'LayerName', 
     format: 'image/png', 
     matrixSet: 'EPSG:3857', 
     tileGrid: tileGrid, 
     style: 'default', 
     dimensions: { 
      'threshold': 100 
     } 
    });