openlayers学习（一）显示地图

最新推荐文章于 2024-08-17 09:00:00 发布

mylove10086

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量1k

点赞数

分类专栏： geoserver 文章标签： openlayers

本文链接：https://blog.csdn.net/u014572215/article/details/109055148

版权

geoserver 专栏收录该内容

14 篇文章 18 订阅

订阅专栏

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>