WebGIS 之 ol如何加载天地图及设置相关参数

最新推荐文章于 2024-06-16 14:33:31 发布

许携

最新推荐文章于 2024-06-16 14:33:31 发布

阅读量231

点赞数 2

文章标签： swift 开发语言 ios

本文链接：https://blog.csdn.net/2302_78438891/article/details/139530602

版权

加载天地图

要在OpenLayers中加载天地图，需要创建一个地图实例，并为其指定一个容器ID，然后添加一个或多个图层，最后设置地图的视图属性，包括中心点和显示级别。

<html>
<head>
    <meta charset="utf-8">
    <title>加载天地图</title>
    <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" type="text/javascript"></script>
    <style>
        #map {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        const 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] // 可以自动定位到extent范围内
                    })
                ]),
            }),
            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>

在上述代码中，地图的中心点和显示级别已经通过ol.View对象设置好了。center属性定义了地图的初始中心点，而zoom属性定义了地图的初始显示级别。您可以根据需要调整这些值来改变地图的初始显示状态。

例如，如果您想将地图的中心点设置为北京市中心，可以将center属性改为北京市中心的经纬度，如center: [116.4074, 39.9042]。同样，如果您想将地图的初始显示级别设置为更高或更低，可以调整zoom属性的值，数值越大，显示的细节越多，反之则显示的范围越广。

请确保在使用天地图时，替换tk参数为您自己的密钥，因为频繁使用他人的密钥可能会导致IP被封禁。同时，根据您的具体需求，您可能需要调整图层的其他属性，如wrapX（禁止平铺）是否启用等。

许携

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGIS 之 ol如何加载天地图及设置相关参数

要在OpenLayers中加载天地图，需要创建一个地图实例，并为其指定一个容器ID，然后添加一个或多个图层，最后设置地图的视图属性，包括中心点和显示级别。同样，如果您想将地图的初始显示级别设置为更高或更低，可以调整zoom属性的值，数值越大，显示的细节越多，反之则显示的范围越广。参数为您自己的密钥，因为频繁使用他人的密钥可能会导致IP被封禁。同时，根据您的具体需求，您可能需要调整图层的其他属性，如。属性定义了地图的初始显示级别。例如，如果您想将地图的中心点设置为北京市中心，可以将。wrapX（禁止平铺。
复制链接

扫一扫