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 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
python的Template使用指南
2014/09/11 Python
python数组过滤实现方法
2015/07/27 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python中join函数简单代码示例
2018/01/09 Python
python如何生成网页验证码
2018/07/28 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
经典c++面试题五
2014/12/17 面试题
成人教育自我鉴定
2013/11/01 职场文书
应用数学自荐书范文
2013/11/24 职场文书
大学自我鉴定
2013/12/20 职场文书
员工合理化建议书
2014/05/19 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis