在OpenLayers 6中组合ImageLayer和VectorLayer
在OpenLayers 6中组合ImageLayer和VectorLayer
提问于 2020-04-15 09:25:45
我正在使用OpenLayers 6.3.1，试图在一个简单的静态ImageLayer之上创建一个具有一些基本形状的VectorLayer。
基本上，我是想把来自this example的图形放在this static image example上。
当我添加视图的自定义投影设置时，我可以看到我的图像。当我移除它(让它默认为'EPSG:3857')时，我可以看到形状。
我试着用不同的坐标添加形状，但我不能让它们显示在我的图像上！
这是我的初始化代码。我在里面留下了一些评论，这样你就可以看到我正在尝试弄乱的一些东西。有人能帮我设置一下吗？我不会为这个应用程序处理任何地图或地图数据。这是一个图像标注系统，我只想处理简单的笛卡尔坐标。
const thumbnail = this.asset.getThumbnail();
const img = this.asset.getImage();
const extent = [
0, 0,
img.width, img.height
];
const projection = new Projection({
code: 'Flatland:1',
units: 'pixels',
extent: extent
});
const styles = [
new Style({
stroke: new Stroke({
color: 'blue',
width: 3
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: 'orange'
})
}),
geometry: function(feature) {
var coordinates = feature.getGeometry().getCoordinates()[0];
return new MultiPoint(coordinates);
}
})
];
const geojsonObject = {
type: 'FeatureCollection',
crs: {
type: 'name',
properties: {
//name: 'EPSG:3857'
name: 'Flatland:1'
}
},
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[-5e6, 6e6],
[-5e6, 8e6],
[-3e6, 8e6],
[-3e6, 6e6],
[-5e6, 6e6]
]]
}
},
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[63, 19.5],
[63, 5.5],
[28, 5.5],
[30, 19.5],
[63, 19.5],
[75, 22.5]
]]
}
}
]
};
this.map = new Map({
target: `map-${this.props.asset.id}`,
controls: [],
interactions: [],
layers: [
new ImageLayer({
source: new Static({
url: thumbnail,
projection: projection,
imageExtent: extent
})
}),
new VectorLayer({
source: new VectorSource({
features: (
new GeoJSON(/*{dataProjection: 'Flatland:1'}*/)
).readFeatures(
geojsonObject
/*, {dataProjection: 'Flatland:1',
featureProjection: 'Flatland:1'
}*/
)
}),
style: styles
})
],
view: new View({
projection: projection,
center: getCenter(extent),
//center: [0, 3000000],
//center: [0, 300],
zoom: 1
})
});回答 1
Stack Overflow用户
发布于 2020-04-15 17:53:11
您的图像必须经过地理参考才能在地图投影中显示。
如果您使用带有像素坐标的自定义投影，那么您的矢量功能也必须使用像素坐标。
您的第一个特性使用了EPSG:3857坐标，但是OpenLayers将它们视为像素坐标，因为您已经使用像素坐标定义了自定义投影。所以你看不到这个特性，因为它超出了你的能力范围。
第二个要素的坐标似乎是地理坐标，但这些数字足够小，可以在范围内显示为像素坐标。(但它们可能不会显示在您期望它们出现的位置。)您的第二个功能显示在图像的左下角，使用以下代码：
https://i.stack.imgur.com/80RZs.jpg
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
code: 'Flatland:1',
units: 'pixels',
extent: extent
});
var view=new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 1
});
const styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
const geojsonObject = {
type: 'FeatureCollection',
crs: {
type: 'name',
properties: {
name: 'Flatland:1'
}
},
features: [
/*{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[-5e6, 6e6],
[-5e6, 8e6],
[-3e6, 8e6],
[-3e6, 6e6],
[-5e6, 6e6]
]]
}
},*/
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[63, 19.5],
[63, 5.5],
[28, 5.5],
[30, 19.5],
[63, 19.5],
[75, 22.5]
]]
}
}
]
};
const map=new ol.Map({
view: view,
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: (
new ol.format.GeoJSON(/*{dataProjection: 'Flatland:1'}*/)
).readFeatures(
geojsonObject
/*, {dataProjection: 'Flatland:1',
featureProjection: 'Flatland:1'
}*/
)
}),
style: styles
})
],
target: "map"
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61219845
复制相关文章
相似问题
腾讯云开发者
