我正在使用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
})
});
必须对您的图像进行地理参考才能在地图投影中显示它。
如果您使用带有像素坐标的自定义投影，那么矢量特征也必须使用像素坐标。
您的第一个功能使用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"
})