javascript - 为什么我无法向极坐标立体图添加经纬网? (开放层 4)

标签 javascript openlayers

我正在 OpenLayers 4 中使用投影 EPSG:32661 制作 map

这是 JavaScript,其目标是页面上的 #map div:

proj4.defs('EPSG:32661', '+proj=stere +lat_0=90 +lon_0=0 +k=1 +x_0=0 +y_0=0 
+a=3396190 +b=3376200 +units=m +no_defs');
var north_stereo = ol.proj.get('EPSG:32661');
north_stereo.setExtent([-2357032, -2357032, 2357032, 2357032]);
var npoleURL = "https://planetarymaps.usgs.gov/cgi-bin/mapserv? 
map=/maps/mars/mars_npole.map";

var np = new ol.layer.Tile({
    title: 'North Pole',
    source: new ol.source.TileWMS({
        url: npoleURL,
        params: {LAYERS: 'MOLA_color_north'}
    }),
    projection: north_stereo,
});

var map = new ol.Map({
    layers: [
        np
    ],
target: 'map',
view: new ol.View({
    projection: north_stereo,
    center: [0, 0],
    zoom: 4
  })
});
var graticule = new ol.Graticule({
    strokeStyle: new ol.style.Stroke({
        color: 'rgba(0,0,0,0.8)',
        width: 1,
    }),
});
graticule.setMap(map);

This CodePen展示了我遇到的问题。注释掉最后一行(即将经纬网附加到 map 的行)会使 map 正常渲染。运行包含该行的代码会导致以下错误:

Uncaught TypeError: Cannot read property '0' of null
at Object.ol.extent.applyTransform (ol-debug.js:4719)
at Object.ol.proj.transformExtent (ol-debug.js:6268)
at ol.Graticule.updateProjectionInfo_ (ol-debug.js:57921)
at ol.Graticule.handlePostCompose_ (ol-debug.js:57876)
at ol.Map.boundListener (ol-debug.js:7277)
at ol.Map.ol.events.EventTarget.dispatchEvent (ol-debug.js:7697)
at ol.renderer.canvas.Map.dispatchComposeEvent_ (ol-debug.js:26392)
at ol.renderer.canvas.Map.renderFrame (ol-debug.js:26480)
at ol.Map.ol.PluggableMap.renderFrame_ (ol-debug.js:18709)
at ol.Map.<anonymous> (ol-debug.js:17624)

据我了解,proj4会自动生成转换函数。变换点或要素图层已成功,据我所知,经纬网是唯一造成麻烦的东西。

最佳答案

该错误是由于没有定义 worldExtent 引起的,设置此项应该可以解决问题

north_stereo.setWorldExtent([...]);

关于javascript - 为什么我无法向极坐标立体图添加经纬网? (开放层 4),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50767484/

相关文章:

javascript - 如何使用 Amazon Cognito sdk 实现 *Remember me* 选项?

javascript - Style.color = "blue"不起作用

javascript - 使用 jQuery 解析自定义 XML 模式

javascript - 如何使用 MOBAC 通过 OpenLayers 创建的 map 集作为离线 map ?

javascript - 自定义控件 Openlayers 3 上的平滑缩放

javascript - 将 OpenLayers map 作为 SVG foreignObject 嵌入会导致 map 出现在所有其他 SVG 元素之上,而不管 SVG 元素顺序如何

javascript - 检查 uuid(在数据库中)是否存在

javascript - 确定 TypedArray 项的值范围

javascript - 从 WFS 加载时,不会维护 OpenLayers 几何名称

json - 在 OpenLayers 中保存和恢复几何图形