溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關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" >
<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實現繪制地圖標注了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
