ol-接入minedata 加密pbf 数据

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
     
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script>
      
    var $ = function(t, e) {        
        return t
    }
     
    var layer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            maxZoom: 17,
            url: 'https://minedata.cn/service/data/mvt-layer?datasource=merge&z={z}&x={x}&y={y}&request=GetTile&key=16be596e00c44c86bb1569cb53424dc9&solu=12877',
            tileLoadFunction: (tile, url) => {
                var coord = tile.getTileCoord();
                let key = [coord[0], coord[1], -(coord[2] + 1)].join();

                tile.setLoader(function () {
                    var format = tile.getFormat();
                    fetch(url,{responseType:'arraybuffer'})
                        //.then(r => r.blob())
                        .then(r => r.arrayBuffer())
                        .then(r => {
                            var data = $(r, { url: url });
                            tile.setProjection(format.readProjection(data));
                            tile.setFeatures(format.readFeatures(data, {
                                featureProjection: map.getView().getProjection()
                            }));
                            tile.setExtent(format.getLastExtent());
                        });
                })
            }
        })
    });
    const map = new ol.Map({
        layers: [
            layer
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([123.0064, 34.7142]),
            maxZoom: 19,
            zoom: 15,
        }),
    });
</script>

</html>
posted on 2021-08-09 11:18 刚子85 阅读(259) 评论(0) 编辑收藏举报