OpenLayers基础教程——popup弹出框

1、前言

在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。

2、准备测试数据

在SqlServer中新建一张省会数据表——ProvincialCapital，字段如下表所示：

字段	含义
Id	自增主键
CityName	城市名称
ProvinceCode	省份编码
Pinyin	拼音
Attribution	归属
CityCode	城市编码
PostCode	邮编
Longitude	经度
Latitude	纬度

测试数据如下：

1    杭州市 330100   Hangzhou   浙江     0571   310026   120.153576   30.287459
2   苏州市 320500   Suzhou     江苏     0512   215002   120.619585   31.299379
3   合肥市 340100   Hefei      安徽     0551   230001   117.283042   31.86119
4   上海市 310100   Shanghai   上海     021    200000   121.472644   31.231706

3、后台读取数据

新建一个ashx文件，加入如下代码：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;namespace WebApplication1.ashx
{/// <summary>/// GetDataHandler 的摘要说明/// </summary>public class GetDataHandler : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";// 查询数据DataTable dataTable = new DataTable();using (SqlDataAdapter adapter = new SqlDataAdapter("select * from ProvincialCapital", ConfigurationManager.ConnectionStrings["ConnectionString"].ToString())){adapter.Fill(dataTable);}// 转换为实体列表List<ProvincialCapital> list = new List<ProvincialCapital>();foreach (DataRow dataRow in dataTable.Rows){list.Add(new ProvincialCapital{CityName = Convert.ToString(dataRow["CityName"]),ProvinceCode = Convert.ToString(dataRow["ProvinceCode"]),Pinyin = Convert.ToString(dataRow["Pinyin"]),Attribution = Convert.ToString(dataRow["Attribution"]),CityCode = Convert.ToString(dataRow["CityCode"]),PostCode = Convert.ToString(dataRow["PostCode"]),Longitude = Convert.ToDouble(dataRow["Longitude"]),Latitude = Convert.ToDouble(dataRow["Latitude"])});}context.Response.Write(JsonConvert.SerializeObject(list));}public bool IsReusable{get{return false;}}}public class ProvincialCapital{/// <summary>/// 城市名称/// </summary>public string CityName { get; set; }/// <summary>/// 省份编码/// </summary>public string ProvinceCode { get; set; }/// <summary>/// 拼音/// </summary>public string Pinyin { get; set; }/// <summary>/// 归属/// </summary>public string Attribution { get; set; }/// <summary>/// 城市编码/// </summary>public string CityCode { get; set; }/// <summary>/// 邮编/// </summary>public string PostCode { get; set; }/// <summary>/// 经度/// </summary>public double Longitude { get; set; }/// <summary>/// 纬度/// </summary>public double Latitude { get; set; }}
}

4、前端实现popup弹出框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>popup弹出框</title><link href="lib/ol/ol.css" rel="stylesheet" /><script src="lib/ol/ol.js"></script><script src="lib/jquery/jquery-3.5.1.min.js"></script><style>html, body, #map {width: 100%;height: 100%;margin: 0;padding: 0;}.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 #FFC125);padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-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;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;color: red;}.ol-popup-closer:after {content: "✖";}</style>
</head>
<body><div id="map"></div><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div></div><script>// 创建数据源var source = new ol.source.Vector({wrapX: false});// 获取后台数据$.ajax({type: 'get',url: 'ashx/GetDataHandler.ashx',dataType: 'json',async: false,cache: false,success: function (data) {for (var i = 0; i < data.length; i++) {var feature = new ol.Feature({geometry: new ol.geom.Point([data[i].Longitude, data[i].Latitude]),cityName: data[i].CityName,provinceCode: data[i].ProvinceCode,pinyin: data[i].Pinyin,attribution: data[i].Attribution,cityCode: data[i].CityCode,postCode: data[i].PostCode,longitude: data[i].Longitude,latitude: data[i].Latitude});source.addFeature(feature);}}});// 创建图层var layer = new ol.layer.Vector({source: source,style: new ol.style.Style({image: new ol.style.Icon({src: 'img/point.png'})})});// 创建地图var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()}),layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});// 获取popup的dom对象var container = document.getElementById('popup');var content = document.getElementById('popup-content');var closer = document.getElementById('popup-closer');// 创建popupvar popup = new ol.Overlay({element: container,autoPan: true,positioning: 'bottom-center',stopEvent: false,autoPanAnimation: {duration: 250}});map.addOverlay(popup);// 关闭popupcloser.onclick = function () {popup.setPosition(undefined);closer.blur();return false;};// 监听鼠标单击事件，点击feature后弹出popupmap.on('click', function (e) {var coordinate = e.coordinate;var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {return feature;});if (feature) {// 清空htmlcontent.innerHTML = '';// 城市名称var cityName = document.createElement('h2');cityName.innerText = feature.get('cityName');content.appendChild(cityName);// 省份编码var provinceCode = document.createElement('p');provinceCode.innerText = '省份编码：' + feature.get('provinceCode');content.appendChild(provinceCode);// 拼音var pinyin = document.createElement('p');pinyin.innerText = '拼音：' + feature.get('pinyin');content.appendChild(pinyin);// 归属var attribution = document.createElement('p');attribution.innerText = '归属：' + feature.get('attribution');content.appendChild(attribution);// 城市编码var cityCode = document.createElement('p');cityCode.innerText = '城市编码：' + feature.get('cityCode');content.appendChild(cityCode);// 邮编var postCode = document.createElement('p');postCode.innerText = '邮编：' + feature.get('postCode');content.appendChild(postCode);// 经度var longitude = document.createElement('p');longitude.innerText = '经度：' + feature.get('longitude');content.appendChild(longitude);// 纬度var latitude = document.createElement('p');latitude.innerText = '纬度：' + feature.get('latitude');content.appendChild(latitude);// 弹出popuppopup.setPosition(coordinate);}});// 监听鼠标移动事件，鼠标移动到feature区域时变为手形map.on('pointermove', function (e) {var pixel = map.getEventPixel(e.originalEvent);var hit = map.hasFeatureAtPixel(pixel);map.getTargetElement().style.cursor = hit ? 'pointer' : '';});</script>
</body>
</html>

OpenLayers基础教程——popup弹出框相关推荐

popup弹出html页面,Popup弹出框绑定添加数据事件（步奏详解）
这次给大家带来Popup弹出框绑定添加数据事件(步奏详解),Popup弹出框绑定添加数据事件的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑窗口P1中显示一组数据,并提供一个添加按钮点击按 ...
个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')
个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象, ...
WPF----＞自定义控件添加Popup弹出框
自定义控件,当点击自定义控件时弹出提示框文章目录重要属性普通使用自定义控件使用Popup 参考文档重要属性属性名称解释使用方法 PlacementTarget 安置目标 Popup附 ...
关于flask入门教程-自定义弹出框
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
axure 点击按钮弹出框_Axure动态面板教程：弹出框效果的制作
作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...
简单实现Popup弹出框添加数据
逻辑窗口P1中显示一组数据,并提供一个添加按钮点击按钮,弹出新的浏览器窗口P2,在其中添加一条数据并提交后,窗口P2自动关闭新添加数据动态添加到窗口P1中并被选中所需知识:JS BOM 窗口对 ...
自定义 cube-ui 弹出框dialog支持多个且多种类型的input框
start 最近遇到一个需求,给一个移动端项目加一点小功能. 移动端 UI 组件库使用的是 cube-ui. 但是基础的 cube-ui 不太满足我的需求- 重点是记录一下我的思路,其次才是实现的代码 ...
mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇
为弹出框(Popup)添加"关闭(×)"按钮如弹出框结构代码所示,关闭按钮标示"×"是放置在一div中的.使其具有关闭整个弹出框的功能,只要在创建该div时, ...

OpenLayers基础教程——popup弹出框

1、前言

2、准备测试数据

3、后台读取数据

4、前端实现popup弹出框

OpenLayers基础教程——popup弹出框相关推荐

最新文章

热门文章