OpenLayers：调用OSM地图的3种方法
目录
第一次玩Open Layer，实现OSM地图的调用。
提前准备好ol.css和ol.js
效果：
1，代码：
<!doctype html>
<html lang="en">
<head>
<script src="ol3/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3/ol.css">
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
<title>OpenLayers 3 example</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
2，代码
<!doctype html>
<html lang="en">
<head>
<script src="ol3/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3/ol.css">
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
<title>OpenLayers 3 example</title>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var tileLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(tileLayer);
</script>
</body>
</html>
3，代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="ol3/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3/ol.css">
<script>
function init() {
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
转载自：https://blog.csdn.net/qq_42192693/article/details/88713670
