OpenLayers标记地图点及点击地图点显示自定义弹出框

css代码(设置弹出框样式)

/*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-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;min-width: 280px;}.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: #eeeeee;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: "✖";}

弹出框主要html代码

<div id="popup" class="ol-popup"><div class="pophead" style="width:100%;height: 20px;">//弹出框标题<div id="popup-title" style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 8px;color: #000000">设备信息</div>//弹出框右上角关闭效果<a href="#" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a></div>//弹出框内容<div id="popup-content" style="padding: 10px"></div>
</div>

地图上显示标记点(前提数据库已存有坐标值信息)

//创建地图
var map = new ol.Map({layers: [/*new ol.layer.Tile({source: new ol.source.OSM()})*///加载高德地图数据源getTdtLayer("vec_w", '高德底图'),getTdtLayer("cva_w", '高德标注')],//地图属性view: new ol.View({center: [113.927905, 22.578945],//初始地图缩放zoom: 15,//限制地图缩放最小级别minZoom: 4,//限制地图缩放最大级别maxZoom: 19,projection: 'EPSG:4326'}),target: 'map'});//获取高德图层function getTdtLayer(lyr, name) {var urls = [];for (var i = 1; i < 5; i++) {//urls.push("http://t" + i + ".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=a4c01359108c54c0c298e2e1c59c81c6")urls.push("http://wprd0" + i + ".is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}")}var layer = new ol.layer.Tile({source: new ol.source.XYZ({urls: urls//url: "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"}),name: name});return layer;};//显示图标
var pumpingStation = new ol.style.Style({  /*icon样式*/image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({opacity: 0.95,src: '${pageContext.request.contextPath}/images/pumpingStation.jpg'}))});//ajax从数据库读取图标坐标信息$.get("${pageContext.request.contextPath}/xxx.action?wType=pumpingStation",function (data) {addPumpingStationJson(data);},"json");function addPumpingStationJson(data) {//查询所有图标信息for (i = 0; i < data.features.length; i++) {//创建容器var waterIntakeLayer = new ol.layer.Vector({source: new ol.source.Vector(),name: '图标'});//取坐标值var feature1 = data.features[i];var featurexx = new ol.Feature({geometry: new ol.geom.Point(feature1.geom.coordinates)});//添加点的时候赋值属性featurexx.setProperties({id: feature1.w_id,name: feature1.w_name,desc: feature1.w_desc,type: "device"});//添加图标图案featurexx.setStyle(pumpingStation);//将图标特性添加进容器中waterIntakeLayer.getSource().addFeature(featurexx);//添加到地图显示map.addLayer(waterIntakeLayer);}}

点击地图上标记点弹出自定义弹出框

//拿到弹出框元素
var container = document.getElementById("popup");
//拿到弹出框内容元素
var content = document.getElementById("popup-content");
//拿到弹出框关闭元素
var popupCloser = document.getElementById("popup-closer");//创建弹出框容器var overlay1 = new ol.Overlay({//设置弹出框的容器element: container,//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见autoPan: true,autoPanAnimation: {duration: 250//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.}});//点击图标显示自定义弹出框map.on('click',function(e){var pixel = map.getEventPixel(e.originalEvent);map.forEachFeatureAtPixel(pixel,function(feature){var attr = feature.getProperties();var coodinate = e.coordinate;content.innerHTML = "<ul>" +'<li>设备名称: ' + attr.name +'</li>' +'<li>设备描述:' + attr.desc + '</li>' +"</ul>";overlay1.setPosition(coodinate);map.addOverlay(overlay1);});});//关闭弹出框操作popupCloser.addEventListener('click',function(){overlay1.setPosition(undefined);});

效果如图：

OpenLayers标记地图点及点击地图点显示自定义弹出框相关推荐

OA系统二十四：请假审批五：【点击“审批”后的审批弹出框】的后台逻辑；（审批结果提交的Dao层和Service层逻辑）
本篇博客的主要内容是:[请假审批内嵌页面],[审批弹出框]的点击"确认提交"后,后台的逻辑:主要是Dao层和Service层这些后台逻辑: 说明: (1)目前来看,为了实现某个功 ...
vue之表格数据渲染，实现点击表格某列按钮弹出框显示剩余数据(模态框知识点）
点击按钮弹出模态框实现详情:https://blog.csdn.net/qq_20565303/article/details/78734592 结果: 代码: <template>< ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
vue 组件弹出框点击显示隐藏
本案实现的效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...
百度地图自定义吹出框
2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...
如何在腾讯地图上设置多种颜色的点位和自定义背景弹出框
1.引入地图js <script >var now = new Date();var number = now.getYear().toString() + now.getMonth(). ...
android中使用百度地图绘制弹出框的覆盖物
这几天在项目中引入了百度地图,实现的功能就是类似美团的地图查看周边团购那样的功能,实现的弹出框布局要比美团复杂一些. 下面直接上代码: 通过这个方法在指定的坐标创建一个覆盖物 mBaiduMap.se ...
OpenLayers基础教程——popup弹出框
1.前言在OpenLayers中,一般使用ol.Overlay实现popup弹出框,弹出框一般用于显示地图上兴趣点的一些属性信息,如下图所示.下面开始介绍实现方法. 2.准备测试数据在SqlSer ...

OpenLayers标记地图点及点击地图点显示自定义弹出框

OpenLayers标记地图点及点击地图点显示自定义弹出框相关推荐

最新文章

热门文章