Question

尝试使用我的geojson数据弹出窗口。错误状态$（element）.popover不是函数。我认为它与无法读取功能有关，即使它们显示正确。

使用最新版本的OpenLayers和jquery： http://openlayers.org/en/v3.12.1/build/ol.js https://code.jquery.com/jquery-1.11.2.min.js

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/ArcGIS/rest/services/nyad/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson',
      format: new ol.format.GeoJSON()
    }),
  });

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      }),
      vectorLayer
    ],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([-73.95, 40.7]),
      zoom: 11
    })
  });

   var element = document.getElementById('popup');

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

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

Answer 1

您正在添加bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

OpenLayers 3弹出外部geojson

1 个答案: