Question

У меня проблема с получением карты в EPSG 3031.

Из моего исследования я уже узнал, что параметры для проекции должны быть определены в файле javascript, что соответствует epsg.io отлично работает в моем сценарии.

Но когда я использую фактический EPSG: 3031 в моем новом созданном виде и моем преобразованном центре, карта не отображается.Единственный способ, которым это работает, - это выбрать EPSG: 4326 или 3857 с центром [0,0], что на самом деле не имеет никакого смысла.

Мой JavaScript выглядит так:

// register EPSG
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");

//set projection
var proj3031=ol.proj.get('EPSG:3031');

//test if coordinate transformation is properly working

var center2 = ol.proj.transform([0, -80], 'EPSG:4326', 'EPSG:3031');
;

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var esriArctic = new ol.layer.Tile({
	title : 'ESRI Imagery',
	type : 'base',
	zIndex: 0,				
	source : new ol.source.XYZ({
		attributions : [new ol.Attribution({
			html : 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/rest/services/Polar/Antarctic_Imagery/MapServer">ArcGIS</a>'
		})],
		url : 'https://server.arcgisonline.com/ArcGIS/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}',
		wrapX: false,
	})
});
var map = new ol.Map({
  target: 'map',
  layers: [ esriArctic],
  //layers: [ baseMapLayer],
  view: new ol.View({
	  //projection: "EPSG:4326",
	  projection: proj3031,
    //center: [0,0],
    center: center2, 
    zoom: 5 //Initial Zoom Level
        })
});

И мой HTML выглядит так:

<!DOCTYPE html> 
<style type="text/css">
  #map{
   width:100%;
   height:600px;
  }
 </style>
 <!--Basic styling for map div, 
 if height is not defined the div will show up with 0 px height  -->

</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
<script src="http://epsg.io/3031.js"></script>

<body>
 <div id="map">
  <!-- Your map will be shown inside this div-->
 </div>
</body>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
 <script type="text/javascript" src="map.js" type="text/javascript"></script>
 <!-- Our map file -->

</html>>
 <!-- Openlayesr JS fIle -->

Как мне заставить это работать и почему это не работает прямо сейчас?

Mike · Answer 1 · 04 марта 2019

Источники Arcgis в неглобальных проекциях имеют нестандартные сетки листов.Метод @ RalphL будет работать, если можно добавить правильную мозаичную сетку, но это можно сделать автоматически, определив ее как источник TileArcGISRest.Если вы хотите использовать OSM в качестве репроекций базового уровня, таких как EPSG: 3857, который не может достичь полюсов с полярными координатами, это вызывает ошибки, которые OpenLayers не обрабатывает, и вылетает.Я обхожу это путем определения функций преобразования, которые проходят через промежуточную проекцию, которая позволяет коду перехватывать любые ошибки.

function reprojectionErrorHandler(projections, opt_intermediate) {

  var intermediate = opt_intermediate || 'EPSG:4269';

  function transform(projA, projB) {

    return function (input, opt_output, opt_dimension) {
        var length = input.length;
        var dimension = opt_dimension !== undefined ? opt_dimension : 2;
        var output = opt_output !== undefined ? opt_output : new Array(length);
        var ll, point, i, j;
        try {
            for (i = 0; i < length; i += dimension) {
                ll = ol.proj.transform([input[i], input[i + 1]], projA, intermediate);
                point = ol.proj.transform([ll[i], ll[i + 1]], intermediate, projB);
                output[i] = point[0];
                output[i + 1] = point[1];
                for (j = dimension - 1; j >= 2; --j) {
                    output[i + j] = input[i + j];
                }
            }
        } catch (e) {}
        return output;
    };

  }

  if (Array.isArray(projections)) {
    for (i = 0; i < projections.length-1; i++) {
        for (j = i+1; j < projections.length; j++) {
            if (ol.proj.get(projections[i]).getCode() != ol.proj.get(projections[j]).getCode() &&
                ol.proj.get(projections[i]).getCode() != ol.proj.get(intermediate).getCode() &&
                ol.proj.get(projections[j]).getCode() != ol.proj.get(intermediate).getCode() ) {

                ol.proj.addCoordinateTransforms(
                    projections[i],
                    projections[j],
                    transform(projections[i], projections[j]),
                    transform(projections[j], projections[i])
                );

                ol.proj.addCoordinateTransforms(
                    projections[j],
                    projections[i],
                    transform(projections[j], projections[i]),
                    transform(projections[i], projections[j])
                );

            }
        }
    }
  }

}

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);
var proj3031 = ol.proj.get('EPSG:3031');

reprojectionErrorHandler(['EPSG:3031', 'EPSG:3857'])

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var esriArctic = new ol.layer.Tile({
  title: 'ESRI Imagery',
  type: 'base',
  zIndex: 0,
  opacity: 0.5,
  source: new ol.source.TileArcGISRest({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer'
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [baseMapLayer, esriArctic],
  view: new ol.View({
    projection: proj3031,
    center: ol.proj.fromLonLat([0, -80], proj3031),
    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>

Вот метод @ RalphL, центрированный в правильном месте с сеткой плиток, основанный на полном экстенте и максимальном разрешении, перечисленных здесь https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer В отличие отнормальный EPSG: 3857 тайловых плиток, которые не совсем подходят для экстента

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);
var proj3031 = ol.proj.get('EPSG:3031');

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({
  title: 'ESRI Imagery',
  type: 'base',
  zIndex: 0,
  source: new ol.source.XYZ({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}',
    projection: proj3031,
    tileGrid: new ol.tilegrid.TileGrid({ extent: extent, resolutions: resolutions }),
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [esriArctic],
  view: new ol.View({
    projection: proj3031,
    center: ol.proj.fromLonLat([0, -80], proj3031),
    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>

Белая дыра на полюсе в репроекциях - это в основном прозрачность, и быстрое решение проблемы - установить фон карты div в css, чтобы он соответствовал льдуНапример,

   .map {
     background-color: #e7e9f6;
   }

Тем не менее, тонкий белый ободок все еще виден.

Лучшим решением на основе примера шпионского слоя https://openlayers.org/en/v4.6.5/examples/layer-spy.html может быть ограничение реальногопрозрачное белое окружение от антарктического слоя

function reprojectionErrorHandler(projections, opt_intermediate) {

  var intermediate = opt_intermediate || 'EPSG:4269';

  function transform(projA, projB) {

    return function (input, opt_output, opt_dimension) {
        var length = input.length;
        var dimension = opt_dimension !== undefined ? opt_dimension : 2;
        var output = opt_output !== undefined ? opt_output : new Array(length);
        var ll, point, i, j;
        try {
            for (i = 0; i < length; i += dimension) {
                ll = ol.proj.transform([input[i], input[i + 1]], projA, intermediate);
                point = ol.proj.transform([ll[i], ll[i + 1]], intermediate, projB);
                output[i] = point[0];
                output[i + 1] = point[1];
                for (j = dimension - 1; j >= 2; --j) {
                    output[i + j] = input[i + j];
                }
            }
        } catch (e) {}
        return output;
    };

  }

  if (Array.isArray(projections)) {
    for (i = 0; i < projections.length-1; i++) {
        for (j = i+1; j < projections.length; j++) {
            if (ol.proj.get(projections[i]).getCode() != ol.proj.get(projections[j]).getCode() &&
                ol.proj.get(projections[i]).getCode() != ol.proj.get(intermediate).getCode() &&
                ol.proj.get(projections[j]).getCode() != ol.proj.get(intermediate).getCode() ) {

                ol.proj.addCoordinateTransforms(
                    projections[i],
                    projections[j],
                    transform(projections[i], projections[j]),
                    transform(projections[j], projections[i])
                );

                ol.proj.addCoordinateTransforms(
                    projections[j],
                    projections[i],
                    transform(projections[j], projections[i]),
                    transform(projections[i], projections[j])
                );

            }
        }
    }
  }

}

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);
var proj3031 = ol.proj.get('EPSG:3031');

reprojectionErrorHandler(['EPSG:3031', 'EPSG:3857'])

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({
  title: 'ESRI Imagery',
  type: 'base',
  zIndex: 0,
  source: new ol.source.XYZ({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}',
    projection: proj3031,
    tileGrid: new ol.tilegrid.TileGrid({ extent: extent, resolutions: resolutions }),
  })
});

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.transform([0, -90], 'EPSG:4326', '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: proj3031,
    center: ol.proj.fromLonLat([0, -80], proj3031),
    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>

RalphL · Answer 2 · 04 марта 2019

Пожалуйста, посмотрите на следующий фрагмент:

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);
var proj3031 = ol.proj.get('EPSG:3031');

var esriArctic = new ol.layer.Tile({
  title: 'ESRI Imagery',
  type: 'base',
  zIndex: 0,
  source: new ol.source.XYZ({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}'
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [esriArctic],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, -80], proj3031),
    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>

OpenLayers: карта не отображается с нестандартным EPSG-кодом

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

OpenLayers: карта не отображается с нестандартным EPSG-кодом

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы