Openlayers（一）地图初始化

最新推荐文章于 2024-06-21 10:36:22 发布

肆月二十二

最新推荐文章于 2024-06-21 10:36:22 发布

阅读量1k

点赞数 2

分类专栏： openlayers初探

本文链接：https://blog.csdn.net/weixin_49929681/article/details/116524152

版权

openlayers初探专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Openlayers地图初始化代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <style>
        #map{
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
    <script>
        let map = new ol.Map({
            target: 'map',          
            layers: [
                new ol.layer.Tile({
                    extent:[-180.0, 0.0, 180.0, 90.0],            
                   source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120.219375416,30.2592444615],
                zoom: 10
            }),           
        });
    </script>
</body>
</html>

地图初始化效果
在这里插入图片描述
现在我们将代码一一拆分出来分析：

发生了什么

首先我们地图初始化在网页中，我们需要了解三件事：

```
最基础html框架搭建
```
```
引入Openlayers包
```
```
<div>地图容器
```

用JavaScript创建一个简单的地图

最基础html框架搭建

最基本的hello World

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello  World</title>
    <style>
      
    </style>
</head>
<body>
    <h2>Hello World</h2>
    <script>    
    </script>
</body>
</html>

引入Openlayers包

在标签中引入 OpenLayers CSS 文件和 JS 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
</head>
</html>

div地图容器

定义地图的宽高大小，其中如果style中height设置百分比的无法是显示地图（只针对于当前写法），那为什么height:100%不起作用呢？我下面单独讲讲原理

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <style>
        #map{
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
    <script>
       
    </script>
</body>
</html>

为什么height:100%不起作用呢？

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。
为什么height:100%不起作用呢？
按照常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。
而在W3C的规范中，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。
当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？
你认为的是正确的，但结果上来说是错误的。
为了理解为什么不会，你要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的据计算方式完全不一样。事实上浏览器根本就不计算内容的高度，除非内容超出了视窗范围（导致滚动条出现）。或者你给整个页面设置一个绝对高度，否则，浏览器就会简单的让内容往下堆砌，页面的高度就无需考虑。因为页面并没有缺省的高度值，所以当你让一个元素的高度设定为百分比，无法获取到父级的高度，自然也无法计算自己的高度。换句话说父元素的高度只是一个缺省值：height:auto.当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。
那么，如果想让一个元素的百分比高度：height::100% 起作用，你需要给这个元素的所有父级元素的高度都设定一个值。需要给body和html元素的高度都设置为height:100% 下面的div的高度的百分比才会生效

用JavaScript创建一个简单的地图

在前文中我们提到了要想创建一个地图，就必须要有Map，Layer，Source，View这四类。
首先，调用了ol.Map类生成了一个地图容器对象，通过target参数关联到div容器（id为"map"的div元素）。
然后通过layers参数设置需要加载的瓦片图层（ol.layer.Tile），这个瓦片图层中包含了一个数据源（ol.source.OSM），这个数据源是OpenStreetMap（一个开放数据源的免费地图）的地图数据，也就是ol.source.OSM这个类封装了加载OSM地图数据的详细实现。
最后通过view参数设置地图视图（ol.View），地图视图中也设置了相应的空间参考系统（projection）、地图视图中心点（center），地图视图缩放级别（zoom）。

 <script>
        let map = new ol.Map({   //创建map容器
            target: 'map',           // 关联到对应的div容器
            layers: [    // 地图图层
                new ol.layer.Tile({   // 瓦片图层
             extent:[-180.0, 0.0, 180.0, 90.0],    //地图范围大小     
                   source: new ol.source.OSM()// OpenStreetMap数据源
                })
            ],
            view: new ol.View({   // 地图视图
                projection: 'EPSG:4326',  //坐标系（ol默认坐标系是3857）
                center: [120.219375416,30.2592444615], //中心点经纬度
                zoom: 10     //地图层级
            }),           
        });
    </script>

肆月二十二

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Openlayers（一）地图初始化

Openlayers地图初始化代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"> <scr
复制链接

扫一扫