1. 代码块
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加载OSM地图</title><!-- CSS路径 --><link rel="stylesheet" href="openlayers/css/ol.css"><!-- JS相对路径 --><script src="openlayers/build/ol.js"></script><style>#map {height: 100%;width: 100%;position: absolute;}</style>
</head><body><!--div为地图容器--><div id="map"></div><script>// map类必备三要素：target，layers，viewvar map = new ol.Map({target: 'map', // 与div盒子绑定layers: [ // 图层容器，可包含多个图层，数组形式放置new ol.layer.Tile({ // 新建一个图层source: new ol.source.OSM(), // 新建OSM数据，放置在图层})],view: new ol.View({ // 视图，渲染图层center: [0, 0], // 地图中心点zoom: 2, // 缩放级数})})</script>
</body></html>
2. 效果图
参考：郭明强, 黄颖. WebGIS之OpenLayers全面解析第2版, 电子工业出版社.
