openlayers加载天地图WMTS服务

最新推荐文章于 2025-09-30 13:30:11 发布

原创

最新推荐文章于 2025-09-30 13:30:11 发布 · 5.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#天地图

本文展示了如何使用OpenLayers库加载中国的天地图WMTS服务。通过创建两个Tile层，分别对应中国矢量1-4级和中国矢量注记1-4级，实现了天地图的显示。地图视图设置在中心位置[120.14805, 30.26971]，初始缩放级别为3，最大缩放级别为17。" 79601310,7516684,C语言中的memset函数详解,"['C语言', '内存管理', '函数使用']

<!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