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中prev()方法用法实例
Jan 08 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
用ES6写全屏滚动插件的示例代码
May 02 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
浅谈JS的原型和原型链
Jun 04 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
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
vuejs指令详解
2017/02/07 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python根据路径导入模块的方法
2014/09/30 Python
python实现简单银行管理系统
2019/10/25 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
办公室主任职责范文
2013/11/08 职场文书
初中美术教学反思
2014/01/29 职场文书
高中军训感言600字
2014/03/11 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
老人祝寿主持词
2014/03/28 职场文书
端午节演讲稿
2014/05/23 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
员工辞职信怎么写
2015/02/27 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
学术会议通知范文
2015/04/15 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers