openlayers-03-引入地图

阿发博客

已于 2023-05-22 23:19:21 修改

阅读量616

点赞数 1

分类专栏： OpenLayers入门与实践文章标签： webgis openlayers

于 2023-05-15 23:54:13 首次发布

本文链接：https://blog.csdn.net/chuanren1991/article/details/130695121

版权

OpenLayers入门与实践专栏收录该内容

19 篇文章 10 订阅

订阅专栏

开始之前，先介绍下当前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>

ol.Map 地图容器类

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