显示标记,弹出窗口whit OpenLayer3 [英] Display Markers, Popups whit OpenLayer3
问题描述
我试图了解如何在osm map whit openlayers3上显示标记/弹出窗口,我在ol3网页上的示例中找到了示例,但是......
I'm trying to understand how can I display markers/popups on osm map whit openlayers3, I have found examples in examples on ol3 web page, but...
是否有更多关于编码标记/弹出窗口的javascript或jquery的示例,最好是像这个或类似的东西例子。
Is there more examples for coding markers/popups whit javascript or jquery, preferably something like this or similar stuff examples.
想法是标记一个建筑物,通过点击标记它会弹出建筑物的一些信息,更多我想要连接从城市到这座建筑的重要地方(图书馆,餐馆,公共汽车站等)。我希望如果有人能解释我如何开始构建这个,我不想使用bootstrap3(我已经看过叠加示例),而不是想要纯html5,css3,javascript / jquery)
谢谢。
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) Thank you.
推荐答案
您可以使用纯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
:
To make a popup, use 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;
}
});
这篇关于显示标记,弹出窗口whit OpenLayer3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!