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 ...
随机推荐
- Eclipse安装配置、卸载教程（Windows版）
Eclipse是一个开放源代码的集成开发环境(IDE),最初由IBM公司开发,现在由Eclipse基金会负责维护.它是一个跨平台的工具,可以用于开发多种编程语言,如Java.C/C++.Python. ...
- performance schema 性能模式
1.performance_schema简介 MySQL的performance schema 用于监控MySQL server在一个较低级别的运行过程中的资源消耗.资源等待等情况.performan ...
- Redis能保证数据不丢失吗？
大家即使没用过Redis,也应该都听说过Redis的威名. Redis是一种Nosql类型的数据存储,全称Remote Dictionary Server,也就是远程字典服务器,用过Dictionar ...
- 图片Base64编码解码的优缺点及应用场景分析
随着互联网的迅猛发展,图片在网页和移动应用中的使用越来越广泛.而图片的传输和加载往往是网页性能的瓶颈之一.为了解决这一问题,图片Base64编码与解码技术应运而生.本文将介绍图片Base64相互转换的 ...
- 项目实战：Qt + 树莓派3B+ 智能笔筒系统
红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术.树莓派.三维.OpenCV.OpenGL.ffmpeg.OSG.单片机.软硬结合等等)持续更新中-(点击传送门) 需求 1.基于树莓 ...
- 项目实战：Qt多段Y轴折线图框架（双Y轴段折线、支持拽拖、浮动游标显示X值各段Y值、支持大量实时显示下位机数据）
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/111660400长期持续带来更多项目与技术分享, ...
- Anaconda下载安装步骤
下载地址 下载比较慢的,用迅雷下,点击复制地址,然后在迅雷里面直接创建连接 Anaconda基于python3.8 Anaconda基于python3.6的 安装步骤 没啥说的,一路安装,中间有个勾选 ...
- 【LeetCode动态规划#16】矩阵的最小路径和、三角形的最小路径和
矩阵的最小路径和 给定一个包含非负整数的 *m* x *n* 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:一个机器人每次只能向下或者向右移动一步. 示例 1 ...
- 【LeetCode二叉树#07】左叶子节点之和（基于栈的迭代法前中后序遍历复习）
左叶子节点之和 力扣题目链接(opens new window) 计算给定二叉树的所有左叶子之和. 示例: 思路 注意审题,这里是要求 左叶子节点 之和 不是二叉树中的左侧节点之和,因此使用层序遍历是 ...
- STM32 LwIP学习过程问题总结（一）：LwIP ping不通，抓包发现ICMP校验和为0x0000
一.问题 今天在将之前的STM32 LwIP1.4.1版本程序移植到2.1.2版本上时,发现ping不同,但是开发板有ICMP回复包,黄颜色警告checksum为0x0000.说明LwIP移植应该是没 ...