打开图层 6.1。 - 弹出多点功能

Question

我的开放层 (6.1.) 项目出现弹出气泡问题。

我无法创建和查看弹出窗口并填充它，即使是带有城市的单个 GeoJSON 层也是如此。

我读了这个没有进步：

我想在单击图标时只显示城市的名称。

Index.html

<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="icon" href="pic/fav.png" sizes="192x192" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <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>

  <title>Retail Space</title>

</head>

<!--++++++++++++++++++++++++++++++++++++++  BODY  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>

  <body>

    <div id="container">

<!--++++++++++++++++++++++++++++++++++++++  HEADERBAR  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>

      <div id="headerbar">
        <div id="logobar">

        </div>

        <div id="controlbar">

        </div>
      </div>

<!--++++++++++++++++++++++++++++++++++++++  MAPBAR  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++>

      <div id="map-container" ><div id="popup"></div>
        <div id="tooltip" class="tooltip"></div>
      </div>
      <script src="main.js"></script>


    </div> <!--/container-->
  </body>
</html>

main.js

import GeoJSON from 'ol/format/GeoJSON';
import TileJSON from 'ol/source/TileJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import TileLayer from 'ol/layer/Tile';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';
import Overlay from 'ol/Overlay';
import {Style, Fill, Stroke, Icon} from 'ol/style';
import {fromLonLat} from 'ol/proj';
import sync from 'ol-hashed';


var iconStyle_municip = new Style({
  image: new Icon({
    anchor: [0.5, 5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'pic/municip.png'
  })
});

//OSM layer creation
var OSMmap = new TileLayer({
  source: new OSM(),

  format: new GeoJSON({featureProjection: 'EPSG:3857'}),
});

//Obce 5000+ layer creation
var cities = new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON({featureProjection: 'EPSG:3857'}),
        url: 'obce5000geojson.geojson'
      })
    });

cities.setStyle(iconStyle_municip);

//Map initiation
new Map({
  target: 'map-container',

  layers: [OSMmap, cities],

  view: new View({
    center: fromLonLat([15, 49.80]),
    zoom: 8
  }),

});

//tooltip start
var element = document.getElementById('popup');

var popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -50]
});
map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    }
  );
  if (feature) {
    var coordinates = this.getCoordinateFromPixel(evt.pixel);
    popup.setPosition(coordinates);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': feature.get('obec')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

Answer 1

主要问题是您没有保留对 map 变量的引用。

//Map initiation
new Map({
  target: 'map-container',
  layers: [OSMmap, cities],
  view: new View({
    center: fromLonLat([15, 49.80]),
    zoom: 8
  }),
});

当代码尝试使用它时失败:

map.addOverlay(popup);

保留对 map:

的引用

//Map initiation
var map = new Map({
  target: 'map-container',
  layers: [OSMmap, cities],
  view: new View({
    center: fromLonLat([15, 49.80]),
    zoom: 8
  }),
});

proof of concept fiddle

代码片段：

var iconStyle_municip = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
  })
});

//OSM layer creation
var OSMmap = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.OSM(),

  format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}),
});

//Obce 5000+ layer creation
var cities = new ol.layer.Vector({ // VectorLayer({
      source: new ol.source.Vector({ // VectorSource({
        format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}),
        url: 'https://api.myjson.com/bins/upiqa'
      })
    });

cities.setStyle(iconStyle_municip);

//Map initiation
var map = new ol.Map({
  target: 'map-container',

  layers: [OSMmap, cities],

  view: new ol.View({
    center: ol.proj.fromLonLat([15, 0]),
    zoom: 2
  }),

});

//tooltip start
var element = document.getElementById('popup');

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -10]
});
map.addOverlay(popup);

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    }
  );
  if (feature) {
    var coordinates = this.getCoordinateFromPixel(evt.pixel);
    popup.setPosition(coordinates);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': "test content" // feature.get('obec')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map-container {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#popup {
  background: #FFFFFF;
  border: black 1px solid;
}

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map-container" class="map"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery-popover@0.0.4/src/jquery-popover.min.js"></script>
<div id="popup">
<b>test</b>
</div>

打开图层 6.1。 - 弹出多点功能

Open layers 6.1. - popup with multiple points features

javascript

popup

openlayers-6