OpenLayers 3 и Geoserver: создать всплывающее окно при нажатии на маркер - PullRequest
Новая
       40

OpenLayers 3 и Geoserver: создать всплывающее окно при нажатии на маркер

0 голосов
/ 02 июня 2018

У меня есть карта OpenLayers 3 со слоями WMS из моего Geoserver.Я пытаюсь создать всплывающее окно по щелчку маркера (из слоя WMS) с данными содержимого всплывающего окна из метода WFS GetFeature.У меня есть JsFiddle здесь .

Код довольно прост и основан на других сообщениях SO. 

var baselayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var layer1 = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
    params: {
      'LAYERS': 'agriculture:megaladimosia',
      'STYLES': 'point',
      'TILED': true
    },
    serverType: 'geoserver'
  })
});
var map = new ol.Map({
  layers: [baselayer, layer1],
  controls: ol.control.defaults().extend([
    new ol.control.ScaleLine({
      units: 'metric'
    }),
    new ol.control.FullScreen()
  ]),
  target: 'mymap',
  view: new ol.View({
    center: [2687148, 4556999],
    zoom: 6.5
  })
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});
map.addOverlay(popup);
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  });
  if (feature) {
    var coord = feature.getGeometry().getCoordinates();
    var props = feature.getProperties();
    var info = "<h2>bvnvb</h2>";
    // Offset the popup so it points at the middle of the marker not the tip
    popup.setOffset([0, -22]);
    popup.show(coord, info);
  } else {
    var url = layer1
      .getSource()
      .getGetFeatureInfoUrl(
        evt.coordinate,
        map.getView().getResolution(),
        map.getView().getProjection(), {
          'INFO_FORMAT': 'application/json',
          'propertyName': 'total_budget'
        }
      );
    reqwest({
      url: url,
      type: 'json',
    }).then(function(data) {
      var feature = data.features[0];
      var props = feature.properties;
      console.log(props.total_budget);
      var info = "<h2>" + props.total_budget + "</h2>";
      console.log(info);
      popup.show(evt.coordinate, info);
    });
  };
});

Однако, это всегда дает мне ошибку Uncaught TypeError: popup.show не является функцией .Я добавил ol-popup js и css файлы и все еще ничего.Если бы кто-нибудь мог помочь, я был бы очень благодарен.

1 Ответ

0 голосов
/ 03 июня 2018

Я нашел две проблемы, основанные на вашем JsFiddle:

  1. Элемент с идентификатором "popup" не был определен в вашем HTML
  2. Нет "show"метод для ol.Overlay

Вы упомянули OpenLayers 3 в своем вопросе, хотя ваш JsFiddle использует 4.6.5.Я попробовал решение ниже с 4.6.5, оно также должно работать с 3.

  1. Добавить элемент "popup" 
<div id="popup"></div>
Замените использование popup.show на popup.setPosition(ol.Coordinate) и обновите содержимое вашего всплывающего окна с помощью element.innerHTML 
popup.setPosition(evt.coordinate);
element.innerHTML = info;

Вот обновленный JsFiddle, например: http://jsfiddle.net/swnykzgq/1/

Вот несколько примеров наложения из OpenLayers: https://openlayers.org/en/latest/examples/overlay.html

...