openlayers学习（一）显示地图

1、引入openlayer的api

var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});
3、创建view

var view = new ol.View({
center: [113, 23],//设置地图默认中心点
projection: ‘EPSG:4326’,//坐标系
zoom: 10//默认缩放级别
});
4、创建map

map = new ol.Map({
layers: [rootLayer],//加载创建的地图图层
target: ‘map’,//地图的显示容器
view: view
});
效果图：

完整代码：

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Draw Shapes</title>
<script src=”https://unpkg.com/elm-pep”></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<link rel=”stylesheet” href=”../lib/openlayerv6.4.3/css/ol.css”>
<script src=”../lib/openlayerv6.4.3/build/ol.js”></script>
</head>
<script>
var map;
function init() {
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});

var view = new ol.View({
center: [113, 23],//设置地图默认中心点
projection: ‘EPSG:4326’,//坐标系
zoom: 10//默认缩放级别
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
}

</script>
<body onload=”init()”>
<div id=”map” class=”map”></div>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「mylove10086」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014572215/article/details/109055148

openlayers学习（一） 显示地图

相关文章

归档

openlayers学习（一）显示地图