openlayers加载cesiumlab切片

tx_xtt

于 2024-03-08 14:58:12 发布

阅读量458

点赞数 6

分类专栏： web学习文章标签： openlayers cesiumlab

本文链接：https://blog.csdn.net/qq_43932985/article/details/136560219

版权

web学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

openlayers可以通过xyz的方式加载nginx发布的cesiumlab切片。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <title>地图演示</title>
    <script src="./ol/dist/ol.js"></script>
    <link rel="stylesheet" href="./ol/ol.css">
</head>

<body>
    <div id="cesiumContainer">
    </div>
</body>
<script>
    // 外部服务基础url
    var baseUrl = 'http://localhost:8093';

    // 地球
    var mapUrl = baseUrl + "/Cesium/map.jpg"
    // cesiumlab切片地址
    var mapUrl1 = baseUrl + '/hhht/{z}/{x}/{y}.png';
    // 项目中心位置
    var mapCenter = [111.760654168185325, 40.734378538897155];
    console.log("openlayers---")
    //创建地图
    const map1 = new ol.Map({
        target: 'cesiumContainer',
        layers: [
            // 地球图层
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: mapUrl,
                    imageExtent: [-180, -88, 180, 88]
                })
            })
            ,
            // cesiumlab切片图层 （EPSG:4326）
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    tileUrlFunction: function (coordinate) {
                        console.log("xyz:", coordinate)
                        return 'hhht/' + (coordinate[0] - 1) + '/' +
                            coordinate[1] + '/' + coordinate[2] + '.png';
                    },
                    projection: "EPSG:4326",
                    minZoom: 0,
                    maxZoom: 21,
                }),
                // 图层范围，避免越界
                extent: [111.725463867,
                    40.71707855479431,
                    111.79584446937065,
                    40.751678523]
            }),
        ],
        // 视角设定
        view: new ol.View({
            center: mapCenter,
            zoom: 14,
            projection: 'EPSG:4326'
        }),
    });
</script>

</html>