openlayers-03-引入地图_ol.js文件不同版本

作者：凡人多烦事01 | 2024-05-20 00:16:24

踩

ol.js文件不同版本

开始之前，先介绍下当前ol的各个版本的不同。
ol2 最早也是流行很广的一个版本，不过这个版本随着js的不断迭代，已经显得力不从心了；
ol3 使用了新的设计模式从底层重写，更加符合主流的设计思路。
ol4.x-ol5.x 基于ol3进行了部分重构并新增了很多功能性API，整个逻辑架构变动并不是很大。
ol6.x-ol7.x 从6.0开始，ol不再向后兼容，组件化，降低内存，更多的webgl的支持等等。

其他的版本区别，可以自行在github查看。
https://github.com/openlayers/openlayers/releases

目前我工作中的主力使用的版本是ol5.3，这个版本可以直接在html中使用script引入ol的完整的js包，后期的
讲解也基本已该版本为主。从版本4.x-7.x基本逻辑架构其实还是一样的，只是组织实现形式不同。
在这里下载5.3版本 ol5.3

天地图
在网页上加载显示天地图，天地图对于搞gis的各位来说应该不算陌生，我就不介绍了。不了解的自行百度吧

直接上代码，说再多不如直接看代码来得快。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>

    <script type="text/javascript">
        //天地图密钥，可以自己注册申请，这里仅用于演示，不要用在实际项目中，随时可能失效
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";

        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var tdt_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var tdt_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [tdt_vec, tdt_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: [0, 0],
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:3857"
            })
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

ol.Map 地图容器类

target: 指定dom元素的id
layers:指定加载的图层,这里是有顺序的，它接收一个图层数组对象，该数组的最后一个图层会在
顶部显示，即你能看到的就是最顶部那个图层，比如上面两个tdt_vec, tdt_cva，如果交换了位置，
就无法看到天地图矢量注记图层了，只能看到天地图矢量图层。图层也可以在后面通过ol.Map()的
addLayer方法添加。
view:设置地图显示视图。也可以后期通过ol.Map()类的setView()方法指定，缺少该属性则不会提
取图层源。

ol.View 视图类

center：地图初次加载时的中心点，接收一组经纬度坐标[117.2356,39.6325]
zoom：初次加载时的默认缩放层级
projection：地图的投影坐标系。默认为EPSG:3857，即墨卡托坐标系。
maxZoom：允许的最大缩放级别
minZoom：允许的最小缩放级别
rotation：设置初始视图的旋转弧度（顺时针方向)。

实现地图加载的流程

创建一个div，并设置id。
创建ol.Map对象，并指定上一步创建的div作为地图容器。
创建地图图层对象ol.layer.Tile，也可能是其他格式的图层对象，后面会有涉及。
为ol.Map对象设置layers、view。

示例代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/595204

openlayers-03-引入地图_ol.js文件 不同版本

openlayers-03-引入地图_ol.js文件不同版本