3.openlayeers6使用ol.source.Stamen()方式加载瓦片地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./css/ol.css">
<style>
*{padding: 0;margin: 0;}
.map {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script type="text/javascript">
// 3.ol.source.Stamen()方式加载瓦片地图
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor' // 矢量地图图层
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels' // 文字标识图层
})
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[115.89, 28.68], 'EPSG:4326', 'EPSG:3857'), // 根据地图自身坐标系转换成默认坐标系中心点
zoom: 12
})
});
</script>
</html>
