-3

我尝试在 angular(4) 应用程序 http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html中实现以下代码

但是在尝试启动浏览器时总是会导致错误。

首先，我的导入（两个库都是从 npm 本地安装的）：

`

import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerVector from 'ol/layer/vector';
import OlLayerTile from 'ol/layer/Tile';
import OlSourceOSM from 'ol/source/OSM';
import OlLayerImage from 'ol/layer/image';
import OlSourceImageVector from 'ol/source/imagevector';
import OlSourceImageStatic from 'ol/source/ImageStatic';
import OlProjection from 'ol/proj/projection';
import OlSourceVector from 'ol/source/vector';
import OlBaseImage from 'ol/imagebase';
import OlImage from 'ol/image';

import OlSourceGeoImage from 'ol-ext/source/GeoImage';
import OlAttribution from 'ol/attribution';
import OlOverlay from 'ol/overlay';`

请在下面找到我使用的代码：（这部分正常工作）`

// OSM tiles as background
    var OSMBackground = new OlLayerTile({
        source: new OlSourceOSM()
    });
// Custom extend used to position my factoryBackgroundLayer image
    var newExtent = OlProj.transformExtent(
        [2.385083, 48.817463, 2.386024, 48.817694],
        "EPSG:4326", "EPSG:3857"
    );


    var factoryBackgroundLayer = new OlLayerImage({
        source: new OlSourceImageStatic({
            url: 'http://viglino.github.io/ol-ext/examples/data/IGNF_PVA_1-0__1976-03-24_pt.jpg',
            // projection: projection,
            // imageExtent: extent
            projection: 'EPSG:27700',
            imageExtent: newExtent
        })
    });


    var map = new OlMap({
        layers: [OSMBackground
            , factoryBackgroundLayer

        ],
        target: 'map',
        view: new OlView({
            center: OlProj.fromLonLat([2.585487, 48.817561]),
            zoom: 20, // Set to 20 is better
        })
    });`

然后我尝试显示地理参考图像：` 

x = 274764.75;
y = 6243935.64;
sx = 0.589;
sy = 0.597;
xmin = 0;
ymin = 0;
xmax = 5526;
ymax = 5000;
rotate = 7.44;
opacity = 0.7;

var geoSource = new OlSourceGeoImage(
        {
            url: 'http://viglino.github.io/ol-ext/examples/data/IGNF_PVA_1-0__1976-03-24_pt.jpg',
            imageCenter: [this.x, this.y],
            imageScale: [this.sx, this.sy],
            imageCrop: [this.xmin, this.ymin, this.xmax, this.ymax],
            imageRotate: this.rotate * Math.PI / 180,
            projection: 'EPSG:27700',
        });


    var geoimg = new OlLayerImage(
        {
            state: "ready",

            opacity: 0.7,
            source: geoSource,
            imageExtent: newExtent
        });

    this.map.addLayer(geoimg);

`

它总是导致同样的问题：

错误 TypeError: image.getState 不是 _ol_renderer_canvas_ImageLayer_.prepareFrame (imagelayer.js:160) 处 _ol_renderer_canvas_Map_.renderFrame (map.js:183) 处 _ol_renderer_canvas_ImageLayer_._ol_renderer_Layer_.loadImage (layer.js:114) 处的函数_ol_Map_.eval (pluggablemap.js:87) 在 ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:4740) 在 ZoneDelegate.invokeTask (zone.js: 420) 在 Zone.runTask (zone.js:188) 在 ZoneTask.invokeTask (zone.js:496)

因此，关于这份报告，我尝试使用 ol.source.Image 对象而不是 url 但不是更成功。

以前有人用过这个框架吗？任何会导致此问题的 ol 更新的想法？

PS：我也尝试过 SnapGuides 行示例（http://viglino.github.io/ol-ext/examples/interaction/map.interaction.snapguides.html），它运行良好，所以 ol-ext API 集成听起来不错！

4

1 回答 1

0

感谢作者解决了问题：https ://github.com/Viglino/ol-ext/issues/93 ：

“我发现 GeoImage 源存在问题：getImage() 函数覆盖了 Image 源函数。只需将其更改为 getGeoImage() 即可解决问题。我已在 master 分支上推送了一个新提交。如果您正在使用npm 只需将 node 模块中的 source/GeoImage.js 替换为 git 中的一个即可。它将包含在下一个版本中。

顺便说一句，我添加了将 node_modules 目录中的 GeoImage.js 替换为 Viglino 提交的那个。

于 2018-04-05T11:20:19.523 回答