OpenLayers 是一個專爲Web GIS 客戶端開發提供的JavaScript 類庫包，用於實現標準格式發佈的地圖數據訪問。博主因爲公司業務主打IoT，經常需要在產品中加入一些地圖以及對地圖的操作。便一不留神上了OpenLayers的這條賊船。接下來就嘗試的來做一些小的記錄，用來鞏固自身的知識。
先來看看我們要實現的效果
再來一大段代碼
HTML部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>加載地圖</title>
<link rel="stylesheet" type="text/css" href="OpenLayers/css/ol.css" />
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="./OpenLayers/js/ol.js"></script>
<style>
#map{
height:750px;
width: 0 auto;
background: #ccc;
}
</style>
</head>
<body>
<h1>Shanghai Map</h1>
<div id="map">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" style="width:100px;height:35px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="map.js"></script>
</html>js部分
var map = new ol.Map({
//是否在右下地圖右下角顯示地圖提供商的信息 默認是true
controls : ol.control.defaults({
attribution:false,
}),
//地圖顯示的目標HTML容器 用ID標識
target : "map",
//Layer圖層是資源數據的可視化顯示
layers :[ new ol.layer.Tile({
source : new ol.source.OSM()
}) ],
//ol.View負責地圖的中心點，放大，投影之類的設置
view : new ol.View({
//121.49491, 31.24169 上海東方明珠
//定位中心點位置 需要將經緯度轉化爲墨卡託座標
center : ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857'),
//當前範圍等級 等級越高內容越仔細
zoom:15,
//範圍的最小值
minZoom:2,
//範圍的最大值
maxZoom:15
})
});
//設置Icon樣式
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
//錨點 文字與圖片的距離
anchor:[0.5,40],
//x方向單位
anchorXUnits:'fraction',
//y方向單位
anchorYUnits:'pixel',
//圖片的透明度
opacity:0.75,
//圖片的url
src:'carImg/car_red0.png'
}),
text:new ol.style.Text({
//文字對齊方式
textAlign:'center',
//文字的基準線
textBaseline:'middle',
//字體樣式
font:'normal 12px 微軟雅黑',
//文本內容
text:"Kingsley's car",
//填充
fill: new ol.style.Fill({color:'#aa3300'}),
//筆觸
stroke: new ol.style.Stroke({color:"#ffcc33",width:2})
})
});
//設置特徵
var iconFeature = new ol.Feature({
name:"Kingsley's car",
geometry: new ol.geom.Point(ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857')),//位置點
});
//將圖標放置在點上
iconFeature.setStyle(iconStyle);
//設置圖片大小
iconStyle.getImage().setScale(0.8);
//創建圖層
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features:[iconFeature]
})
});
//將圖層添加到地圖上
map.addLayer(iconLayer);
var element = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
//創建popup圖層
var popup = new ol.Overlay({
//元素
element:element,
//popup圖層與位置點的關係
positioning:"bottom-left",
//事件傳播到地圖視點是否停止
stopEvent:false,
autoPan:true,
autoPanAnimation:{
duration:250 //當Popup超出地圖邊界時，爲了Popup全部可見，地圖移動的速度.
}
});
//添加小車點擊事件
map.on('click',function(evt){
//evt 保存了點擊的點座標
var pixel = map.getEventPixel(evt.originalEvent);
//這個函數會檢測與pixel像素相交的要素feature，並對該feature調用callback函數。
//在視口中遍歷所有具有像素顏色的圖層，如果圖層存在，則返回
var feature = map.forEachFeatureAtPixel(pixel,
function(feature,layer){
return feature;
});
if(feature){
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
content.innerHTML = "<p>Welcome to</br> Shanghai</p>"
//設置彈框的位置
if(popup.getPosition() == undefined){
popup.setPosition(coord);
}
//彈框添加到圖層上
map.addOverlay(popup);
}
});
//popup的關閉事件
closer.addEventListener('click',function(){
//移除彈框
popup.setPosition(undefined);
closer.blur();
return false;
});
//添加小車手型
map.on('pointermove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});popup.css部分
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 50px;
left: -50px;
text-align: center;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
/*關閉按鈕樣式*/
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
} 嗯。好像看完代碼，也沒什麼好囉嗦的了。能用代碼解決的絕不多說。