Открытые слои 6.1. - всплывающее окно с несколькими точками - PullRequest
Новая
       54

Открытые слои 6.1. - всплывающее окно с несколькими точками

0 голосов
/ 14 января 2020

У меня проблема в моем проекте открытого слоя (6.1.) С всплывающим пузырем.

Я не могу создать и увидеть всплывающее окно и заполнить его, даже с помощью одного слоя Geo JSON с городами.

Я прочитал это без прогресса: всплывающее окно с несколько точек функции

Я хотел бы просто отобразить название города при нажатии на иконку.

Индекс. 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>

основной. 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');
  }
});

1 Ответ

0 голосов
/ 15 января 2020

Основная проблема заключается в том, что вы не сохраняете ссылку на переменную 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
  }),
});

подтверждение концепции скрипта

screenshot of map with markers and popup

фрагмент кода: 

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>
...