zoukankan      html  css  js  c++  java
  • 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;
                 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>
    
  • 相关阅读:
    EL表达式具体解释
    Android 实战美女拼图游戏 你能坚持到第几关
    redis sentinel安装及配置(单机版)
    ElasticSearch scroll查询 api
    springboot自动配置原理
    kafka实践
    Springboot mybatis
    计算机原理
    快速排序算法
    maven常见报错问题
  • 原文地址:https://www.cnblogs.com/ssjylsg/p/15117593.html
Copyright © 2011-2022 走看看