OpenLayers4加载天地图WMTS注意事项

时间：2024-03-15 15:48:46

OpenLayers4加载天地图WMTS注意事项

天地图官网：http://lbs.tianditu.gov.cn/home.html
OpenLayers官网：https://openlayers.org/

使用天地图之前需要申请**，我申请的是个人的浏览器端**。
OpenLayers4加载天地图WMTS注意事项
OpenLayers4加载天地图WMTS注意事项
申请的浏览器端**和服务器端**是有区别的，需要根据具体项目进行设置。最近做的项目由于一开始使用的是服务器端**，导致地图地图和标注服务无法完全加载，更换为浏览器端**后就解决了该问题。

本人使用的是WMTS服务，地图展示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var projection = ol.proj.get("EPSG:4326");
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = [];
    for (var z = 2; z < 19; ++z) {//计算比例尺
        resolutions[z] = size / Math.pow(2, z);
    }
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({//矢量地图
                source: new ol.source.WMTS({
                    url: "http://t0.tianditu.gov.cn/vec_c/wmts",//链接需要添加自己申请的**
                    layer: "vec",
                    style: "default",
                    matrixSet: "c",
                    format: "tiles",
                    wrapX: true,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        //resolutions: res.slice(0, 15),
                        resolutions: resolutions,
                        matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                    })
                }),
            }),
            new ol.layer.Tile({//矢量标注
                source: new ol.source.WMTS({
                    url: "http://t0.tianditu.gov.cn/cva_c/wmts",//链接需要添加自己申请的**
                    layer: "cva",
                    style: "default",
                    matrixSet: "c",
                    format: "tiles",
                    wrapX: true,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                    })
                }),
            })
        ],
        target: "map",
        view: new ol.View({
            center: [118.7971, 31.9332],//中心点
            projection: projection,
            zoom: 11,
            maxZoom: 15,
            minZoom: 1
        })
    });
</script>
</body>
</html>

OpenLayers4加载天地图WMTS注意事项
天地图提供了很多实用地图服务
1.矢量底图：http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的**（经纬度投影）
2.矢量标记：http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的**（经纬度投影）
3.逆地理编码查询：http://api.tianditu.gov.cn/geocoder?postStr={‘lon’:116.37304,‘lat’:39.92594,‘ver’:1}&type=geocode&tk=您的**
4.地理编码查询：http://api.tianditu.gov.cn/geocoder?ds={“keyWord”:“延庆区北京市延庆区延庆镇莲花池村前街50夕阳红养老院”}&tk=您的**
5.行政区划服务：http://api.tianditu.gov.cn/administrative?postStr={“searchWord”:“北京”,“searchType”:“1”,“needSubInfo”:“false”,“needAll”:“false”,“needPolygon”:“true”,“needPre”:“true”}&tk=您的**

友情小礼包
由于使用的是openlayer在线的服务，为了加快浏览速度，忍痛花了5积分下载了5.3.0版本的离线包，有需要的小伙伴可在百度云提取。
百度云链接：https://pan.baidu.com/s/1kSSnKj9oT__SUTUhZQZPvA
提取码：8p8n

相关文章