siwei
/
node_util


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers 加载天地图</title>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@latest/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@latest/en/v6.5.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/geotiff/dist/geotiff.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-geoTIFF/dist/ol-geotiff.js"></script>


    <style>
        /* 设置 body 和 html 占满全屏 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 确保 map 元素也占满全屏 */
        #map {
            width: 100%;
            height: 100vh;
            /* 视口高度，确保地图占满整个窗口 */
        }

    </style>
</head>

<body>
    <div id="map" class="map"></div>

    <script>
        var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
        // 矢量底图
        var vecLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });
        // 矢量标注
        var cvaLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });
        // 影像底图
        var imgLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + key
            })
        });
        // 影像标注
        var imgCiaLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + key

            })
        });
        // 地形晕染
        var terLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });
        // 地形标注层
        var ctaLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });


        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                vecLayer,   // 矢量底图
                cvaLayer,    // 矢量标注
                // tiffLayer

                // imgLayer,    // 影像底图
                // imgCiaLayer,    // 影像标注

                // terLayer,    // 地形晕染
                // ctaLayer    // 地形标注
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([106.672956731, 38.207187209]), // 设置中心点为北京
                zoom: 18  // 初始缩放级别
            })
        });


        // var marker = new ol.Feature({
        //     geometry: new ol.geom.Point(ol.proj.fromLonLat([106.672956731, 38.207187209]))
        // });

        // var vectorSource = new ol.source.Vector({
        //     features: [marker]
        // });

        // var markerLayer = new ol.layer.Vector({
        //     source: vectorSource,
        //     style: new ol.style.Style({
        //         image: new ol.style.Circle({
        //             radius: 7,
        //             fill: new ol.style.Fill({ color: 'red' })
        //         })
        //     })
        // });

        // map.addLayer(markerLayer);

         // 加载 GeoTIFF 图层
         var geoTiffLayer = new ol.layer.Image({
            source: new ol.source.GeoTIFF({
                // 替换为你的 GeoTIFF 文件的 URL
                sources: [{
                    url: 'http://192.168.60.4:9201/spotfile/64018120240902/QDOM/6401812024070108270001QDOM.tif',
                    // 处理图像范围，可以不设置，自动推断
                    // imageExtent: ol.proj.transformExtent([106.672956731, 38.207187209, 106.678449895, 38.212680373], 'EPSG:4326', 'EPSG:3857')
                }]
            })
        });

        // 将 GeoTIFF 图层添加到地图
        map.addLayer(geoTiffLayer);
    </script>
</body>

</html>