openlayers3 气泡框展示鼠标点击坐标

来源：互联网发布：什么时候跑步最好知乎编辑：程序博客网时间：2024/05/16 17:52
根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。
<!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()">      <div id="map"></div>      <div  id="mouse-position" class="mouse-position-wrapper">    <div class="custom-mouse-position"></div>    </div><!-- 弹框 -->    <div id="popup" class="ol-popup">      <a href="#" id="popup-closer" class="ol-popup-closer"></a>      <div id="popup-content" style="width:300px; height:120px;"></div>  </div>  </body>
阅读全文
0 0