[英]Open Layers 6 - Image Layer combine with Vector Layer
I'm trying to have an image layer combined with a vector layer but when I add projection to View the vectors disappear.我正在尝试将图像层与矢量图层相结合,但是当我将投影添加到 View 时,矢量消失了。 Am I doing something wrong?
难道我做错了什么?
Here is an example of what I'm trying to achieve: https://stackblitz.com/edit/react-ol6这是我要实现的示例: https://stackblitz.com/edit/react-ol6
I want these two layers below to be together in View.我希望下面的这两层在视图中在一起。
For those searching for an answer, Mike gave a great solution where you set up the extent value equal to the extend of the vector layer.对于那些寻找答案的人, Mike提供了一个很好的解决方案,您可以将范围值设置为等于矢量图层的范围。 Thank you again.
再次感谢你。
var extent = [-e,-e,e,e];
var source = new VectorSource({});
var vectorLayer = new VectorLayer({
source: source,
});
var imageLayer = new ImageLayer({
source: new Static({
url: "https://imgs.xkcd.com/comics/online_communities.png",
projection: new Projection({
units: "pixels",
extent: extent
}),
imageExtent: extent,
}),
});
vectorLayer.setZIndex(1);
imageLayer.setZIndex(0);
var olMap = new Map({
target: null,
layers: [imageLayer, vectorLayer],
view: new View({
projection: new Projection({
units: "pixels",
extent: extent,
}),
center: getCenter(extent),
// center: [0,0],
zoom: 0,
}),
});
class App extends Component {
componentDidMount() {
olMap.setTarget("olmap");
vectorLayer.getSource().addFeatures(features);
}
render() {
return (
<div className="App">
<div id="olmap" style={{ width: "100%", height: "80%" }} />
</div>
);
}
}
Also here is a stackblitz he shared: https://stackblitz.com/edit/react-ol6-xw1x9l他还分享了一个stackblitz: https://stackblitz.com/edit/react-ol6-xw1x9l
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.