[Webgis][地图加载] OpenLayer 的 Hello World

最新推荐文章于 2024-04-20 10:18:37 发布

小康UPUP

最新推荐文章于 2024-04-20 10:18:37 发布

阅读量1k

点赞数 29

分类专栏： Openlayer学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44341012/article/details/135027494

版权

Openlayer学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

心路历程

成为C++程序员的第五年，从开始的视频结构化，到后来的UI界面加后台，到现在专注做qt，终于写了第一篇博客，这篇博客用来记录学习加载地图显示的历程。

因为项目需求，需要加载并显示地图，一开始在网上搜索，大多数都是百度地图的接口调用，然后就实现了第一版百度在线地图，但是百度在线地图需要申请key，然后软件部署环境也无法联网，于是开始研究如何实现离线地图，离线地图牵扯出了 离线瓦片地图 的概念。而后到处找百度接口的离线代码，但是一般的百度离线代码都是直接爬取的，基本只改了离线地图加载的地址，很多图片文件都还是在线，导致使用的时候还得不停的看源码，下载文件替换。其次百度离线地图下载也比较麻烦，大多数能下载到最新地图的软件或者网站都是需要收费的，不收费的下载的地图比较老旧，与现在的地形有明显差别。

然后就引来了另一项需求，软件要支持多种地图显示。于是又开始研究 高德地图 实现，一样从在线接口到找离线接口，下载离线地图，进行高德离线显示，将百度地图的那一套用高德API重新实现了一遍。

然后就有了第三项任务，电子海图实现，在研究电子海图的过程中，了解到了 OpenLayer，才知道有好多第三方库，可以实现 webgis (在这里也了解到了 webgis 的概念)，同时高德百度地图的API其实是不开源的，很难更新，且两种地图接口不一致。OpenLayer 是我了解到的第一个开源 webgis，也是比较适合我需求的一个，相对轻量级的leaflet来说。然后电子海图的研究就暂时终止了，开始研究 OpenLayer 去实现高德百度地图的加载显示。

开始实现

上面啰嗦这么多，主要是聊一下我选择 OpenLayer 的历程，给大家做个参考，下面让我们来一个 OpenLayer 版本的 Hello World。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style>
        html { height: 100% }
        body { height: 100%;margin: 0px;padding: 0px }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
    </style>

    <title>Hello World</title>

</head>
<body>

    <div id="container"></div>
    <script>
        // 核心图层layer
        AMapLayer = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        // 把整个地图看作一个容器（Map）
        var map = new ol.Map({
            target: 'container',
            // 核心为地图图层（Layer）
            layers: [AMapLayer], 
            // 并由地图视图（View）进行地图表现
            view: new ol.View({
                //设定默认坐标系
                projection: 'EPSG:3857', 
                //设定中心点，因为默认坐标系为 3587，所以要将我们常用的经纬度坐标系4326 转换为 3587坐标系
                center: ol.proj.transform([120.266053,31.550228], 'EPSG:4326', 'EPSG:3857'), 
                // 默认显示级别，相当于瓦片地图的 Z 级别
                zoom: 5,
                // 最小显示级别
                minZoom:3, 
                // 最大显示级别
                maxZoom:19
            })
        });

    </script>
</body>
</html>