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 ...
随机推荐
- 如何在.NET Core中为gRPC服务设计消息
如何在.NET Core中为gRPC服务设计消息 使用协议缓冲区规范定义gRPC服务非常容易,但从需求转换为.NET Core,然后管理服务的演变时,需要注意几件事. 创建gRPC服务的核心是.pro ...
- CF1878C Vasilije in Cacak 题解
题目传送门 简化题意 有 \(t\) 组询问,每次询问是否能从 \(1 \sim n\) 中选择 \(k\) 个数使得它们的和为 \(x\). 解法 考虑临界情况,从 \(1 \sim n\) 中选择 ...
- NC14352 旅行
题目链接 题目 题目描述 小z放假了,准备到R城市旅行,其中这个城市有N个旅游景点.小z时间有限,只能在三个旅行景点进行游玩.小明租了辆车,司机很善良,说咱不计路程,只要你一次性缴费足够,我就带你走遍 ...
- NC50493 石子合并
题目链接 题目 题目描述 将n堆石子绕圆形操场排放,现要将石子有序地合并成一堆.规定每次只能选相邻的两堆合并成新的一堆,并将新的一堆的石子数记做该次合并的得分. 请编写一个程序,读入堆数n及每堆的石子 ...
- SVG与foreignObject元素
SVG与foreignObject元素 可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言,用于描述二维的矢量图形.作为一个基于文本的开放网络标准,SVG能够 ...
- Swoole从入门到入土(5)——TCP服务器[异步任务]
无论对于B/S还是C/S,程序再怎么变,唯一不变的是用户不想等太久的躁动心情.所以服务端对于客户的请求,能有多快就多快.如果服务端需要执行很耗时的操作,就需要异步任务处理机制,保证当前的响应速度不受影 ...
- uniapp实现点击加载更多
使用场景 举个栗子:外卖app当订单商品数量比较多时,不方便一次性展示出来.通常会展示一部分,并在页面给出一个查看更多功能.点击后即可自定义展示剩余内容,比如可以每次点击多展示N个内容,或展示所有. ...
- vm添加新硬盘时，不用重启即可让新硬盘生效
# 两个命令使用其中一个即可 echo '- - -' > /sys/class/scsi_host/host0/scan echo '- - -' > /sys/class/scsi_h ...
- 分发函数singledispatch
import functools @functools.singledispatch() def myfunc(arg): print("default myfunc({!r})" ...
- 面试官：Redis如何保证高可用？
Redis 高可用(High Availability,HA)是指 Redis 通过一系列技术手段确保在面临故障的情况下也能持续提供服务的能力. Redis 作为一个内存数据库,其数据通常存储在内存中 ...