如何用openlayers3制作气泡框展示点击坐标
程序员文章站
2022-03-26 11:36:47
...
根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
<link rel="stylesheet" type="text/css" href="css/ol.css"/>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
}
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FF00FF;
position:absolute;
right:20px;
bottom:6px;
z-index:999;
}
.ol-rotate{
right:40px;
}
.ol-scale-line {
left:180px;
}
.ol-zoomslider{
top:120px;
left: 9px;
}
.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;
}
.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: "✖";
}
</style>
<script type="text/javascript" src="build/ol.js"></script>
<script type="text/javascript">
var map;
function init(){
//封装底图函数
function getBaseLayer(layername, layer){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
};
//封装标注图层
function getAnnoLayer(layername, layer, visiable){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
};
//天地图图层
var baseLayers = ["vec_w","img_w","ter_w"];
var vecLayer = getBaseLayer("地图",baseLayers[0]);
var imgLayer = getBaseLayer("影像",baseLayers[1]);
var terLayer = getBaseLayer("地形",baseLayers[2]);
var vecAnno = getAnnoLayer("地图标注", "cva_w", true);
//使用GeoServer发布的地图
function getWMSLayer(){
return new ol.layer.Image({
source:new ol.source.ImageWMS({
url:'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'},
serverType: 'geoserver'
})
})
}
//GeoServer中图层范围BBOX范围值
var extent=[-74.047,40.68,-73.908,40.882];
//地图投影类型
var projection=new ol.proj.Projection({
code:'EPSG:4326',
units:'degrees',
extent:extent
});
var geoServerTest=getWMSLayer();
map = new ol.Map({
controls:ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
}) ,
new ol.control.OverviewMap({ }),
new ol.control.Rotate({
autoHide:false
}),
new ol.control.ScaleLine({ }),
new ol.control.ZoomSlider({ }),
new ol.control.ZoomToExtent({ })
]),
view:new ol.View({
/* projection:projection, */
center: ol.extent.getCenter(extent),
/* minZoom:1,
maxZoom:5, */
zoom:2
}),
target: 'map',
layers: [vecLayer,vecAnno],
});
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
}
}));
/**
* Add a click handler to the map to render the popup.
*/
map.addEventListener('click', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
map.addOverlay(overlay);
});
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
}
</script>
</head>
<body onload="init()">
<p id="map"></p>
<p id="mouse-position" class="mouse-position-wrapper">
<p class="custom-mouse-position"></p>
</p>
<!-- 弹框 -->
<p id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<p id="popup-content" style="width:300px; height:120px;"></p>
</p>
</body>
以上就是如何用openlayers3制作气泡框展示点击坐标的详细内容，更多请关注其它相关文章！