javascript - OpenLayers addLayers 失败并出现 TypeError
问题描述
我正在从 OpenLayers 3.15.0 更新到 6.3.1。当我调用 map.addLayer 时,我收到以下错误:
Uncaught TypeError: Cannot read property 'ol_uid' of undefined @
ecb://web/java/ol.js:1:23754
这是调用它的上下文:
function getMinZoom() {
var width = map.clientWidth;
return Math.ceil(Math.LOG2E * Math.log(width / 256));
}
//create wms layer
function addWMSLayer(url, attTxt, attHref, layer, format, server, res1, res2, res3, res4) {
initializeMap();
//tile source for load wms layers
var newRes1 = Number(getCalcResolutionSrv(res1));
var newRes2 = Number(getCalcResolutionSrv(res2));
var newRes3 = Number(getCalcResolutionSrv(res3));
var newRes4 = Number(getCalcResolutionSrv(res4));
var newWMSSource = new ol.source.TileWMS({
url: url,
params: {
'LAYERS': layer,
'FORMAT': format,
},
serverType: 'mapserver',
projection: projection
});
var minZoom = getMinZoom();
var newWmsLayer = new ol.layer.Tile({
extent: extent,
source: newWMSSource,
minResolution: newRes4,
maxResolution: newRes1,
zIndex: 0,
minZoom: minZoom
});
wmsResolution.push(Number(newRes1 - 0.00100));
wmsResolution.push(newRes2);
wmsResolution.push(newRes3);
wmsResolution.push(Number(newRes4 + 0.00100));
map.addLayer(newWmsLayer);
ECBJS.addNewWMSLayer(url, layer, newRes1, newRes2, newRes3, newRes4);
};
除了属性 zIndex 和 minZoom 之外,该函数与 3.15.0 中用于调用 addLayer 的函数相同。在 3.15.0 中它正在工作。
可能是什么问题呢?
更新
我基于 CefSharp 的 MinimalExample 创建了一个 MinimalExample 解决方案。您需要 Visual Studio 或 Rider 才能打开它。 https://github.com/tbremeyer/CefSharp.MinimalExample.git
目前,在 MainWindows.xaml.cs 中的 CallWebSite 函数中对 EvaluateScriptAsync 的调用返回
Message = "Uncaught TypeError: Cannot read property 'ol_uid' of
undefined @ ecb://web/java/ol.js:1:23754"
Success = false
我希望它会返回
Message = ""
Success = true
解决方案
地图对象未正确初始化。这是创建地图的代码:
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: 'metric'
})
]).extend([mousePositionControl]),
layers: [filterVector],
overlays: [overlay],
logo: false,
target: 'map',
view: new ol.View({
})
});
它使用 mousePositionControl 扩展。mousePositionControl 定义为:
var mousePositionControl = new ol.control.MousePosition(
{
coordinateFormat: ol.coordinate.createStringXY(1),
projection: 'EPSG:2056',
className: 'custom-mouse-position',
target: document.getElementById('info'),
undefinedHTML: ' '
});
所以它使用投影。投影未正确初始化。
var extent = [2420000, 130000, 2900000, 1350000];
var jsLayers = new Object();
if (proj4) {
proj4.defs("EPSG:2056", "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs");
};
var projection = ol.proj.get('EPSG:2056');
projection.setExtent(extent);
来自OpenLayers:地图不使用我学到的非“标准”EPSG 代码渲染,我可以使用
ol.proj.proj4.register(proj4);
帮助投影。现在是这样写的:
var extent = [2420000, 130000, 2900000, 1350000];
var jsLayers = new Object();
if (proj4) {
proj4.defs("EPSG:2056", "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs");
};
ol.proj.proj4.register(proj4);
var projection = ol.proj.get('EPSG:2056');
projection.setExtent(extent);
在此更改之后,filterVector 丢失了,并且必须在地图初始化之前将覆盖的定义移动到。
var filterSource = new ol.source.Vector({ wrapX: false });
var filterVector = new ol.layer.Vector({
source: filterSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.5)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
我在https://github.com/tbremeyer/CefSharp.MinimalExample更新了最小示例以反映这些更改。
推荐阅读
- php - 在 WordPress 的 Elementor Form 中显示自定义 PHP 代码的动态下拉列表
- vue.js - 更改 vue2leaflet 中脚本的 src
- onnx - 将 onnx 转换为 tensorrt 模型时找不到 ScatterND 插件
- javascript - next-i18next - 是否可以动态更改默认语言?
- algorithm - 2D 峰值算法无法找到峰值
- c++ - 为什么这个 c++ 程序反转一个单词不起作用
- arrays - 如何取以下4D数组(31x6x2x3)的中位数?
- javascript - ReactJS - 内联箭头函数性能
- c# - Razorpages 中的 Blazor WASM 组件
- csv - Bash/awk:根据两列查找重复项,根据其他列中的值保留行