一、入門執行個體
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../ol.css" target="_blank" rel="external nofollow" rel="stylesheet"/>
<script src="../ol.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
//view,layers,target是初始化地圖的必須的三個屬性，缺一不可。
let map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 1
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
//這倆參數是控制底圖切片的加載時機，設定為true時在地圖動畫或者地圖互動（放大縮小、漫遊）時切片可以實時加載，提高使用者體驗。如果使用者端性能較差的建議設定為false.預設false
loadTilesWhileAnimating:false,
loadTilesWhileInteracting:false,
});
//view屬性也可以在地圖初始後通過map.setView(ol.View)方法動态設定。
// let view= new ol.View({
// center: [0, 0],
// zoom: 1
// });
// map.setView(view)
</script>
</html>
效果圖
二、添加地圖事件監聽
//滑鼠點選
let clickEvent = map.on('click',(e)=>{
console.log(e)
})
//移除監聽事件
ol.Observable.unByKey(clickEvent)
click,dblclick,singleclick 差別聯系
dblclick 會觸發兩次click，不會觸發singleclick.
singleclick會在click觸發之後250毫秒後觸發。
也就是說singleclick觸發會有250毫秒的延遲，再使用此事件的時候一定要注意，不然會産生意想不到的問題。
![軟體項目你永遠沒法滿足所有人的需求，滿足核心人員需求即可[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)