javascript - OpenLayers: map 不会使用非 'standard' EPSG 代码呈现-6ren

javascript - OpenLayers: map 不会使用非 'standard' EPSG 代码呈现

转载作者：行者123 更新时间：2023-11-30 19:45:39

我在使用 EPSG 3031 中的 map 时遇到问题。

根据我的研究，我已经了解到投影参数必须在 javascript 文件中定义，因此 epsg.io 在我的脚本中工作正常。

但是当我在新创建的 View 和变换后的中心使用实际的 EPSG:3031 时， map 不会呈现。唯一可行的方法是选择中心为 [0,0] 的 EPSG:4326 或 3857，这实际上没有任何意义。

我的 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 -->

我怎样才能让它工作，为什么它现在不能工作？

最佳答案

非全局投影中的 Arcgis 源具有非标准的切片网格。如果可以添加正确的 tilegrid，@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 tilegrid 不同，tiles 并不完全适合范围

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>

再投影中极点处的白洞主要是透明的，快速解决方法是在 css 中设置 map div 背景以匹配冰，例如

   .map {
     background-color: #e7e9f6;
   }

但是，薄薄的白色边缘仍然可见。

基于层 spy 示例的更好解决方案 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>

关于javascript - OpenLayers: map 不会使用非 'standard' EPSG 代码呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54978836/

文章推荐： c# - 启动代码没有运行？

文章推荐： c# - CriticalFinalizerObject 用法误区？

JavaScript Standard Style（JS Standard 代码风格规则详解）
JavaScript Standard Style 翻译： Português, Spanish, 繁體中文, 简体中文 standard 规则列表，太多不必阅读。了解 standard 的最好方式
Ant 执行 : redirecting standard out but not standard error
我有一个 exec我使用 outputproperty 将其输出放入属性的任务属性。该命令可能会向 stderr 打印一些错误，我不希望将这些错误包含在输出中(因为输出被馈送到另一个命令中)，而是要打
.net-standard - 如何将 .NET Standard 代码标记为符合 CLS？
标题说明了一切 - 如何将 .NET 标准库标记为符合 CLS？我用 C# 编写了一个简单的库，目标是 .NET Standard 1.0 框架。它包括两个枚举: public enum Align
powershell - 将 'standard error' 更改为 'standard output'
我有一个写入错误输出的 PowerShell 脚本。该脚本可以简单如下: Write-Error 'foo' Start-Sleep -s 5 Write-Error 'bar' 我实际调用的脚本产生
.net-standard - 使 .NET Standard 库 COM 可见？
对于完整的 .NET 项目，您可以在 Project Properties > Application tab > Assembly Information.. 中勾选一个框以使项目 COM 可见。
.net-standard - 基于 appveyor .NET Standard 2.0 构建
我将我的项目 ( https://github.com/MarkKhromov/The-Log) 迁移到 .NET Standard 2.0，但我的应用程序构建已损坏。我该如何解决这个问题？我的解决
c++ - "standard output stream"和 "standard output device"有什么区别？
互联网上的许多文章都使用“标准输入/输出/错误流”术语好像每个术语都与使用的“标准输入/输出/错误设备”术语具有相同的含义在其他文章上。例如，很多文章说标准输出流默认是监视器，但可以重定向到文件、打印
go - 错误 : Non-standard import "gopkg.in/yaml.v2" in standard package
我正在尝试从 https://github.com/go-yaml/yaml 导入 go-yaml ，并且我看到了 Google 未提供帮助的错误。我运行了 go get gopkg.in/yaml
c# - .NET 中的 "US Eastern Standard Time"与 "Eastern Standard Time"
在列出 TimeZoneInfo.GetSystemTimeZones 返回的 TimeZoneInfo 的所有 Id 属性时，出现了两个版本的 EST:美国东部标准时间和东部标准时间。有什么区别？
C 统一码 : How do I apply C11 standard amendment DR488 fix to C11 standard function c16rtomb()?
问题: 如函数的 C 引用页所述，c16rtomb，来自 CPPReference ，在注释部分下: In C11 as published, unlike mbrtoc16, which conve
mysql - 错误 : non-standard import "github.com/go-sql-driver/mysql" in standard package
我想使用 go 语言从我的数据库中检索一些数据。这是我在文件 main.go 中的代码的开头 package main import ( _ "github.com/go-sql-driver
standards - STM32F4立体声MEMS麦克风
我一直在通过STM32F4发现进行音频项目，我注意到一件事，所有I2S标准仅适用于一个麦克风(取决于标准使用单独的位的哪个边缘)。例如飞利浦(Philips)，MSB或LSB标准使用下降沿作为位触发，
standards - 汇编语言标准
有没有标准定义了语法和语义的汇编语言 ?与语言类似 C 有 ISO 标准和语言 C# 有 ECMA 标准？是只有一种标准，还是有更多标准？我问是因为我noticed那个汇编语言代码看了不同
standards - 软件版本标准
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 1年前关闭。 Improve this
standards - 在URL中使用重复的参数
我们正在内部构建API，并且经常传递带有多个值的参数。他们使用：mysite.com?id=1&id=2&id=3 代替：mysite.com?id=1,2,3 我赞成第二种方法，但我很好奇是否真的
standards - 是否有任何NoSQL标准出现？
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be
standards - 什么是RFC？
我认为有很多人不知道RFC（征求意见）。我知道它们在逻辑上是什么，但是有人能为新开发人员提供一个很好的描述吗？另外，共享一些有关如何使用和阅读它们的资源也很好。最佳答案这个术语来自互联网的前身AR
standards - 索马里兰国家缩写
我找不到 Somaliland 的两个字母的国家/地区缩写，可能是因为它不是一个国家，而是正如维基百科所说:“一个未被承认的 self 宣布的事实上的主权国家，被国际承认为索马里的一个自治区”。尽管如
standards - 格式化日志的最佳实践是什么？
我正在编写一款蜜 jar 软件，该软件将对其交互进行大量记录，我计划记录纯文本 .log 文件。我有两个问题，来自不太熟悉服务器日志方式的人。首先，我该如何分解我的日志文件，我假设运行一个月后我不
standards - 什么时候最好更改代码以符合标准？
我最近负责调试两个不同的程序，这两个程序最终至少需要共享一个 XML 解析脚本。一个是用 PureMVC 编写的，另一个是从头开始构建的。虽然最初从头开始编写是有意义的(它节省了大量内存，但内存问题已

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - OpenLayers: map 不会使用非 'standard' EPSG 代码呈现