Openlayers之地图标注

1、标注的简介

标注简单点说就是通过图标、文字等方式将我们想展示的内容显示在地图上，着重突出人们所关注的专题内容，从而为用户提供个性化的地图服务；

2、标注方式

在Openlayers3里面，有两种对地理位置点进行标注的方法，一种是通过创建矢量图层然后设置其样式的方法，还有一种就是创建Overlay覆盖层的方法；对于第一种方式，本质上创建的还是一个矢量对象，只是将其表现形式更换了一下，用Style样式进行包装；而第二种方式则是创建的一个单独的覆盖层，然后通过设置其属性进行某些信息的展示；至于具体使用哪一种方式，还是得根据具体来看；

3、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="../lib/jquery/jquery.js"></script><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><style type="text/css">body, html, div, ul, li,img{border:none;padding:0px;margin:0px;}#menu{width:100%;height:20px;padding:5px 10px;left:10px;font-size:14px;font-family:"微软雅黑";}.checkbox{margin:5px 15px;}.marker{width:20px;height:20px;border:1px solid #088;border-radius:10px;background-color:#0FF;opacity:0.5;}.address{text-decoration:none;color:#aa3300;font-size:14px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.2em;}</style><script type="text/javascript">$(function () {//北京地理坐标var beijing = ol.proj.fromLonLat([116.28, 39.54]);//武汉地理坐标var wuhan = ol.proj.fromLonLat([114.21,30.37]);//初始化地图var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source:new ol.source.OSM()})],view: new ol.View({center: beijing,zoom: 6,minZoom:2})});//创建标签的样式var createLabelStyle = function (feature) {//返回一个样式return new ol.style.Style({//把点的样式换成ICON图标image: new ol.style.Icon({//控制标注图片和文字之间的距离anchor: [0.5, 60],//标注样式的起点位置anchorOrigin: 'top-right',//X方向单位：分数anchorXUnits: 'fraction',//Y方向单位：像素anchorYUnits: 'pixels',//偏移起点位置的方向offsetOrigin: 'top-right',//透明度opacity: 0.75,//图片路径src: '../images/label/blueIcon.png'}),//文本样式text: new ol.style.Text({//对齐方式textAlign: 'center',//文本基线textBaseline: 'middle',//字体样式font: 'normal 14px 微软雅黑',//文本内容text: feature.get('name'),//填充样式fill: new ol.style.Fill({color: '#aa3300'}),//笔触stroke: new ol.style.Stroke({color: '#ffcc33',width: 2})})});};//初始化要素var iconFeature = new ol.Feature({//点要素geometry: new ol.geom.Point(beijing),//名称属性name: '北京市',//人口属性population: 2115});//为点要素添加样式iconFeature.setStyle(createLabelStyle(iconFeature));//初始化矢量数据源var vectorSource = new ol.source.Vector({//指定要素features:[iconFeature]});//初始化矢量图层var vectorLayer = new ol.layer.Vector({//数据源source:vectorSource});//将矢量图层添加到map中map.addLayer(vectorLayer);//初始化覆盖层标注var marker = new ol.Overlay({//位置坐标position: wuhan,//覆盖层如何与位置坐标匹配positioning: 'center-center',//覆盖层的元素element: document.getElementById('marker'),//ToDo 此处不能用JQuery方式$('#marker')获取元素//事件传播到地图视点的时候是否应该停止stopEvent:false});//将覆盖层添加到map中map.addOverlay(marker);//设置覆盖层的title属性marker.getElement().title = '武汉市';//初始化文本覆盖层var text = new ol.Overlay({//位置position: wuhan,//覆盖层的元素element: document.getElementById('address')});//将文本覆盖层添加到map中map.addOverlay(text);//设置文本覆盖层的内容为之前创建的覆盖层的title属性text.getElement().innerText = marker.getElement().title;//地图的点击事件map.on('click', function (evt) {//获取单选按钮的选项var type = $('input[name="label"]:checked').val();//获取位置坐标var point = evt.coordinate;//如果类型是矢量标注则添加矢量标签，否则添加覆盖标签if (type == 'vector') {addVectorLabel(point);} else if (type == 'overlay') {addOverlayLabel(point);} });//添加矢量标签function addVectorLabel(coordinate) {//初始化一个新的点要素var newFeature = new ol.Feature({geometry: new ol.geom.Point(coordinate),name: '标注点'});//设置点的样式newFeature.setStyle(createLabelStyle(newFeature));//将当前要素添加到矢量数据源中vectorSource.addFeature(newFeature);}//添加覆盖标注function addOverlayLabel(coordinate) {//创建一个div元素var elementDiv = document.createElement('div');//设置div元素的样式类elementDiv.className = 'marker';//设置div元素的title属性elementDiv.title = '标注点';//获取id为label的div标签var overlay = document.getElementById('label');//将新创建的div标签添加到overlay中overlay.appendChild(elementDiv);//创建一个a标签元素var elementA = document.createElement('a');//设置a标签的样式类elementA.className = 'address';//设置a标签的链接地址elementA.href = '#';//设置a标签的超链接文本setInnerText(elementA, elementDiv.title);//将a标签元素添加到div标签元素中elementDiv.appendChild(elementA);//新建一个覆盖层var newMarker = new ol.Overlay({//设置位置为当前鼠标点击的坐标position: coordinate,//设置覆盖层与位置之间的匹配方式positioning: 'center-center',//覆盖层元素element: elementDiv,//事件传播到地图视点的时候是否应该停止stopEvent:false});//将覆盖层添加到map中map.addOverlay(newMarker);//新建一个文本覆盖层var newText = new ol.Overlay({//设置位置为当前鼠标点击的坐标position: coordinate,//覆盖层元素element:elementA});//将文本覆盖层添加到map中map.addOverlay(newText);}//设置文本内容function setInnerText(element,text) {if (typeof element.textContent == 'string') {element.textContent = text;} else {element.innerText = text;}}});</script>
</head>
<body><div id="menu"><label class="checkbox"><input type="radio" name="label" value="vector" checked="checked" />Vector Label</label><label class="checkbox"><input type="radio" name="label" value="overlay" />Overlay Label</label></div><div id="map"></div><div id="label" style="display:none"><div id="marker" class="marker" title="Marker"><a class="address" id="address" target="_blank" href="http://www.openlayers.org">标注点</a></div></div>
</body>
</html>

4、结果展示

初始化页面

选中第一个单选按钮，在地图页面上的任何地方点击，将会添加矢量标注

选中第二个单选按钮，则在页面任意地方单击，将添加覆盖标注

Openlayers之地图标注相关推荐

openlayers 可以实现3d地图效果吗_OpenLayers教程：地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标.文字等形式把点相关的信息展现到地图上. 随便打开一个电子地图就可以看到许多标注: 可以说地图没有了标注就丧失了一半信息,甚至是全部信息! 地图标注的 ...
openlayers 地图上加图标_OpenLayers教程：地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标.文字等形式把点相关的信息展现到地图上. 随便打开一个电子地图就可以看到许多标注: 可以说地图没有了标注就丧失了一半信息,甚至是全部信息! 地图标注的 ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
OpenLayers 3地图添加图标
OpenLayers 3地图添加图标一.overlay方式在地图添加图标 1.项目结构 2.map.html <!Doctype html> <html xmlns='http:/ ...
ios开发，地图标注聚集。搜索标注title功能
最近在做地图功能,要实现的就是地图标注聚集,还有搜索地图地图标注通常都是大头针.如果地图缩小到一定范围的时候,会显示密密麻麻的大头针.这样会显的难看所以设计了一定区域范围内的大头针,缩小的时候给聚 ...
python百度地图标注自己的店名_百度地图上怎么显示店名百度地图标注店名方法...
对于很多经营小店的小伙伴来说,能让人一打开百度地图就能看到自己的店名显示在其中便觉得这是一件颇为高兴的事情,但问题是如何在百度地图上怎么显示自己的店名呢?下面小编就为大家带来百度地图标注店名方法,希望 ...
百度地图android wear,Android Wear多款搜狗地图标注内置
跟着多款装备AndroidWear的手表在国内上线,谷歌和苹果在智能手表上的国内"大战"剑拔弩张.尽管,两位"大佬"在诸多方面有着不一样的发展方向,但在智能手表 ...
如何在百度地图、腾讯地图标注公司地址信息?
比如百度地图.腾讯地图.高德地图是可以标注公司位置的,不一定是店铺.所以我们有机会把公司地址在地图里标注出来,这样以后客户拜访时就会非常方便.我们遇到很多朋友都是花了几百块钱做地图标注,实际上这一切都 ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...

Openlayers之地图标注

Openlayers之地图标注相关推荐

最新文章

热门文章