博客

openlayers学习（一） 显示地图

  • Post author:
  • Post category:其他


1、引入openlayer的api 

<link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
<script src="../lib/openlayerv6.4.3/build/ol.js"></script>

2、创建地图图层 

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>


版权声明：本文为u014572215原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。