オープンレイヤー3でさらに描画するためにベースレイヤーとして画像をロードする方法

Question

選択した画像をポイント/ポリゴン/シェイプのようなその他の機能のベースレイヤーとして読み込む方法。 openlayerのウェブサイトに表示されている例のほとんどは、ベースレイヤのソースとして "ol.source.OSM"を使用しています。 OSMをベースレイヤーとして使用したくありません。

Answer 1

カスタムイメージをロードする例がImage Load Eventの下で、OpenLayersをサイトで見つけることができます。

あなたがロードする画像の形式についての世話をする必要があります。より多くの情報を提供していないので、私はWMSサーバーから単一のイメージを使用します。

次のスニペットは、あなたを助ける必要があるコードの一部です。

var map = new ol.Map({ 
 
    layers: [ 
 
    new ol.layer.Image({ 
 
     source: new ol.source.ImageWMS({ 
 
     url: 'https://ahocevar.com/geoserver/wms', 
 
     params: { 
 
      'LAYERS': 'topp:states' 
 
     }, 
 
     serverType: 'geoserver' 
 
     }) 
 
    }) 
 
    ], 
 
    target: 'map', 
 
    view: new ol.View({ 
 
    center: [-10997148, 4569099], 
 
    zoom: 4 
 
    }) 
 
});

<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> 
 
<div id="map"></div>