<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/OpenLayers/ol.js"></script>
<script src="olStyle/Light.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.map {
width: 100%;
height: 100%;
background: #f6f6f4;
}
</style>
</head>
<body>
<div id="map" class="map" data-id="11"></div>
<script type="text/javascript">
var map;
$(function () {
InitMap();
AddPoint();
})
var layer;
//地圖初始化
function InitMap() {
//初始化地圖
layer = new ol.layer.Vector({
source:new ol.source.Vector()
})
map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
}
/*增加坐標點**********************************************************************************/
//增加坐標點
function AddPoint() {
//設置位置坐標
//經緯度轉坐標
var point = ol.proj.fromLonLat([120.277, 36.330]);
//如果類型是矢量標注則添加矢量標簽，否則添加覆蓋標簽
addVectorLabel("", point);
}
//添加矢量標簽
function addVectorLabel(title, coordinate) {
//初始化一個新的點要素
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: title
});
//設置點的樣式
newFeature.setStyle(createLabelStyle(newFeature));
//清楚坐標點
layer.getSource().clear();
//將當前要素添加到矢量數據源中
layer.getSource().addFeature(newFeature);
}
//創建樣式
function createLabelStyle(feature) {
//返回一個樣式
return new ol.style.Style({
//把點的樣式換成ICON圖標
image: new ol.style.Icon({
//設置圖標偏移
anchor: [0.5, 1],
//標注樣式的起點位置
anchorOrigin: 'top-right',
//X方向單位：分數
anchorXUnits: 'fraction',
//Y方向單位：像素
anchorYUnits: 'pixels',
//偏移起點位置的方向
offsetOrigin: 'top-right',
//透明度
opacity: 0.9,
//圖片路徑
//src: 'images/map.png'
src:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
}),
//文本樣式
text: new ol.style.Text({
//對齊方式
textAlign: 'center',
//文本基線
textBaseline: 'middle',
//字體樣式
font: 'normal 14px 微軟雅黑',
//文本內容
//text: feature.get('name'),
text: "",
//填充樣式
fill: new ol.style.Fill({
color: '#aa3300'
}),
//筆觸
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
}),
//層
zIndex: 20
});
};
</script>
</body>
</html>
