显示标记，带有OpenLayer3的弹出窗口 [英] Display Markers, Popups with OpenLayer3

问题描述

我试图了解如何使用openlayers3在osm地图上显示标记/弹出窗口，我在ol3网页上的示例中找到了示例，但是...

I'm trying to understand how can I display markers/popups on osm map with openlayers3, I have found examples in examples on ol3 web page, but...

是否有更多使用javascript或jquery编码标记/弹出窗口的示例，最好是 this 或类似示例.

Is there more examples for coding markers/popups with javascript or jquery, preferably something like this or similar examples.

想法是标记建筑物，通过单击标记将弹出该建筑物的一些信息，此外，我想将城市中的重要场所连接到该建筑物(图书馆，饭店，公交车站等) .我希望有人能解释我如何开始构建它，并且我不想为此使用bootstrap3(我见过

The idea is to mark a building, by clicking on the marker it will popup some info for the building, further more I would like to connect important places from the city to this building (library, restaurants, bus stops, etc). I wish if someone can explain me how to start up building this, and I don't want to use bootstrap3 for this ( I have seen overlay example), instead want pure html5, css3, javascript/jquery)

推荐答案

您可以使用纯HTML，CSS和JavaScript创建弹出窗口，如 http://jsfiddle.net/ahocevar/z86zc9fz/1 /.

You can create a popup with pure HTML, CSS and JavaScript, as shown in the popup example. A fully working example for what you want is here: http://jsfiddle.net/ahocevar/z86zc9fz/1/.

弹出窗口的HTML很简单:

The HTML for the popup is simple:

<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

CSS涉及更多:

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 80px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

要弹出，请使用ol.Overlay:

var container = document.getElementById('popup');
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});
map.addOverlay(overlay);

var closer = document.getElementById('popup-closer');
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

要使功能可点击，请使用

To make features clickable, use

var content = document.getElementById('popup-content');
map.on('singleclick', function(evt) {
  var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature.get('name');
  });
  var coordinate = evt.coordinate;
  content.innerHTML = name;
  overlay.setPosition(coordinate);
});

要在指针悬停在某个功能上时获得视觉反馈，请使用

For visual feedback when the pointer is over a feature, use

map.on('pointermove', function(evt) {
  map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});

要素(即标记)来自矢量层:

The features (i.e. markers) come from a vector layer:

var markers = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
        name: 'Vienna',
        type: 'City'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
        name: 'London',
        type: 'City'
      })
    ]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
      anchor: [0.5, 1]
    })
  })
});
map.addLayer(markers);

上面的代码段使用了固定的样式，即所有类型的功能都使用相同的图标.如果您具有不同类型的功能，则可以定义样式功能而不是固定样式:

The above snippet uses a fixed style, i.e. the same icon for all types of features. If you have different types of features, you can define a style function instead of a fixed style:

var cityStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
    anchor: [0.5, 1]
  })
});
var otherStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: '//openlayers.org/en/v3.12.1/examples/data/Butterfly.png'
  })
});
var markers = new ol.layer.Vector({
  // ...
  style: function(feature, resolution) {
    if (feature.get('type') == 'City' {
      return cityStyle;
    }
    return otherStyle;
  }
});

这篇关于显示标记，带有OpenLayer3的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！