openlayers初始化加载天地图(ol6)

最新推荐文章于 2024-02-04 16:46:06 发布

YoSun_L

最新推荐文章于 2024-02-04 16:46:06 发布

阅读量543

点赞数

分类专栏： openlayers专栏

本文链接：https://blog.csdn.net/qq_32238753/article/details/115142540

版权

openlayers专栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初始化加载天地图地图，附带注释:

<!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="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- 定义地图容器，记录地图容器ID -->
    <div id="map"></div>
    <script type="text/javascript">
        //初始化地图
        let map = new ol.Map({
            target: 'map',//地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: true
                })
            }).extend([
                new ol.control.ZoomToExtent({
                    extent: [
                        113.39977,29.972804,
                        115.432671,30.8558
                    ]
                })
            ]),
            //地图容器中加载的图层
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=872a282f7273dd7ed7aaccbe1768b427",//tk为天地图key，注意参考的同学替换为自己的key，频繁使用他人的key会导致禁ip
                        wrapX: false
                    })
                })
            ],
            //地图视图设置
            view: new ol.View({     
                projection:"EPSG:4326",//设置坐标系为4326 地理坐标系         
                center: [114.422904,30.551875], //地图初始中心点             
                zoom: 16 //地图初始显示级别
            })
        });
    </script>

</body>

</html>

注释：

①、在初始化地图前需要给地图指定一个容器，如上文创建了一个id为map的div，在实例化map的时候指定target对应map

②、extent:[左下坐标，右上坐标],可以自动定位到extent范围内

③、注意tk为天地图key，注意参考的同学替换为自己的key，频繁使用他人的key会导致禁ip

④、wrapX:禁止平铺，有兴趣的同学可以打开看看效果

⑤、projection:projection坐标系定义为wgs84坐标系，大家可以尝试修改成3857墨卡托投影效果

YoSun_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayers初始化加载天地图(ol6)

初始化加载OSM地图，附带注释:<!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>
复制链接

扫一扫