Openlayers v5 test

by Vladimir Vershinin

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/css/ol.css">
<div id="map" class="map"></div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

console.log(ol)

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    /*     new ol.layer.VectorTile({
          source: new ol.source.VectorTile({
            url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
            format: new ol.format.MVT({
              featureClass: ol.Feature,
            }),
          })
        }) */
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([14, 48]),
    zoom: 7,
  })
});
const select = new ol.interaction.Select();
select.on('select', evt => {
  console.log(evt)
  console.log(map.getFeaturesAtPixel(evt.mapBrowserEvent.pixel))
})
map.addInteraction(select);

const layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://uploads.codesandbox.io/uploads/user/db0b4d85-0a6d-4c68-9cc9-d9c5742488e1/2s0b-gewaesser.json',
    format: new ol.format.TopoJSON({
      layers: ['gewaesser']
    }),
    overlaps: false,
  }),
})
map.addLayer(layer)
setTimeout(() => console.log(layer.getSource().getFeatures()), 5000)