快捷導(dǎo)航

Openlayers繪制地圖標(biāo)注

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

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

本文實(shí)例為大家分享了Openlayers繪制地圖標(biāo)注的具體代碼，供大家參考，具體內(nèi)容如下

1、標(biāo)注的簡(jiǎn)介

標(biāo)注簡(jiǎn)單點(diǎn)說(shuō)就是通過(guò)圖標(biāo)、文字等方式將我們想展示的內(nèi)容顯示在地圖上，著重突出人們所關(guān)注的專題內(nèi)容，從而為用戶提供個(gè)性化的地圖服務(wù)；

2、標(biāo)注方式

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

3、代碼實(shí)現(xiàn)

<!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 () {
   //北京地理坐標(biāo)
   var beijing = ol.proj.fromLonLat([116.28, 39.54]);
   //武漢地理坐標(biāo)
   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)建標(biāo)簽的樣式
   var createLabelStyle = function (feature) {
    //返回一個(gè)樣式
    return new ol.style.Style({
     //把點(diǎn)的樣式換成ICON圖標(biāo)
     image: new ol.style.Icon({
      //控制標(biāo)注圖片和文字之間的距離
      anchor: [0.5, 60],
      //標(biāo)注樣式的起點(diǎn)位置
      anchorOrigin: 'top-right',
      //X方向單位：分?jǐn)?shù)
      anchorXUnits: 'fraction',
      //Y方向單位：像素
      anchorYUnits: 'pixels',
      //偏移起點(diǎn)位置的方向
      offsetOrigin: 'top-right',
      //透明度
      opacity: 0.75,
      //圖片路徑
      src: '../images/label/blueIcon.png'
     }),
     //文本樣式
     text: new ol.style.Text({
      //對(duì)齊方式
      textAlign: 'center',
      //文本基線
      textBaseline: 'middle',
      //字體樣式
      font: 'normal 14px 微軟雅黑',
      //文本內(nèi)容
      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({
    //點(diǎn)要素
    geometry: new ol.geom.Point(beijing),
    //名稱屬性
    name: '北京市',
    //人口屬性
    population: 2115
   });
   //為點(diǎn)要素添加樣式
   iconFeature.setStyle(createLabelStyle(iconFeature));
 
   //初始化矢量數(shù)據(jù)源
   var vectorSource = new ol.source.Vector({
    //指定要素
    features:[iconFeature]
   });
 
   //初始化矢量圖層
   var vectorLayer = new ol.layer.Vector({
    //數(shù)據(jù)源
    source:vectorSource
   });
   //將矢量圖層添加到map中
   map.addLayer(vectorLayer);
 
   //初始化覆蓋層標(biāo)注
   var marker = new ol.Overlay({
    //位置坐標(biāo)
    position: wuhan,
    //覆蓋層如何與位置坐標(biāo)匹配
    positioning: 'center-center',
    //覆蓋層的元素
    element: document.getElementById('marker'),//ToDo 此處不能用JQuery方式$('#marker')獲取元素
    //事件傳播到地圖視點(diǎn)的時(shí)候是否應(yīng)該停止
    stopEvent:false
   });
   //將覆蓋層添加到map中
   map.addOverlay(marker);
 
   //設(shè)置覆蓋層的title屬性
   marker.getElement().title = '武漢市';
   //初始化文本覆蓋層
   var text = new ol.Overlay({
    //位置
    position: wuhan,
    //覆蓋層的元素
    element: document.getElementById('address')
   });
   //將文本覆蓋層添加到map中
   map.addOverlay(text);
   //設(shè)置文本覆蓋層的內(nèi)容為之前創(chuàng)建的覆蓋層的title屬性
   text.getElement().innerText = marker.getElement().title;
 
   //地圖的點(diǎn)擊事件
   map.on('click', function (evt) {
    //獲取單選按鈕的選項(xiàng)
    var type = $('input[name="label"]:checked').val();
    //獲取位置坐標(biāo)
    var point = evt.coordinate;
    //如果類型是矢量標(biāo)注則添加矢量標(biāo)簽，否則添加覆蓋標(biāo)簽
    if (type == 'vector') {
     addVectorLabel(point);
    } else if (type == 'overlay') {
     addOverlayLabel(point);
    } 
   });
 
   //添加矢量標(biāo)簽
   function addVectorLabel(coordinate) {
    //初始化一個(gè)新的點(diǎn)要素
    var newFeature = new ol.Feature({
     geometry: new ol.geom.Point(coordinate),
     name: '標(biāo)注點(diǎn)'
    });
    //設(shè)置點(diǎn)的樣式
    newFeature.setStyle(createLabelStyle(newFeature));
    //將當(dāng)前要素添加到矢量數(shù)據(jù)源中
    vectorSource.addFeature(newFeature);
   }
 
   //添加覆蓋標(biāo)注
   function addOverlayLabel(coordinate) {
    //創(chuàng)建一個(gè)div元素
    var elementDiv = document.createElement('div');
    //設(shè)置div元素的樣式類
    elementDiv.className = 'marker';
    //設(shè)置div元素的title屬性
    elementDiv.title = '標(biāo)注點(diǎn)';
 
    //獲取id為label的div標(biāo)簽
    var overlay = document.getElementById('label');
    //將新創(chuàng)建的div標(biāo)簽添加到overlay中
    overlay.appendChild(elementDiv);
 
    //創(chuàng)建一個(gè)a標(biāo)簽元素
    var elementA = document.createElement('a');
    //設(shè)置a標(biāo)簽的樣式類
    elementA.className = 'address';
    //設(shè)置a標(biāo)簽的鏈接地址
    elementA.href = '#';
    //設(shè)置a標(biāo)簽的超鏈接文本
    setInnerText(elementA, elementDiv.title);
    //將a標(biāo)簽元素添加到div標(biāo)簽元素中
    elementDiv.appendChild(elementA);
 
    //新建一個(gè)覆蓋層
    var newMarker = new ol.Overlay({
     //設(shè)置位置為當(dāng)前鼠標(biāo)點(diǎn)擊的坐標(biāo)
     position: coordinate,
     //設(shè)置覆蓋層與位置之間的匹配方式
     positioning: 'center-center',
     //覆蓋層元素
     element: elementDiv,
     //事件傳播到地圖視點(diǎn)的時(shí)候是否應(yīng)該停止
     stopEvent:false
    });
    //將覆蓋層添加到map中
    map.addOverlay(newMarker);
 
    //新建一個(gè)文本覆蓋層
    var newText = new ol.Overlay({
     //設(shè)置位置為當(dāng)前鼠標(biāo)點(diǎn)擊的坐標(biāo)
     position: coordinate,
     //覆蓋層元素
     element:elementA
    });
    //將文本覆蓋層添加到map中
    map.addOverlay(newText);
   }
 
   //設(shè)置文本內(nèi)容
   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" >標(biāo)注點(diǎn)</a>
  </div>
 </div>
</body>
</html>

4、結(jié)果展示

初始化頁(yè)面