OpenLayers基础教程——加载一幅地图

最新推荐文章于 2024-07-28 10:40:51 发布

HerryDong

最新推荐文章于 2024-07-28 10:40:51 发布

阅读量1.5k

点赞数 4

文章标签： openlayers

本文链接：https://blog.csdn.net/HerryDong/article/details/108590480

版权

1、前言

说起来虽然一直在做WebGIS方面的工作，但却一直没怎么系统写过相关方面的博客。之前虽然写过几篇OpenLayers方面的博客，却也是零零散散，前后关联不大。于是今晚下定决心，开始OpenLayers系列的博客。由于个人水平有限，难免会有疏漏，所以还请大家多担待哈。下面开始进入正题。

2、加载一幅OSM地图

既然是第一篇博客，那就从最简单的加载地图开始吧。我们先来看一下如何利用OpenLayers加载一幅OSM地图。代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:800px;height:800px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

3、代码解析

大家可别被上面这段代码唬住了，这段代码从本质上来说就只有下面这一句话，至于target、layers、view，这些不过是map的一些相关属性而已。

var map = new ol.Map({...})

3.1、target属性

这个很好理解，WebGIS的一个主要作用就是用来显示地图。既然要显示地图，那么就需要在浏览器页面里提供一块区域供它显示。如何确定这块区域呢？只需要把这块区域的id告诉OpenLayers就行了。所以target属性其实就对应一个div的id值。

3.2、layers属性

我们可以看到传递给layers属性的是一个数组变量，这也表明layers可以接收一个或多个layer。一般的系统开发中，我们可能会遇到地图的切换功能，比如将当前地图从天地图切换到百度地图等等，其实这里的天地图和百度地图的图层都存放在layers属性对应的数组中。

3.3、view属性

顾名思义，view就代表当前的视图。一切跟视图有关的属性都可以在view中进行设置，如projection(地图投影)、center(地图中心点)、zoom(地图缩放等级)。当然还有很多其他的属性，如minZoom(最小缩放等级)、maxZoom(最大缩放等级)等等。

4、结语

到此为止，我们已经学会如何利用OpenLayers加载一副OSM地图了，其实也不是很难，不是吗？。

HerryDong

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers基础教程——加载一幅地图

1、前言说起来虽然一直在做WebGIS方面的工作，但却一直没怎么系统写过相关方面的博客。之前虽然写过几篇OpenLayers方面的博客，却也是零零散散，前后关联不大。于是今晚下定决心，开始OpenLayers系列的博客。由于个人水平有限，难免会有疏漏，所以还请大家多担待哈。下面开始进入正题。2、加载一幅OSM地图既然是第一篇博客，那就从最简单的加载地图开始吧。我们先来看一下如何利用OpenLayers加载一幅OSM地图。代码如下：<!DOCTYPE html><html xmln
复制链接

扫一扫