openlayers实现地图弹窗


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了openlayers实现地图弹窗的具体代码,供大家参考,具体内容如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
 <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <title>Ol3 popup</title>
 <style type="text/css">
 body, #map {
 border: 0px;
 margin: 0px;
 padding: 0px;
 padding: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 font-size: 13px;
 }
 
 .ol-popup {
 display: none;
 position: absolute;
 background-color: white;
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 -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));
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 width: 200px;
 }
 .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;
 }
 .popup-title{
 font-weight: bold;
 border-bottom:1px solid #cccccc;
 padding: 5px 8px;
 }
 .popup-content{
 padding: 5px 8px;
 }
 .ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 6px;
 right: 6px;
 }
 .ol-popup-closer:after {
 content: "✖";
 }
 </style>

 <script type="text/javascript">
 function init(){
 var format = 'image/png';
 var bounds = [73.4510046356223, 18.1632471876417,
 134.976797646506, 53.5319431522236];
 var vectorSource = new ol.source.TileWMS({
 url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
   params:{ 
    'LAYERS':'capital',
    'TILED':false 
   }, 
 serverType:'geoserver'
  
 });
 var untiled = new ol.layer.Tile({
 source: vectorSource
 });
 var container = document.getElementById('popup');
 var content = document.getElementById('popup-content');
 var title = document.getElementById('popup-title');
 var closer = document.getElementById('popup-closer');
 closer.onclick = function(){
 container.style.display = 'none';
 closer.blur();
 return false;
 };
 var overlay = new ol.Overlay({
 element: container
 });
 
  var osmsource = new ol.source.OSM()
 //console.log(osmsource.getProjection().getCode()); 
 var map = new ol.Map({
 controls: ol.control.defaults({
 attribution: false
 }),
 target: 'map',
 layers: [new ol.layer.Tile({
 source: osmsource, //将数据源坐标系统进行转换
 projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
 }),
 untiled],
 overlays: [overlay],
 view: new ol.View({
 center:[117,42],
 projection:'EPSG:4326',
 zoom:1
 })
 });
 map.addOverlay(overlay);
 map.getView().fit(bounds, map.getSize());
 
 map.on('click', function(evt) {
 var coordinate = evt.coordinate;
 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
 coordinate, 'EPSG:4326', 'EPSG:4326'));
 overlay.setPosition(coordinate);
 content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
 '</code>';
 container.style.display = 'block';
 title.innerHTML = "提示信息";
 title.style.display = 'block';
 map.getView().setCenter(coordinate);
 });
 }
 </script>
</head>
<body onLoad="init()">
<div id="map">
 <div id="popup" class="ol-popup">
 <a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
 <div id="popup-title" class="popup-title"></div>
 <div id="popup-content" class="popup-content"></div>
 </div>
</div>
</body>
</html>

效果图:

openlayers实现地图弹窗

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
openlayers实现地图测距测面
Sep 25 #Javascript
openlayers 3实现车辆轨迹回放
Sep 24 #Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 #Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 #Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
You might like
程序员编程十条戒律
2009/07/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python显示进度条的方法
2014/09/20 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
团代会宣传工作方案
2014/05/08 职场文书
毕业生求职信范文
2014/06/29 职场文书
学籍证明模板
2014/11/21 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
《火烧云》教学反思
2016/02/23 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
关于mysql中string和number的转换问题
2022/06/14 MySQL