OpenLayers教程
OpenLayers 简介
OpenLayers 使在任何网页中放置动态地图变得容易。 它可以显示从任何来源加载的地图图块、矢量数据和标记。 OpenLayers 的开发旨在进一步使用各种地理信息。 它是完全免费的开源 JavaScript，在 2 条款 BSD 许可证（也称为 FreeBSD）下发布。
引用JS和CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
创建div作为地图容器
<div id="map_container"></div>
在CSS中设置地图容器的高度
#map_container{ height: 180px; }
地图完整的例子
html文件同目录的tiles文件夹，用于存放离线地图瓦片。默认支持高德地图瓦片、腾讯地图瓦片、必应地图瓦片、谷歌地图瓦片等。因百度坐标系特殊，不支持百度地图瓦片。地图瓦片下载
实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenLayers离线地图</title>
<link rel="stylesheet" href="openlayers/ol.css" />
<script type="text/javascript" src="openlayers/ol.js"></script>
<style type="text/css">
html, body, #map_container{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
</style>
</head>
<body>
<div id="map_container"></div>
</body>
<script type="text/javascript">
var map = new ol.Map({
target: 'map_container',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "tiles/{z}/{x}/{y}.png",
attributions: "OpenLayers离线地图"
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([118.398990578125, 30.62840809925475]),
zoom: 4,
minZoom: 4,
maxZoom: 19
})
});
</script>
</html>
全部教程