image.getState 不是函数(在 angular 中使用 ol 时)
image.getState is not a function (when using ol in angular)
我试图在 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);
`
它总是导致同样的问题:
ERROR TypeError: image.getState is not a function
at _ol_renderer_canvas_ImageLayer_._ol_renderer_Layer_.loadImage (layer.js:114)
at _ol_renderer_canvas_ImageLayer_.prepareFrame (imagelayer.js:160)
at _ol_renderer_canvas_Map_.renderFrame (map.js:183)
at _ol_Map_._ol_PluggableMap_.renderFrame_ (pluggablemap.js:1180)
at _ol_Map_.eval (pluggablemap.js:87)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at 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集成听起来不错!
感谢作者问题已解决:https://github.com/Viglino/ol-ext/issues/93:
"I've found an issue with the GeoImage source: the getImage() function overwrite the Image source function. Just change it to getGeoImage() solves the problem. I've pushed a new commit on master branch. If you're using npm just replace the source/GeoImage.js in the node module with the one of the git. It will be included in the next version."
顺便说一下,我添加了用 Viglino 提交的那个替换 node_modules 目录中的 GeoImage.js。
我试图在 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);
`
它总是导致同样的问题:
ERROR TypeError: image.getState is not a function at _ol_renderer_canvas_ImageLayer_._ol_renderer_Layer_.loadImage (layer.js:114) at _ol_renderer_canvas_ImageLayer_.prepareFrame (imagelayer.js:160) at _ol_renderer_canvas_Map_.renderFrame (map.js:183) at _ol_Map_._ol_PluggableMap_.renderFrame_ (pluggablemap.js:1180) at _ol_Map_.eval (pluggablemap.js:87) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at 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集成听起来不错!
感谢作者问题已解决:https://github.com/Viglino/ol-ext/issues/93:
"I've found an issue with the GeoImage source: the getImage() function overwrite the Image source function. Just change it to getGeoImage() solves the problem. I've pushed a new commit on master branch. If you're using npm just replace the source/GeoImage.js in the node module with the one of the git. It will be included in the next version."
顺便说一下,我添加了用 Viglino 提交的那个替换 node_modules 目录中的 GeoImage.js。