Проблема выполнения проекции-преобразования координат, для использования в Leaflet - PullRequest
Новая
       97

Проблема выполнения проекции-преобразования координат, для использования в Leaflet

0 голосов
/ 07 декабря 2018

Я могу загрузить карту листовки и добавить цифры: https://jsfiddle.net/user3493503/sdLtvrew/

Мне нравится использовать другой базовый слой, и я могу сделать это с помощью ключа.https://jsfiddle.net/user3493503/s9fyxem4/5/

Вы можете временно получить свой собственный ключ здесь: http://webkartet.no/getSOkey.php

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin="">
    </script>
    <!-- WMTS-script from https://github.com/mylen/leaflet.TileLayer.WMTS -->
    <script>L.TileLayer.WMTS=L.TileLayer.extend({defaultWmtsParams:{service:'WMTS',request:'GetTile',version:'1.0.0',layers:'',styles:'',tilematrixSet:'',format:'image/jpeg'},initialize:function(url,options){this._url=url;var wmtsParams=L.extend({},this.defaultWmtsParams);var tileSize=options.tileSize||this.options.tileSize;if(options.detectRetina&&L.Browser.retina){wmtsParams.width=wmtsParams.height=tileSize*2;}else{wmtsParams.width=wmtsParams.height=tileSize;} for(var i in options){if(!this.options.hasOwnProperty(i)&&i!="matrixIds"){wmtsParams[i]=options[i];}} this.wmtsParams=wmtsParams;this.matrixIds=options.matrixIds||this.getDefaultMatrix();L.setOptions(this,options);},onAdd:function(map){this._crs=this.options.crs||map.options.crs;L.TileLayer.prototype.onAdd.call(this,map);},getTileUrl:function(coords){var tileSize=this.options.tileSize;var nwPoint=coords.multiplyBy(tileSize);nwPoint.x+=1;nwPoint.y-=1;var sePoint=nwPoint.add(new L.Point(tileSize,tileSize));var zoom=this._tileZoom;var nw=this._crs.project(this._map.unproject(nwPoint,zoom));var se=this._crs.project(this._map.unproject(sePoint,zoom));tilewidth=se.x-nw.x;var ident=this.matrixIds[zoom].identifier;var tilematrix=""+ident;var X0=this.matrixIds[zoom].topLeftCorner.lng;var Y0=this.matrixIds[zoom].topLeftCorner.lat;var tilecol=Math.floor((nw.x-X0)/tilewidth);var tilerow=-Math.floor((nw.y-Y0)/tilewidth);var url=L.Util.template(this._url,{s:this._getSubdomain(coords)});return url+L.Util.getParamString(this.wmtsParams,url)+"&tilematrix="+tilematrix+"&tilerow="+tilerow+"&tilecol="+tilecol;},setParams:function(params,noRedraw){L.extend(this.wmtsParams,params);if(!noRedraw){this.redraw();} return this;},getDefaultMatrix:function(){var matrixIds3857=new Array(22);for(var i=0;i<22;i++){matrixIds3857[i]={identifier:""+i,topLeftCorner:new L.LatLng(20037508.3428,-20037508.3428)};} return matrixIds3857;}});L.tileLayer.wmts=function(url,options){return new L.TileLayer.WMTS(url,options);};
    </script>
  </head>
  <body style="margin:0;">
      <div id = "map" style="height: 100vh;">
      </div>     

      <!-- Javascript -->
      <script>
        var key = "your own key"
        var url = "https://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?&gkt=" + key;
        var ign2 = new L.TileLayer.WMTS( url ,
                               {
                                   layer: "Nibcache_UTM32_EUREF89",
                                   style: "default",
                                   tilematrixset: "default028mm",
                                   format: "image/png",
                                   height:256,
                                                   width:256,
                                }
                               );
         var mapi = L.map('map').setView([23.04,-19.21], 16);
         mapi.addLayer(ign2);
    </script>
  </body>
</html>

Однако мне не удалось преобразовать координаты, чтобы цифры (полигоны и изображения)) можно добавить.Я провел большую часть своего дня, пытаясь понять это.Как мне двигаться дальше?

Вот моя попытка: 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <!-- Scripts for transforming projections -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script> <!-- https://kartena.github.io/Proj4Leaflet/ -->

    <!-- Script for loading WMTS | https://github.com/mylen/leaflet.TileLayer.WMTS -->
    <script>L.TileLayer.WMTS=L.TileLayer.extend({defaultWmtsParams:{service:'WMTS',request:'GetTile',version:'1.0.0',layers:'',styles:'',tilematrixSet:'',format:'image/jpeg'},initialize:function(url,options){this._url=url;var wmtsParams=L.extend({},this.defaultWmtsParams);var tileSize=options.tileSize||this.options.tileSize;if(options.detectRetina&&L.Browser.retina){wmtsParams.width=wmtsParams.height=tileSize*2;}else{wmtsParams.width=wmtsParams.height=tileSize;} for(var i in options){if(!this.options.hasOwnProperty(i)&&i!="matrixIds"){wmtsParams[i]=options[i];}} this.wmtsParams=wmtsParams;this.matrixIds=options.matrixIds||this.getDefaultMatrix();L.setOptions(this,options);},onAdd:function(map){this._crs=this.options.crs||map.options.crs;L.TileLayer.prototype.onAdd.call(this,map);},getTileUrl:function(coords){var tileSize=this.options.tileSize;var nwPoint=coords.multiplyBy(tileSize);nwPoint.x+=1;nwPoint.y-=1;var sePoint=nwPoint.add(new L.Point(tileSize,tileSize));var zoom=this._tileZoom;var nw=this._crs.project(this._map.unproject(nwPoint,zoom));var se=this._crs.project(this._map.unproject(sePoint,zoom));tilewidth=se.x-nw.x;var ident=this.matrixIds[zoom].identifier;var tilematrix=""+ident;var X0=this.matrixIds[zoom].topLeftCorner.lng;var Y0=this.matrixIds[zoom].topLeftCorner.lat;var tilecol=Math.floor((nw.x-X0)/tilewidth);var tilerow=-Math.floor((nw.y-Y0)/tilewidth);var url=L.Util.template(this._url,{s:this._getSubdomain(coords)});return url+L.Util.getParamString(this.wmtsParams,url)+"&tilematrix="+tilematrix+"&tilerow="+tilerow+"&tilecol="+tilecol;},setParams:function(params,noRedraw){L.extend(this.wmtsParams,params);if(!noRedraw){this.redraw();} return this;},getDefaultMatrix:function(){var matrixIds3857=new Array(22);for(var i=0;i<22;i++){matrixIds3857[i]={identifier:""+i,topLeftCorner:new L.LatLng(20037508.3428,-20037508.3428)};} return matrixIds3857;}});L.tileLayer.wmts=function(url,options){return new L.TileLayer.WMTS(url,options);};
    </script>

  </head>

  <body>
      <div id = "map">
      </div>
      <script>


    // TRANSFORMATIN OF PROJECTION
    // For basic usage, you need to create a L.Proj.CRS to represent the projection and CRS you want to use. 
    // To do this, you need to provide a Proj4 definition of the projection. 
    // If you do not already have the definition, you can find most at sites like epsg.io or spatialreference.org.

        // Depending on the configuration of your tiles, you might also need additional options for the CRS. 
        // Most common is to defined an origin for the tiles (where tile (0,0) is located) and the scale or resolution to use for zoom levels.

    var key = 'my key';

    var crs = new L.Proj.CRS('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
       {
          resolutions: [
             131073, 65537, 32769, 16385, 8193, 4097, 2049, 1025, 513, 257, 129, 65, 33, 17, 9, 5, 3, 2
          ],
          origin: [-2000000.0000000000000000, 3500000.0000000000000000],
          bounds:  L.bounds( [-2000000.0000000000000000, 3500000.0000000000000000], [3545984.0000000000000000, 9045984.0000000000000000])
       }),

    mapi = new L.Map('map', {
        crs: crs,
        continuousWorld: true,
     });

  new L.TileLayer.WMTS('https://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?&gkt=' + key, {
       layer: "Nibcache_UTM32_EUREF89",
       style: "default",
       tilematrixset: "default028mm",
       Service= "WMTS",
       Request= "GetTile",
       Version= "1.0.0",
       format: "image/png",
     height:256,
       width:256,
       maxZoom: 9,
       minZoom: 0,
       continuousWorld: true,
       attribution: '',
     }).addTo(mapi);

     mapi.setView([59.877812, 8.590628], 17);
  </script>

Дополнительная информация: XMLschema 

<?xml version="1.0" encoding="UTF-8"?>
<Capabilities xmlns="http://www.opengis.net/wmts/1.0"
xmlns:ows="http://www.opengis.net/ows/1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:gml="http://www.opengis.net/gml"
xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd"
version="1.0.0">
<!-- Service Identification --> <ows:ServiceIdentification>
<ows:Title>Nibcache_UTM32_EUREF89_v2</ows:Title>
<ows:ServiceType>OGC WMTS</ows:ServiceType>
<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
</ows:ServiceIdentification> <!-- Operations Metadata --> <ows:OperationsMetadata>
<ows:Operation name="GetCapabilities">
<ows:DCP>
<ows:HTTP>
<ows:Get xlink:href="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS/1.0.0/WMTSCapabilities.xml">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>RESTful</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
<!-- add KVP binding in 10.1 -->
<ows:Get xlink:href="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS?">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>KVP</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
</ows:HTTP>
</ows:DCP>
</ows:Operation>
<ows:Operation name="GetTile">
<ows:DCP>
<ows:HTTP>
<ows:Get xlink:href="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS/tile/1.0.0/">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>RESTful</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
<ows:Get xlink:href="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS?">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>KVP</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
</ows:HTTP>
</ows:DCP>
</ows:Operation>
</ows:OperationsMetadata> <Contents>
<!--Layer--> <Layer>
<ows:Title>Nibcache_UTM32_EUREF89_v2</ows:Title> <ows:Identifier>Nibcache_UTM32_EUREF89_v2</ows:Identifier>
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::25832">
<ows:LowerCorner>-2000000.0 3500000.0</ows:LowerCorner>
<ows:UpperCorner>3545984.0 9045984.0</ows:UpperCorner>
</ows:BoundingBox> <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
<ows:LowerCorner>-35.99999055523456 28.012827000815033</ows:LowerCorner>
<ows:UpperCorner>53.999993571986806 81.47283804206918</ows:UpperCorner>
</ows:WGS84BoundingBox>
<Style isDefault="true">
<ows:Title>Default Style</ows:Title>
<ows:Identifier>default</ows:Identifier>
</Style>
<Format>image/jpgpng</Format>
<TileMatrixSetLink>
<TileMatrixSet>default028mm</TileMatrixSet>
</TileMatrixSetLink>
<ResourceURL format="image/jpgpng" resourceType="tile" template="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS/tile/1.0.0/Nibcache_UTM32_EUREF89_v2/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}" />
</Layer> <!--TileMatrixSet-->
<TileMatrixSet>
<ows:Title>TileMatrix using 0.28mm</ows:Title>
<ows:Abstract>The tile matrix set that has scale values calculated based on the dpi defined by OGC specification (dpi assumes 0.28mm as the physical distance of a pixel).</ows:Abstract> <ows:Identifier>default028mm</ows:Identifier>
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::25832</ows:SupportedCRS>
<TileMatrix>
<ows:Identifier>0</ows:Identifier>
<ScaleDenominator>7.737142857141884E7</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>2</MatrixWidth> <MatrixHeight>2</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>1</ows:Identifier>
<ScaleDenominator>3.868571428570942E7</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>3</MatrixWidth> <MatrixHeight>3</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>2</ows:Identifier>
<ScaleDenominator>1.934285714285471E7</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>5</MatrixWidth> <MatrixHeight>5</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>3</ows:Identifier>
<ScaleDenominator>9671428.571427355</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>9</MatrixWidth> <MatrixHeight>9</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>4</ows:Identifier>
<ScaleDenominator>4835714.285713677</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>17</MatrixWidth> <MatrixHeight>17</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>5</ows:Identifier>
<ScaleDenominator>2417857.1428568386</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>33</MatrixWidth> <MatrixHeight>33</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>6</ows:Identifier>
<ScaleDenominator>1208928.5714284193</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>65</MatrixWidth> <MatrixHeight>65</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>7</ows:Identifier>
<ScaleDenominator>604464.2857142097</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>129</MatrixWidth> <MatrixHeight>129</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>8</ows:Identifier>
<ScaleDenominator>302232.14285710483</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>257</MatrixWidth> <MatrixHeight>257</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>9</ows:Identifier>
<ScaleDenominator>151116.07142855242</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>513</MatrixWidth> <MatrixHeight>513</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>10</ows:Identifier>
<ScaleDenominator>75558.03571427621</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>1025</MatrixWidth> <MatrixHeight>1025</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>11</ows:Identifier>
<ScaleDenominator>37779.017857138104</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>2049</MatrixWidth> <MatrixHeight>2049</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>12</ows:Identifier>
<ScaleDenominator>18889.508928569052</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>4097</MatrixWidth> <MatrixHeight>4097</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>13</ows:Identifier>
<ScaleDenominator>9444.754464284526</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>8193</MatrixWidth> <MatrixHeight>8193</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>14</ows:Identifier>
<ScaleDenominator>4722.377232142263</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>16385</MatrixWidth> <MatrixHeight>16385</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>15</ows:Identifier>
<ScaleDenominator>2361.1886160711315</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>32769</MatrixWidth> <MatrixHeight>32769</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>16</ows:Identifier>
<ScaleDenominator>1180.5943080355657</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>65537</MatrixWidth> <MatrixHeight>65537</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>17</ows:Identifier>
<ScaleDenominator>590.2971540177829</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner> <TileWidth>256</TileWidth> <TileHeight>256</TileHeight>
<MatrixWidth>131073</MatrixWidth> <MatrixHeight>131073</MatrixHeight>
</TileMatrix>
</TileMatrixSet>
</Contents>
<ServiceMetadataURL xlink:href="http://gatekeeper1.geonorge.no/arcgis/rest/services/Nibcache_UTM32_EUREF89_v2/MapServer/WMTS/1.0.0/WMTSCapabilities.xml" /> </Capabilities>
...