使用OpenLayer3显示标记，弹出窗口
我试图了解如何在openmers3的osm地图上显示标记/弹出窗口，我在ol3网页上的示例中找到了示例，但是……
是否有更多使用javascript或jquery编码标记/弹出窗口的示例，最好是像这样或类似的例子。
这个想法是标记一个建筑物，通过点击标记它将弹出建筑物的一些信息，更多我想连接从城市到这个建筑物的重要地方（图书馆，餐馆，公共汽车站等）。 我希望如果有人能解释我如何开始构建这个，我不想使用bootstrap3（我已经看过覆盖示例），而是想要纯html5，css3，javascript / jquery）
您可以使用纯HTML，CSS和JavaScript创建弹出窗口，如弹出窗口示例所示。 您想要的完整工作示例如下： http ： //jsfiddle.net/ahocevar/z86zc9fz/1/ 。
弹出窗口的HTML很简单：
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; };
要使function可单击，请使用
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); });
对于指针在function上方时的视觉反馈，请使用
map.on('pointermove', function(evt) { map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''; });
特征（即标记）来自矢量图层：
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);
上面的代码片段使用固定样式，即所有类型的function都使用相同的图标。 如果您有不同类型的function，则可以定义样式函数而不是固定样式：
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; } });