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 ...
随机推荐
- NC51189 Mondriaan's Dream
题目链接 题目 题目描述 Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, a ...
- 复习一下JVM内存结构
一.程序计数器 程序计数器内存很小,可以看作是当前线程所执行字节码的行号指示器. 有了它,程序就能被正确的执行. 因为有线程切换的存在,则每个线程必须有各自独立的程序计数器,即线程私有的内存. 这里再 ...
- Rancher 2.x 安装
Rancher 是一个容器管理平台.Rancher 简化了使用 Kubernetes 的流程. 下面记录一下手动安装Rancher的步骤 1. 部署 Rancher Server 执行以下命令即可( ...
- 识别主机名和IP地址
文章来源:https://oracle-base.com/articles/misc/identifying-host-names-and-addresses Identifying Host Nam ...
- jsp中无法识别EL表达式问题
今天在开发系统时需要在JSP中遍历List<javabean>,其中用到了EL表达式:${item.value} 页面死活不出数据,只显示表达式本身:${item.value}. 页面代码 ...
- win32 - wsprintfW的使用
文档:将格式化的数据写入指定的缓冲区.根据格式字符串中相应的格式说明,将转换任何参数并将其复制到输出缓冲区.该函数在其写入的字符后附加一个终止空字符,但返回值的字符计数中不包含终止空字符. 例子: # ...
- sklearn学习笔记之线性回归
AI时代扑面而来,在大众面对ChatGPT和Sora发出无数惊叹号的时候,我决定不再只当一个AI时代的API调用者,而是去学习机器学习技术本身. 刚好公司也要往人工智能方向发展的计划,于是我开始从基础 ...
- FFmpeg开发笔记（七）：ffmpeg解码音频保存为PCM并使用软件播放
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- 项目实战：Qt+ffmpeg摄像头检测工具
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- Java面向对象之内部类的几类使用场景
介绍 Java内部类是一种特殊的类,它定义在另一个类的内部.内部类提供了许多有用的特性,包括访问外部类的私有成员.隐藏实现细节以及实现回调接口等.以下是Java内部类的一些常用场景及其举例说明: 回调 ...