Openlayers绘制地图标注


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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绘制地图标注

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

Openlayers绘制地图标注

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
Openlayers实现图形绘制
Sep 28 #Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 #Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
js实现时钟定时器
2020/03/26 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python reduce()函数的用法小结
2017/11/15 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python 带时区的日期格式化操作
2020/10/23 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
高二地理教学反思
2014/01/24 职场文书
旅游安全协议书
2014/04/21 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
伊琍体标语
2014/06/25 职场文书
毕业生求职信范文
2014/06/29 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
python入门之算法学习
2021/04/22 Python