Openlayers繪制地圖標注

更新時間：2020年09月28日 14:15:47 作者：桃李不言_下自成蹊

這篇文章主要為大家詳細介紹了Openlayers繪制地圖標注，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Openlayers繪制地圖標注的具體代碼，供大家參考，具體內容如下

1、標注的簡介

標注簡單點說就是通過圖標、文字等方式將我們想展示的內容顯示在地圖上，著重突出人們所關注的專題內容，從而為用戶提供個性化的地圖服務；

2、標注方式

在Openlayers3里面，有兩種對地理位置點進行標注的方法，一種是通過創(chuàng)建矢量圖層然后設置其樣式的方法，還有一種就是創(chuàng)建Overlay覆蓋層的方法；對于第一種方式，本質上創(chuàng)建的還是一個矢量對象，只是將其表現形式更換了一下，用Style樣式進行包裝；而第二種方式則是創(chuàng)建的一個單獨的覆蓋層，然后通過設置其屬性進行某些信息的展示；至于具體使用哪一種方式，還是得根據具體來看；

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
    })
   });
 
   //創(chuàng)建標簽的樣式
   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);
   //設置文本覆蓋層的內容為之前創(chuàng)建的覆蓋層的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) {
    //創(chuàng)建一個div元素
    var elementDiv = document.createElement('div');
    //設置div元素的樣式類
    elementDiv.className = 'marker';
    //設置div元素的title屬性
    elementDiv.title = '標注點';
 
    //獲取id為label的div標簽
    var overlay = document.getElementById('label');
    //將新創(chuàng)建的div標簽添加到overlay中
    overlay.appendChild(elementDiv);
 
    //創(chuàng)建一個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" >標注點</a>
  </div>
 </div>
</body>
</html>

4、結果展示

初始化頁面