Saya menggunakan perpustakaan openlayers dan geoserver untuk menampilkan peta di halaman web. Saya ingin mengambil data dari peta [ yang merupakan file ImageWMS ] dan ditampilkan sebagai fitur sembulan seperti saat pengguna mengklik titik mana pun di peta. Saya menggunakan lapisan geoserver untuk menampilkan peta dan saya ingin menampilkan detail lapisan itu sebagai sembulan di setiap titik peta.

Saya telah membuat fungsi peta konstruktor kemudian menggunakannya saya telah menambahkan peta google. Kemudian menggunakan metode ol.addLayer saya menambahkan layer baru yang berisi data. Setelah itu saya membuat variabel pilih untuk acara klik dan variabel sembulan untuk menampilkan sembulan. Seseorang tolong bantu saya dengan menampilkan data dari url di bawah ini.

<!DOCTYPE html>
      <html>
      <head>
      <title>Overlay</title>
      <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
      <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </head>
  <body>
        <div id="map" class="map">
        </div>

    <script>

var map = new ol.Map({
    target: 'map',
   view: new ol.View({
       center: ol.proj.fromLonLat([76.6927, 11.8083]),
       minZoom: 4,
       zoom: 12,
       interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
   })
});

var format = 'image/png';

map.addLayer(new ol.layer.ImageWMS({
    source: new ol.source.ImageWMS({
       ratio:1,
       projection:'EPSG:4326',
       url:'url',
       params:{'FORMAT':format,
               'VERSION':'1.1.1',
               STYLES:'',                    
               LAYERS:'layer',
              }
   }),
    style: function(f) {
      return new ol.style.Style({ 
        image: new ol.style.RegularShape({
          radius: 5,
          radius2: 0,
          points: 4,
          stroke: new ol.style.Stroke({ color: "#000", width:1 })  
        }),
        text: new ol.style.Text ({
          text: f.get('id').toString(),
          font: 'bold 11px sans-serif',
        }),
        stroke: new ol.style.Stroke({
          width: 1,
          color: [255,128,0]
        }),
        fill: new ol.style.Fill({
          color: [255,128,0,.2]
        })
      })
    }
  }));
//Interaction
var select = new ol.interaction.Select({
    hitTolerance: 5,
    multi: true,
    condition: ol.events.condition.singleClick
  });
  map.addInteraction(select);


//Select control

var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select,
    canFix: true,
    template: {
        title: 
          function(f) {
            return f.get('gwl')+' ('+f.get('id')+')';
          }
    }
  });



map.addOverlay (popup);



    </script>
  </body>
</html>

Saya perlu menampilkan popup setiap kali pengguna mencoba mengklik salah satu titik pada shapefile.

0
Musthafa 5 Agustus 2019, 19:50

1 menjawab

Jawaban Terbaik

Dengan sumber WMS Anda akan menggunakan GetFeatureInfo mirip dengan https://openlayers.org/en/master/examples/getfeatureinfo-image. html tetapi alih-alih tampilan info di bawah peta yang akan Anda tampilkan dalam munculan yang mirip dengan https://openlayers.org/en/master/examples/popup.html Untuk kontrol lebih besar atas data apa yang ditampilkan, gunakan {'INFO_FORMAT': 'application/json'}

Contoh lama yang Anda tautkan menggunakan lapisan vektor. Anda bisa mendapatkan data vektor dari server Anda alih-alih WMS dengan menggunakan layanan WFS-nya, lihat https://openlayers.org/en/master/examples/vector-wfs.html

1
Mike 5 Agustus 2019, 17:42