Javascript OpenLayers addLayers因TypeError失败_Javascript_Openlayers

Javascript OpenLayers addLayers因TypeError失败

javascript openlayers

Javascript OpenLayers addLayers因TypeError失败,javascript,openlayers,Javascript,Openlayers,我正在从OpenLayers 3.15.0更新到6.3.1。调用map.addLayer时，出现以下错误： Uncaught TypeError:无法读取未定义的属性“ol\u uid”@ ecb://web/java/ol.js:1:23754 以下是其名称的上下文：函数getMinZoom（）{ var-width=map.clientWidth；返回Math.ceil（Math.LOG2E*Math.log（宽度/256））； } //创建wms图层函数addWMSLayer（u

我正在从OpenLayers 3.15.0更新到6.3.1。调用map.addLayer时，出现以下错误：

Uncaught TypeError:无法读取未定义的属性“ol\u uid”@
ecb://web/java/ol.js:1:23754

以下是其名称的上下文：

函数getMinZoom（）{ var-width=map.clientWidth；返回Math.ceil（Math.LOG2E*Math.log（宽度/256））； } //创建wms图层函数addWMSLayer（url、attTxt、attHref、层、格式、服务器、res1、res2、res3、res4）{ 初始化映射（）； //加载wms层的平铺源 var newRes1=编号（getCalcResolutionSrv（res1））； var newRes2=数量（getCalcResolutionSrv（res2））； var newRes3=数量（getCalcResolutionSrv（res3））； var newRes4=编号（getCalcResolutionSrv（res4））； var newWMSSource=new ol.source.TileWMS({ url:url，参数：{ “层”：层， “格式”：格式， }, 服务器类型：“mapserver”，投影：投影 }); var minZoom=getMinZoom（）； var newWmsLayer=新建ol.layer.Tile({ 范围:范围,，资料来源：newWMSSource， minResolution:newRes4， maxResolution:newRes1， zIndex:0，最小缩放：最小缩放 }); wmsResolution.push（编号（newRes1-0.00100））； wmsResolution.push（newRes2）； wmsResolution.push（newRes3）； wmsResolution.push（编号（newRes4+0.00100））； map.addLayer（newWmsLayer）； ECBJS.addNewWMSLayer（url、层、newRes1、newRes2、newRes3、newRes4）； }; 该函数与3.15.0中用于调用addLayer的函数相同，但zIndex和minZoom属性除外。在3.15.0版本中，它开始工作

有什么问题吗

更新

我基于CefSharp的MinimalExample创建了一个MinimalExample解决方案。您需要Visual Studio或Rider才能打开它。

当前，在MainWindows.xaml.cs中的函数CallWebSite中对EvaluateScript Async的调用返回

Message=“Uncaught TypeError:无法读取的属性“ol\u uid”
未定义@ecb://web/java/ol.js:1:23754" 
成功=错误

我希望它能和你一起回来

Message=“”
成功=正确

映射对象未正确初始化。以下是创建地图的代码：

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: '&nbsp;'
    });

所以它使用了一个投影。投影未正确初始化

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);

从我学到的，我可以用

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
    }
}));

我更新了上的最小示例以反映这些更改。