devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

最新openlayers6加载百度影像图及解决空白瓦片办法_openlayers 首次加载不显示瓦片

作者：不正经 | 2024-02-27 20:19:15

赞

踩

openlayers 首次加载不显示瓦片

最近系统升级了openlayers的版本，发现百度影像图竟然无法使用了。

升级后的tileUrlFunction的y值注意要加-号并减1，url也用了百度影像图最新的调用地址。

  1. let baiduLayer = createBaiduLayer({
  2.       type: 'base',
  3.       visible: true,
  4.       tileUrlFunction: function (tileCoord) {
  5.         let x = tileCoord[1];
  6.         let y = -tileCoord[2] - 1;// 注意此处，加-号并减1
  7.         let z = tileCoord[0];
  8.         let s = Math.floor(Math.random() * 4); // 随机整数0-4, 0-9不好用了
  9.         return "http://maponline" + s + ".bdimg.com/starpic/?qt=satepc&u=x=" + x + ";y=" + y + ";z=" + z + ";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20211110";
  10.       }
  11.     })

然后是部分贴图在请求时可能会存在失败，失败后导致瓦片图可能会有部分空白，使用了onloaderror解决了这一问题。

  1.     // 加载错误时更换随机数，可以解决有空白瓦片的问题
  2.     source.on('tileloaderror',function (e,i){
  3.       let src = e.tile.src_;
  4.       console.log(src);
  5.       let sr = src.match(/maponline\d/)[0];
  6.       let randomNumber = 1;
  7.       if(sr == 'maponline1'){
  8.         randomNumber = 2
  9.       }else if(sr == 'maponline2'){
  10.         randomNumber = 1
  11.       }else{
  12.         randomNumber = 1
  13.       }
  14.       let newSrc = src.replace(/maponline\d/,'maponline'+randomNumber);
  15.       e.tile.load(newSrc);
  16.     })

百度的影像图直接加载可能会存在很大偏移，按照如下方法可以做到基本贴合。

  1. var forEachPoint = function (func) {
  2.     return function (input, opt_output, opt_dimension) {
  3.         var len = input.length;
  4.         var dimension = opt_dimension ? opt_dimension : 2;
  5.         var output;
  6.         if (opt_output) {
  7.             output = opt_output;
  8.         } else {
  9.             if (dimension !== 2) {
  10.                 output = input.slice();
  11.             } else {
  12.                 output = new Array(len);
  13.             }
  14.         }
  15.         for (var offset = 0; offset < len; offset += dimension) {
  16.             func(input, output, offset)
  17.         }
  18.         return output;
  19.     };
  20. };
  21.  
  22. var sphericalMercator = {};
  23. var RADIUS = 6378137;
  24. var MAX_LATITUDE = 85.0511287798;
  25. var RAD_PER_DEG = Math.PI / 180;
  26.  
  27. sphericalMercator.forward = forEachPoint(function (input, output, offset) {
  28.     var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
  29.     var sin = Math.sin(lat * RAD_PER_DEG);
  30.  
  31.     output[offset] = RADIUS * input[offset] * RAD_PER_DEG;
  32.     output[offset + 1] = RADIUS * Math.log((1 + sin) / (1 - sin)) / 2;
  33. });
  34.  
  35. sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
  36.     output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
  37.     output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - (Math.PI / 2)) / RAD_PER_DEG;
  38. });
  39.  
  40. var baiduMercator = {};
  41. var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0];
  42. var LLBAND = [75, 60, 45, 30, 15, 0];
  43. var MC2LL = [
  44.     [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843,
  45.         -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],
  46.     [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826,
  47.         -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86],
  48.     [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745,
  49.         13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37],
  50.     [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492,
  51.         0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06],
  52.     [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242,
  53.         -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4],
  54.     [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037,
  55.         -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]];
  56. var LL2MC = [
  57.     [-0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880,
  58.         -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5],
  59.     [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559,
  60.         12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5],
  61.     [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253,
  62.         97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5],
  63.     [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287,
  64.         1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5],
  65.     [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118,
  66.         9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5],
  67.     [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292,
  68.         1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]];
  69.  
  70. function getRange(v, min, max) {
  71.     v = Math.max(v, min);
  72.     v = Math.min(v, max);
  73.     return v;
  74. }
  75.  
  76. function getLoop(v, min, max) {
  77.     var d = max - min;
  78.     while (v > max) {
  79.         v -= d;
  80.     }
  81.     while (v < min) {
  82.         v += d;
  83.     }
  84.     return v;
  85. }
  86.  
  87. function convertor(input, output, offset, table) {
  88.     var px = input[offset];
  89.     var py = input[offset + 1];
  90.     var x = table[0] + table[1] * Math.abs(px);
  91.     var d = Math.abs(py) / table[9];
  92.     var y = table[2]
  93.         + table[3] * d
  94.         + table[4] * d * d
  95.         + table[5] * d * d * d
  96.         + table[6] * d * d * d * d
  97.         + table[7] * d * d * d * d * d
  98.         + table[8] * d * d * d * d * d * d;
  99.     output[offset] = x * (px < 0 ? -1 : 1);
  100.     output[offset + 1] = y * (py < 0 ? -1 : 1);
  101. }
  102.  
  103. baiduMercator.forward = forEachPoint(function (input, output, offset) {
  104.     var lng = getLoop(input[offset], -180, 180);
  105.     var lat = getRange(input[offset + 1], -74, 74);
  106.     var table = null;
  107.     var j;
  108.     for (j = 0; j < LLBAND.length; ++j) {
  109.         if (lat >= LLBAND[j]) {
  110.             table = LL2MC[j];
  111.             break;
  112.         }
  113.     }
  114.     if (table === null) {
  115.         for (j = LLBAND.length - 1; j >= 0; --j) {
  116.             if (lat <= -LLBAND[j]) {
  117.                 table = LL2MC[j];
  118.                 break;
  119.             }
  120.         }
  121.     }
  122.     output[offset] = lng;
  123.     output[offset + 1] = lat;
  124.     convertor(output, output, offset, table);
  125. });
  126.  
  127. baiduMercator.inverse = forEachPoint(function (input, output, offset) {
  128.     var y_abs = Math.abs(input[offset + 1]);
  129.     var table = null;
  130.     for (var j = 0; j < MCBAND.length; j++) {
  131.         if (y_abs >= MCBAND[j]) {
  132.             table = MC2LL[j];
  133.             break;
  134.         }
  135.     }
  136.     convertor(input, output, offset, table);
  137. });
  138.  
  139. var gcj02 = {}
  140. var PI = Math.PI;
  141. var AXIS = 6378245.0;
  142. var OFFSET = 0.00669342162296594323;  // (a^2 - b^2) / a^2
  143. function delta(wgLon, wgLat) {
  144.     var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
  145.     var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
  146.     var radLat = wgLat / 180.0 * PI;
  147.     var magic = Math.sin(radLat);
  148.     magic = 1 - OFFSET * magic * magic;
  149.     var sqrtMagic = Math.sqrt(magic);
  150.     dLat = (dLat * 180.0) / ((AXIS * (1 - OFFSET)) / (magic * sqrtMagic) * PI);
  151.     dLon = (dLon * 180.0) / (AXIS / sqrtMagic * Math.cos(radLat) * PI);
  152.     return [dLon, dLat];
  153. }
  154.  
  155. function outOfChina(lon, lat) {
  156.     if (lon < 72.004 || lon > 137.8347) {
  157.         return true;
  158.     }
  159.     if (lat < 0.8293 || lat > 55.8271) {
  160.         return true;
  161.     }
  162.     return false;
  163. }
  164.  
  165. function transformLat(x, y) {
  166.     var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  167.     ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
  168.     ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
  169.     ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
  170.     return ret;
  171. }
  172.  
  173. function transformLon(x, y) {
  174.     var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  175.     ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
  176.     ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
  177.     ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
  178.     return ret;
  179. }
  180.  
  181. gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
  182.     var lng = input[offset];
  183.     var lat = input[offset + 1];
  184.     if (!outOfChina(lng, lat)) {
  185.         var deltaD = delta(lng, lat);
  186.         lng = lng - deltaD[0];
  187.         lat = lat - deltaD[1];
  188.     }
  189.     output[offset] = lng;
  190.     output[offset + 1] = lat;
  191. });
  192.  
  193. gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
  194.     var lng = input[offset];
  195.     var lat = input[offset + 1];
  196.     if (!outOfChina(lng, lat)) {
  197.         var deltaD = delta(lng, lat);
  198.         lng = lng + deltaD[0];
  199.         lat = lat + deltaD[1];
  200.     }
  201.     output[offset] = lng;
  202.     output[offset + 1] = lat;
  203. });
  204.  
  205. var bd09 = {}
  206. var PI = Math.PI;
  207. var X_PI = PI * 3000 / 180;
  208.  
  209. function toGCJ02(input, output, offset) {
  210.     var x = input[offset] - 0.0065;
  211.     var y = input[offset + 1] - 0.006;
  212.     var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
  213.     var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
  214.     output[offset] = z * Math.cos(theta);
  215.     output[offset + 1] = z * Math.sin(theta);
  216.     return output;
  217. }
  218.  
  219. function fromGCJ02(input, output, offset) {
  220.     var x = input[offset];
  221.     var y = input[offset + 1];
  222.     var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
  223.     var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
  224.     output[offset] = z * Math.cos(theta) + 0.0065;
  225.     output[offset + 1] = z * Math.sin(theta) + 0.006;
  226.     return output;
  227. }
  228.  
  229. bd09.toWGS84 = function (input, opt_output, opt_dimension) {
  230.     var output = forEachPoint(toGCJ02)(input, opt_output, opt_dimension);
  231.     return gcj02.toWGS84(output, output, opt_dimension);
  232. };
  233.  
  234. bd09.fromWGS84 = function (input, opt_output, opt_dimension) {
  235.     var output = gcj02.fromWGS84(input, opt_output, opt_dimension);
  236.     return forEachPoint(fromGCJ02)(output, output, opt_dimension);
  237. };
  238.  
  239.  
  240. var projzh = {}
  241. projzh.smerc2bmerc = function (input, opt_output, opt_dimension) {
  242.     var output = sphericalMercator.inverse(input, opt_output, opt_dimension);
  243.     output = bd09.fromWGS84(output, output, opt_dimension);
  244.     return baiduMercator.forward(output, output, opt_dimension);
  245. };
  246.  
  247. projzh.bmerc2smerc = function (input, opt_output, opt_dimension) {
  248.     var output = baiduMercator.inverse(input, opt_output, opt_dimension);
  249.     output = bd09.toWGS84(output, output, opt_dimension);
  250.     return sphericalMercator.forward(output, output, opt_dimension);
  251. };
  252.  
  253. projzh.bmerc2ll = function (input, opt_output, opt_dimension) {
  254.     var output = baiduMercator.inverse(input, opt_output, opt_dimension);
  255.     return bd09.toWGS84(output, output, opt_dimension);
  256. };
  257.  
  258. projzh.ll2bmerc = function (input, opt_output, opt_dimension) {
  259.     var output = bd09.fromWGS84(input, opt_output, opt_dimension);
  260.     return baiduMercator.forward(output, output, opt_dimension);
  261. };
  262.  
  263. projzh.ll2smerc = sphericalMercator.forward;
  264. projzh.smerc2ll = sphericalMercator.inverse;
  265.  
  266. export {projzh};

用create-react-app写了个demo，测试通过 

  1. import './App.css';
  2. import React, {useEffect} from 'react';
  3. import 'ol/ol.css';
  4. import Map from 'ol/Map';
  5. import View from 'ol/View';
  6. import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
  7. import XYZ from 'ol/source/XYZ';
  8. import {Vector as VectorSource } from 'ol/source.js';
  9. import {applyTransform} from 'ol/extent';
  10. import Projection from 'ol/proj/Projection';
  11. import {projzh as baiduProjzh} from './baidu';
  12. import {addProjection,addCoordinateTransforms,} from 'ol/proj';
  13. import TileGrid from 'ol/tilegrid/TileGrid';
  14. import GeoJSON from 'ol/format/GeoJSON.js';
  15. import { bbox } from 'ol/loadingstrategy.js';
  16.  
  17. function App() {
  18.   useEffect(() => {
  19.     console.log('componentDidMount')
  20.     const map = new Map({
  21.       target: 'map',
  22.       view: new View({
  23.         center: [113.4997938,22.7741086],
  24.         projection: 'EPSG:4326',
  25.         zoom: 15
  26.       }),
  27.     });
  28.  
  29.     initBaiduLayer()
  30.  
  31.     let baiduLayer = createBaiduLayer({
  32.       type: 'base',
  33.       visible: true,
  34.       tileUrlFunction: function (tileCoord) {
  35.         let x = tileCoord[1];
  36.         let y = -tileCoord[2] - 1;// 注意此处，加-号并减1
  37.         let z = tileCoord[0];
  38.         let s = Math.floor(Math.random() * 4); // 随机整数0-4, 0-9不好用了
  39.         return "http://maponline" + s + ".bdimg.com/starpic/?qt=satepc&u=x=" + x + ";y=" + y + ";z=" + z + ";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20211110";
  40.       }
  41.     })
  42.  
  43.     map.addLayer(baiduLayer)
  44.  
  45.     let vectorLayer = new VectorLayer({
  46.       source: new VectorSource({
  47.         format: new GeoJSON(),
  48.         url: function (extent) {
  49.           return 'http://192.168.200.130:28081/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typename=cite:GIST3_topo_shring_road_nav&outputFormat=application/json&srsname=EPSG:4326';
  50.         },
  51.         wrapX: false,
  52.         strategy: bbox
  53.       })
  54.     })
  55.     map.addLayer(vectorLayer)
  56.   }, [])
  57.  
  58.   const initBaiduLayer = () =>{
  59.     let extent = [72.004, 0.8293, 137.8347, 55.8271];
  60.     let baiduMercatorProj = new Projection({
  61.       code: 'baidu',
  62.       extent: applyTransform(extent, baiduProjzh.ll2bmerc),
  63.       units: 'm'
  64.     });
  65.     addProjection(baiduMercatorProj);
  66.     addCoordinateTransforms('EPSG:4326', baiduMercatorProj, baiduProjzh.ll2bmerc, baiduProjzh.bmerc2ll);
  67.     addCoordinateTransforms('EPSG:3857', baiduMercatorProj, baiduProjzh.smerc2bmerc, baiduProjzh.bmerc2smerc);
  68.   }
  69.  
  70.   const createBaiduLayer = (object) => {
  71.     let extent = [72.004, 0.8293, 137.8347, 55.8271];
  72.     let bmercResolutions = new Array(19);
  73.     for (let i = 0; i < 20; ++i) {
  74.       bmercResolutions[i] = Math.pow(2, 18 - i);
  75.     }
  76.     let source = new XYZ({
  77.       projection: 'baidu',
  78.       maxZoom: 18,
  79.       tileUrlFunction: object.tileUrlFunction,
  80.       tileGrid: new TileGrid({
  81.         resolutions: bmercResolutions,
  82.         origin: [0, 0],
  83.         extent: applyTransform(extent, baiduProjzh.ll2bmerc),
  84.         tileSize: [256, 256]
  85.       })
  86.     })
  87.     // 加载错误时更换随机数
  88.     source.on('tileloaderror',function (e,i){
  89.       let src = e.tile.src_;
  90.       console.log(src);
  91.       let sr = src.match(/maponline\d/)[0];
  92.       let randomNumber = 1;
  93.       if(sr == 'maponline1'){
  94.         randomNumber = 2
  95.       }else if(sr == 'maponline2'){
  96.         randomNumber = 1
  97.       }else{
  98.         randomNumber = 1
  99.       }
  100.       let newSrc = src.replace(/maponline\d/,'maponline'+randomNumber);
  101.       e.tile.load(newSrc);
  102.     })
  103.     let baidu_layer = new TileLayer({
  104.       source,
  105.       title: object.title ? object.title : '未命名图层',
  106.       type: object.type ? object.type : 'base',
  107.       visible: object.visible ? object.visible : false
  108.     });
  109.     return baidu_layer;
  110.   }
  111.  
  112.  
  113.   return (
  114.     <div className="App">
  115.       <div id="map" style={{height:800}}></div>
  116.     </div>
  117.   );
  118. }
  119.  
  120. export default App;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/155726
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号