初始化加载天地图地图,附带注释:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>初始化一张地图</title>
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" type="text/javascript"></script>
<style type="text/css">
#map {
width: 100%;
height: 95%;
position: absolute;
}
</style>
</head>
<body>
<!-- 定义地图容器,记录地图容器ID -->
<div id="map"></div>
<script type="text/javascript">
//初始化地图
let map = new ol.Map({
target: 'map',//地图容器div的ID
controls: ol.control.defaults({
attributionOptions: ({
collapsible: true
})
}).extend([
new ol.control.ZoomToExtent({
extent: [
113.39977,29.972804,
115.432671,30.8558
]
})
]),
//地图容器中加载的图层
layers: [
new ol.layer.Tile({
title: "天地图矢量",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=872a282f7273dd7ed7aaccbe1768b427",//tk为天地图key,注意参考的同学替换为自己的key,频繁使用他人的key会导致禁ip
wrapX: false
})
})
],
//地图视图设置
view: new ol.View({
projection:"EPSG:4326",//设置坐标系为4326 地理坐标系
center: [114.422904,30.551875], //地图初始中心点
zoom: 16 //地图初始显示级别
})
});
</script>
</body>
</html>
注释:
①、在初始化地图前需要给地图指定一个容器,如上文创建了一个id为map的div,在实例化map的时候指定target对应map
②、extent:[左下坐标,右上坐标],可以自动定位到extent范围内
③、注意tk为天地图key,注意参考的同学替换为自己的key,频繁使用他人的key会导致禁ip
④、wrapX:禁止平铺,有兴趣的同学可以打开看看效果
⑤、projection:projection坐标系定义为wgs84坐标系,大家可以尝试修改成3857墨卡托投影效果