打开第 6 层 - 图像层与矢量图层相结合答案

【问题标题】：Open Layers 6 - Image Layer combine with Vector Layer打开第 6 层 - 图像层与矢量图层相结合
【发布时间】：2020-05-27 13:23:13
【问题描述】：

我正在尝试将图像层与矢量图层相结合，但是当我将投影添加到 View 时，矢量消失了。我做错了吗？

这是我想要实现的一个示例： https://stackblitz.com/edit/react-ol6

我希望下面的这两个层在视图中在一起。

Vector Layer

Image Layer

【问题讨论】：

您不太可能看到任何特征，因为当图像只有 2048 个单位时，您有 50 个特征随机分布在 4500000 个单位上。如果您使两个范围相似，则特征将与图像重叠。
我明白你在说什么，但即使我改变它们的位置也不正确。那我该怎么办？
extent = [-e, -e, e, e]; 将适合图像中的所有特征 stackblitz.com/edit/react-ol6-xw1x9l
你是对的。这实际上起到了作用。非常感谢！

标签： javascript image gis openlayers openlayers-6

【解决方案1】：

对于那些寻找答案的人，Mike 提供了一个很好的解决方案，您可以将范围值设置为等于矢量图层的范围。再次感谢。

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>
        );
    }
}

还有他分享的堆栈闪电战：https://stackblitz.com/edit/react-ol6-xw1x9l

【讨论】：