OpenLayers 点击显示经纬度Demo
这里给大家分享我在OpenLayers 地图开发工作中总结出的一下代码和注意点，希望对大家有所帮助
效果如下：
核心代码展示：附带讲解注释
var map = new ol.Map({ // 初始化地图
target: 'map',// 选择地图对象
layers: [
new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url:
'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服务地址
wrapX: false
})
}),
new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url:
'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
wrapX: false
})
})
],
view: new ol.View({
projection: 'EPSG:4326', //设置地图坐标系
center: [113.87, 22.691],//设置地图中心点
zoom: 12//设置地图层级
}),
});
const BGLayer = new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
wrapX: false
})
})
BGLayer.setVisible(false) //设置图层显示隐藏
map.addLayer(BGLayer)//添加图层
//实例化矢量点要素，通过矢量图层添加到地图容器中
//这样就实现了预先加载图文标注
var iconFeature = new ol.Feature();
//设置点要素样式
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature) {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [40, 42],
scale: 0.5, // 图标缩小显示
anchorOrigin: 'top-right', // 标注样式的起点位置
anchorXUnits: 'pixels', // X方向单位：分数
anchorYUnits: 'pixels', // Y方向单位：像素
offsetOrigin: 'bottom-left', // 偏移起点位置的方向
opacity: 1, // 透明度
src: 'dian.png' //图标的URL
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 14px 微软雅黑', //文字样式
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
});
}
var newFeature = new ol.Feature({
geometry: new ol.geom.Point([0,0]) //几何信息
});
newFeature.setStyle(createLabelStyle(newFeature)); //设置要素样式
vectorSource.addFeature(newFeature);
map.on('click', function (evt) {
var coordinate = evt.coordinate; //鼠标单击点的坐标
//新建一个要素ol.Feature
newFeature.set('geometry',new ol.geom.Point(coordinate))
document.getElementsByClassName("list-box")[0].innerHTML = '<p> 经度：' + coordinate[0].toFixed(3) + ' 纬度：' + coordinate[1].toFixed(3) + '</p>'
});
map.on('moveend', function (evt) {
if (map.getView().getZoom() >= 16) {
BGLayer.setVisible(true)
} else {
BGLayer.setVisible(false)
}
})
点位图片：
完整demo代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>点击出点位</title>
<style>
*{padding: 0;margin: 0}
.list-box {
width: 300px;
height: 100px;
background: white;
box-sizing: border-box;
padding: 20px;
line-height: 60px;
overflow: auto;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
text-align: center;
}
</style>
</head> <body>
<div id="map"></div>
<div class="list-box">
</div>
<script>
var map = new ol.Map({ // 初始化地图
target: 'map',// 选择地图对象
layers: [
new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url:
'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服务地址
wrapX: false
})
}),
new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url:
'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
wrapX: false
})
})
],
view: new ol.View({
projection: 'EPSG:4326', //设置地图坐标系
center: [113.87, 22.691],//设置地图中心点
zoom: 12//设置地图层级
}),
});
const BGLayer = new ol.layer.Tile({// 初始化Tile外部图层
source: new ol.source.XYZ({// 初始化XYZ切片服务图层
url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
wrapX: false
})
})
BGLayer.setVisible(false) //设置图层显示隐藏
map.addLayer(BGLayer)//添加图层
//实例化矢量点要素，通过矢量图层添加到地图容器中
//这样就实现了预先加载图文标注
var iconFeature = new ol.Feature();
//设置点要素样式
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature) {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [40, 42],
scale: 0.5, // 图标缩小显示
anchorOrigin: 'top-right', // 标注样式的起点位置
anchorXUnits: 'pixels', // X方向单位：分数
anchorYUnits: 'pixels', // Y方向单位：像素
offsetOrigin: 'bottom-left', // 偏移起点位置的方向
opacity: 1, // 透明度
src: 'dian.png' //图标的URL
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 14px 微软雅黑', //文字样式
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
});
}
var newFeature = new ol.Feature({
geometry: new ol.geom.Point([0,0]) //几何信息
});
newFeature.setStyle(createLabelStyle(newFeature)); //设置要素样式
vectorSource.addFeature(newFeature);
map.on('click', function (evt) {
var coordinate = evt.coordinate; //鼠标单击点的坐标
//新建一个要素ol.Feature
newFeature.set('geometry',new ol.geom.Point(coordinate))
document.getElementsByClassName("list-box")[0].innerHTML = '<p> 经度：' + coordinate[0].toFixed(3) + ' 纬度：' + coordinate[1].toFixed(3) + '</p>'
});
map.on('moveend', function (evt) {
if (map.getView().getZoom() >= 16) {
BGLayer.setVisible(true)
} else {
BGLayer.setVisible(false)
}
})
</script>
</body> </html>
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
OpenLayers 点击显示经纬度Demo的更多相关文章
- 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- 百度地图API-搜索地址、定位、点击获取经纬度并标注
百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...
- jQuery 点击显示再次点击隐藏
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- 点击显示div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- OpenCV学习笔记——点击显示鼠标坐标
点击显示鼠标显示坐标,再次点击时上一次的坐标的会消失…… #include<highgui.h> #include<cv.h> void on_mouse(int event, ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- jquery 点击显示更多
点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...
- js点击显示隐藏
这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...
- vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）
效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的 这个方法里传递的index 对应 isShow 数组里的index ,对 ...
- jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
随机推荐
- NC50505 二叉苹果树
题目链接 题目 题目描述 有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共N个节点,标号1至N,树根编号一定为1. 我们用一根树枝两端连接的节点编号描述一根树枝的位置 ...
- APB_AHB_AXI协议的简单介绍
一.AMBA概述 今天要介绍的三种嵌入式总线技术:APB.AHB.AXI,它们都属于AMBA 片上总线协议.所以,在介绍这几种总线技术之前,有必要先了解一下AMBA 片上总线协议是什么. AMBA ( ...
- STC系列8位MCU在Windows下的开发
STC系列 MCS-51 8位MCU 简介 STC的8位MCU有89/90/10/11/12/15/8(A/F/G/H)这几个大系列, 都是8051衍生的8位单片机, 每个系列的特点如下 STC89系 ...
- Fiddler捕获Java发送的HttpURLConnection请求
1.说明 平常使用Fiddler抓包工具查看浏览器的请求和响应信息很方便, 但有时候我们也需要拦截java代码执行的http请求. 以便更好的调试程序.具体方法如下: 2.编写Java代码 // 配置 ...
- 文心一言 VS 讯飞星火 VS chatgpt （199）-- 算法导论15.2 1题
一.用go语言,对矩阵规模序列(5,10,3,12,5,50,6),求矩阵链最优括号化方案. 文心一言,代码正常运行: 在Go语言中,为了找到矩阵链乘法的最优括号化方案,我们通常会使用动态规划(Dyn ...
- 记一次 QT VS Tools 无法配置 version 的问题
问题概述: 在 QT VS Tools 拓展工具中添加多个 qt 版本的静态库时,发现输入完 Name 和 Path 之后点击 OK,新输入的 version 路径并没有保存成功 测试的 QT VS ...
- 06-Redis系列之-哨兵(Redis-Sentinel)和集群详解和搭建
主从架构高可用 主从架构存在的问题 主从复制,主节点发生故障,需要做故障转移.(可以手动转移:让其中一个slave变成master) 主从复制,只有主写数据,所以写能力和存储能力有限 总结:redis ...
- 【LeetCode贪心#02】摆动序列，麻了
摆动序列 力扣题目链接(opens new window) 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动 ...
- 【Azure Redis】Redis-CLI连接Redis 6380端口始终遇见 I/O Error
问题描述 使用Redis-cli连接Redis服务,因为工具无法直接支持TLS 6380端口连接,所以需要使用 stunnel 配置TLS/SSL服务.根据文章(Linux VM使用6380端口(SS ...
- 【Azure Spring Cloud】Spring Cloud Azure 4.0 调用Key Vault遇见认证错误 AADSTS90002: Tenant not found.
问题描述 Spring Cloud Azure 4.0 调用 Key Vault 的代码中,没有找到设置 authority-host 的配置项,导致认证出现错误 Caused by: com.mic ...