<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< link rel = "stylesheet" href = "ol.css" >
< script src = "ol.js" ></ script >
< style >
.map {
width : 100% ;
height : 100vh ;
}
</ style >
</ head >
< body >
< div id = "js-map" class = "map" ></ div >
< script >
window . onload = init ;
function init (){
const map = new ol . Map ({
view: new ol . View ({
center: [ 53031302.36306454 , 4852978.6380593935 ], //默认焦点
zoom: 7 ,
maxZoom: 20 , //最大
minZoom: 1 ,
rotation: 0.5 //初始地图旋转
}),
layers: [
new ol . layer . Tile ({
source : new ol . source . OSM ()
})
],
target: 'js-map' ,
controls:ol . control . defaults (),
interactions:ol . interaction . defaults (),
})
console . log ( map )
//
map . addEventListener ( 'click' , function ( e ){
console . log ( e . coordinate )
})
}
</ script >
</ body >
</ html >
