Heim > Artikel > Web-Frontend > So erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten
So erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten
- 一个新手Original
- 2017-09-07 10:55:363601Durchsuche
In Anlehnung an diesen Artikel wird hauptsächlich das Klicken auf die Karte implementiert, um ein Blasenfeld zur Anzeige von Längen- und Breitengraden anzuzeigen. Natürlich können Sie es auch ändern, um andere Inhalte anzuzeigen.
<!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>Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in das Dekorationsmuster von node.jsNächster Artikel：Einführung in das Dekorationsmuster von node.js