最新openlayers6加载百度影像图及解决空白瓦片办法

最新推荐文章于 2024-07-28 10:40:51 发布
最新推荐文章于 2024-07-28 10:40:51 发布
阅读量2.4k 收藏 5
点赞数 1
分类专栏： WebGIS 文章标签： 前端 javascript reactjs vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39525480/article/details/121358133
版权

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

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

let baiduLayer = createBaiduLayer({
      type: 'base',
      visible: true,
      tileUrlFunction: function (tileCoord) {
        let x = tileCoord[1];
        let y = -tileCoord[2] - 1;// 注意此处，加-号并减1
        let z = tileCoord[0];
        let s = Math.floor(Math.random() * 4); // 随机整数0-4, 0-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";
      }
    })

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

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

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

var forEachPoint = function (func) {
    return function (input, opt_output, opt_dimension) {
        var len = input.length;
        var dimension = opt_dimension ? opt_dimension : 2;
        var output;
        if (opt_output) {
            output = opt_output;
        } else {
            if (dimension !== 2) {
                output = input.slice();
            } else {
                output = new Array(len);
            }
        }
        for (var offset = 0; offset < len; offset += dimension) {
            func(input, output, offset)
        }
        return output;
    };
};

var sphericalMercator = {};
var RADIUS = 6378137;
var MAX_LATITUDE = 85.0511287798;
var RAD_PER_DEG = Math.PI / 180;

sphericalMercator.forward = forEachPoint(function (input, output, offset) {
    var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
    var sin = Math.sin(lat * RAD_PER_DEG);

    output[offset] = RADIUS * input[offset] * RAD_PER_DEG;
    output[offset + 1] = RADIUS * Math.log((1 + sin) / (1 - sin)) / 2;
});

sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
    output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
    output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - (Math.PI / 2)) / RAD_PER_DEG;
});

var baiduMercator = {};
var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0];
var LLBAND = [75, 60, 45, 30, 15, 0];
var MC2LL = [
    [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843,
        -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],
    [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826,
        -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86],
    [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745,
        13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37],
    [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492,
        0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06],
    [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242,
        -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4],
    [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037,
        -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]];
var LL2MC = [
    [-0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880,
        -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5],
    [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559,
        12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5],
    [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253,
        97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5],
    [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287,
        1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5],
    [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118,
        9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5],
    [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292,
        1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]];

function getRange(v, min, max) {
    v = Math.max(v, min);
    v = Math.min(v, max);
    return v;
}

function getLoop(v, min, max) {
    var d = max - min;
    while (v > max) {
        v -= d;
    }
    while (v < min) {
        v += d;
    }
    return v;
}

function convertor(input, output, offset, table) {
    var px = input[offset];
    var py = input[offset + 1];
    var x = table[0] + table[1] * Math.abs(px);
    var d = Math.abs(py) / table[9];
    var y = table[2]
        + table[3] * d
        + table[4] * d * d
        + table[5] * d * d * d
        + table[6] * d * d * d * d
        + table[7] * d * d * d * d * d
        + table[8] * d * d * d * d * d * d;
    output[offset] = x * (px < 0 ? -1 : 1);
    output[offset + 1] = y * (py < 0 ? -1 : 1);
}

baiduMercator.forward = forEachPoint(function (input, output, offset) {
    var lng = getLoop(input[offset], -180, 180);
    var lat = getRange(input[offset + 1], -74, 74);
    var table = null;
    var j;
    for (j = 0; j < LLBAND.length; ++j) {
        if (lat >= LLBAND[j]) {
            table = LL2MC[j];
            break;
        }
    }
    if (table === null) {
        for (j = LLBAND.length - 1; j >= 0; --j) {
            if (lat <= -LLBAND[j]) {
                table = LL2MC[j];
                break;
            }
        }
    }
    output[offset] = lng;
    output[offset + 1] = lat;
    convertor(output, output, offset, table);
});

baiduMercator.inverse = forEachPoint(function (input, output, offset) {
    var y_abs = Math.abs(input[offset + 1]);
    var table = null;
    for (var j = 0; j < MCBAND.length; j++) {
        if (y_abs >= MCBAND[j]) {
            table = MC2LL[j];
            break;
        }
    }
    convertor(input, output, offset, table);
});

var gcj02 = {}
var PI = Math.PI;
var AXIS = 6378245.0;
var OFFSET = 0.00669342162296594323;  // (a^2 - b^2) / a^2
function delta(wgLon, wgLat) {
    var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
    var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
    var radLat = wgLat / 180.0 * PI;
    var magic = Math.sin(radLat);
    magic = 1 - OFFSET * magic * magic;
    var sqrtMagic = Math.sqrt(magic);
    dLat = (dLat * 180.0) / ((AXIS * (1 - OFFSET)) / (magic * sqrtMagic) * PI);
    dLon = (dLon * 180.0) / (AXIS / sqrtMagic * Math.cos(radLat) * PI);
    return [dLon, dLat];
}

function outOfChina(lon, lat) {
    if (lon < 72.004 || lon > 137.8347) {
        return true;
    }
    if (lat < 0.8293 || lat > 55.8271) {
        return true;
    }
    return false;
}

function transformLat(x, y) {
    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));
    ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
    return ret;
}

function transformLon(x, y) {
    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
    return ret;
}

gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
    var lng = input[offset];
    var lat = input[offset + 1];
    if (!outOfChina(lng, lat)) {
        var deltaD = delta(lng, lat);
        lng = lng - deltaD[0];
        lat = lat - deltaD[1];
    }
    output[offset] = lng;
    output[offset + 1] = lat;
});

gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
    var lng = input[offset];
    var lat = input[offset + 1];
    if (!outOfChina(lng, lat)) {
        var deltaD = delta(lng, lat);
        lng = lng + deltaD[0];
        lat = lat + deltaD[1];
    }
    output[offset] = lng;
    output[offset + 1] = lat;
});

var bd09 = {}
var PI = Math.PI;
var X_PI = PI * 3000 / 180;

function toGCJ02(input, output, offset) {
    var x = input[offset] - 0.0065;
    var y = input[offset + 1] - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    output[offset] = z * Math.cos(theta);
    output[offset + 1] = z * Math.sin(theta);
    return output;
}

function fromGCJ02(input, output, offset) {
    var x = input[offset];
    var y = input[offset + 1];
    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
    output[offset] = z * Math.cos(theta) + 0.0065;
    output[offset + 1] = z * Math.sin(theta) + 0.006;
    return output;
}

bd09.toWGS84 = function (input, opt_output, opt_dimension) {
    var output = forEachPoint(toGCJ02)(input, opt_output, opt_dimension);
    return gcj02.toWGS84(output, output, opt_dimension);
};

bd09.fromWGS84 = function (input, opt_output, opt_dimension) {
    var output = gcj02.fromWGS84(input, opt_output, opt_dimension);
    return forEachPoint(fromGCJ02)(output, output, opt_dimension);
};


var projzh = {}
projzh.smerc2bmerc = function (input, opt_output, opt_dimension) {
    var output = sphericalMercator.inverse(input, opt_output, opt_dimension);
    output = bd09.fromWGS84(output, output, opt_dimension);
    return baiduMercator.forward(output, output, opt_dimension);
};

projzh.bmerc2smerc = function (input, opt_output, opt_dimension) {
    var output = baiduMercator.inverse(input, opt_output, opt_dimension);
    output = bd09.toWGS84(output, output, opt_dimension);
    return sphericalMercator.forward(output, output, opt_dimension);
};

projzh.bmerc2ll = function (input, opt_output, opt_dimension) {
    var output = baiduMercator.inverse(input, opt_output, opt_dimension);
    return bd09.toWGS84(output, output, opt_dimension);
};

projzh.ll2bmerc = function (input, opt_output, opt_dimension) {
    var output = bd09.fromWGS84(input, opt_output, opt_dimension);
    return baiduMercator.forward(output, output, opt_dimension);
};

projzh.ll2smerc = sphericalMercator.forward;
projzh.smerc2ll = sphericalMercator.inverse;

export {projzh};

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

import './App.css';
import React, {useEffect} from 'react';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import XYZ from 'ol/source/XYZ';
import {Vector as VectorSource } from 'ol/source.js';
import {applyTransform} from 'ol/extent';
import Projection from 'ol/proj/Projection';
import {projzh as baiduProjzh} from './baidu';
import {addProjection,addCoordinateTransforms,} from 'ol/proj';
import TileGrid from 'ol/tilegrid/TileGrid';
import GeoJSON from 'ol/format/GeoJSON.js';
import { bbox } from 'ol/loadingstrategy.js';

function App() {
  useEffect(() => {
    console.log('componentDidMount')
    const map = new Map({
      target: 'map',
      view: new View({
        center: [113.4997938,22.7741086],
        projection: 'EPSG:4326',
        zoom: 15
      }),
    });

    initBaiduLayer()

    let baiduLayer = createBaiduLayer({
      type: 'base',
      visible: true,
      tileUrlFunction: function (tileCoord) {
        let x = tileCoord[1];
        let y = -tileCoord[2] - 1;// 注意此处，加-号并减1
        let z = tileCoord[0];
        let s = Math.floor(Math.random() * 4); // 随机整数0-4, 0-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";
      }
    })

    map.addLayer(baiduLayer)

    let vectorLayer = new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: function (extent) {
          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';
        },
        wrapX: false,
        strategy: bbox
      })
    })
    map.addLayer(vectorLayer)
  }, [])

  const initBaiduLayer = () =>{
    let extent = [72.004, 0.8293, 137.8347, 55.8271];
    let baiduMercatorProj = new Projection({
      code: 'baidu',
      extent: applyTransform(extent, baiduProjzh.ll2bmerc),
      units: 'm'
    });
    addProjection(baiduMercatorProj);
    addCoordinateTransforms('EPSG:4326', baiduMercatorProj, baiduProjzh.ll2bmerc, baiduProjzh.bmerc2ll);
    addCoordinateTransforms('EPSG:3857', baiduMercatorProj, baiduProjzh.smerc2bmerc, baiduProjzh.bmerc2smerc);
  }

  const createBaiduLayer = (object) => {
    let extent = [72.004, 0.8293, 137.8347, 55.8271];
    let bmercResolutions = new Array(19);
    for (let i = 0; i < 20; ++i) {
      bmercResolutions[i] = Math.pow(2, 18 - i);
    }
    let source = new XYZ({
      projection: 'baidu',
      maxZoom: 18,
      tileUrlFunction: object.tileUrlFunction,
      tileGrid: new TileGrid({
        resolutions: bmercResolutions,
        origin: [0, 0],
        extent: applyTransform(extent, baiduProjzh.ll2bmerc),
        tileSize: [256, 256]
      })
    })
    // 加载错误时更换随机数
    source.on('tileloaderror',function (e,i){
      let src = e.tile.src_;
      console.log(src);
      let sr = src.match(/maponline\d/)[0];
      let randomNumber = 1;
      if(sr == 'maponline1'){
        randomNumber = 2
      }else if(sr == 'maponline2'){
        randomNumber = 1
      }else{
        randomNumber = 1
      }
      let newSrc = src.replace(/maponline\d/,'maponline'+randomNumber);
      e.tile.load(newSrc);
    })
    let baidu_layer = new TileLayer({
      source,
      title: object.title ? object.title : '未命名图层',
      type: object.type ? object.type : 'base',
      visible: object.visible ? object.visible : false
    });
    return baidu_layer;
  }


  return (
    <div className="App">
      <div id="map" style={{height:800}}></div>
    </div>
  );
}

export default App;

qq_39525480
关注
专栏目录
OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 2041
OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openlayers：实现加载百度地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 1003
openlayers：实现加载百度地图（附完整源码）
OpenLayers之加载多源数据四：万能瓦片地图加载秘籍
不睡觉的怪叔叔的博客
08-02 1万+
目录 加载简单的瓦片地图 瓦片地图之高德地图 瓦片地图之百度地图 重新定义OpenLayers3的瓦片坐标系 分析瓦片地图坐标系 解密瓦片url 加载微软Bing中文地图 Google地图加载 其实加载瓦片地图基本是大同小异，你可能会觉得很惊讶，因为网上在线的地图服务，看起来都不一样，本节即将为你解开这层神秘的面纱。此处用一张图来直观地认识一下瓦片结构： 从...
OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)
liu2004051957的博客
11-18 1万+
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
A005：Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
最新发布
jiadsadfasfs的博客
07-28 1718
penlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
openlayers 加载百度、高德、google瓦片地图
zyh_1988的博客
10-09 4307
1、加载高德地图 //高德地图 var AMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' }) }
OpenLayers 3 之 加载百度地图
热门推荐
研究与专注
10-26 3万+
很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。
VUE3使用OpenLayer无偏差加载百度地图
weixin_45729439的博客
12-20 925
使用OpenLayer无偏差加载百度地图（vue）
使用OpenLayer加载百度地图（无偏移）
weixin_41769441的博客
06-17 5675
本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美无偏移加载百度离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip。 使用OpenLayer加载百度地图离线瓦片地图 任意新建空目录命名为geTileMap；解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTil...
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-09 3267
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
197: vue+openlayers 预加载preload瓦片地图，减少过渡期间的空白区域
大剑师兰特的GIS世界
01-10 958
第197个本示例的目的是介绍演示如何在vue+openlayers项目中演示瓦片预加载和没有预加载的不同状态。当我们平移和缩放地图时，经常会遇到过渡期间的空白区域(因为内容正在加载)，过一会儿，切片图像才出现了。，将预载的值设置为当前可见层的较低分辨率水平的数量。采用了Infinity，这样所有较低的分辨率级别都会被考虑在内。也可以采用Infinity，这样所有较低的分辨率级别都会被考虑在内。
openlayers3上加载瓦片图片
08-29
openlayers3上加载瓦片图片,可离线运行
openlayers 调用百度地图
08-19
openlayers 调用百度地图
openlayers5加载百度地图.zip
06-18
此代码采用了最新的openlayers5，引用了在线的百度地图，可供学习者使用参考，欢迎改进开发。
离线BD瓦片地图加载.zip
04-01
4. **平滑缩放和拖动**：在用户缩放或移动地图时，需要预加载相邻级别的瓦片，确保平滑过渡，防止出现空白或延迟。 5. **地图叠加层**：除了基础地图瓦片，还可以叠加其他信息，如交通状况、天气预报等，增强地图的...
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 845
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
《MySQL实战指南》02-01：下载MySQL
西安极客联盟
12-16 390
MySQL官网下载安装包。
解决OpenLayers加载鹰眼图时出现的闪烁空白问题
xiao猪仙的博客
01-21 1513
解决OpenLayers加载鹰眼地图时出现的闪烁问题问题描述分析原因解决方案 问题描述 上次使用OpenLayers加载了天地图，但是在加载OverviewMap时，会出现视图闪烁，要么鹰眼图空白，要么主视图空白等问题。 分析原因 刚一开始不知道是什么原因，后来猛然发现鹰眼图和主视图的Layers使用的是同一图层数据源，为了判断是不是使用相同图层造成的，在OverviewMap的Layers上重新new了两个图层，居然解决了这个问题。 解决方案 避免鹰眼图和主视图使用相同图层(Layers)，但是其图层使用
openlayers可以加载百度地图吗
06-03
OpenLayers本身不支持直接加载百度地图，因为百度地图的API使用了一些特殊的加密方式，无法直接在OpenLayers中实现。不过，您可以通过使用第三方插件或者自己编写代码的方式，在OpenLayers中加载百度地图。以下是两种常用的加载百度地图的方法： 1. 使用第三方插件 有一些第三方插件可以让OpenLayers支持加载百度地图，例如ol-ext（https://viglino.github.io/ol-ext/），这个插件可以让OpenLayers支持加载百度地图、高德地图等。 2. 自己编写代码 您也可以自己编写代码来实现在OpenLayers中加载百度地图。具体来说，您可以使用百度地图API获取瓦片图层，并将其添加到OpenLayers的地图上。代码实现可以参考以下示例： ``` // 创建百度地图图层 var baiduLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileUrlFunction: function(tileCoord) { var x = tileCoord[1]; var y = tileCoord[2]; var z = tileCoord[0]; var url = "http://online{0-3}.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&scaler=1"; return url; }, projection: 'EPSG:3857' }) }); // 创建OpenLayers地图对象 var map = new ol.Map({ target: 'map', layers: [baiduLayer], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9087]), zoom: 10 }) }); ``` 需要注意的是，上述示例中的瓦片图层URL地址中的“online{0-3}”是百度地图提供的多个服务器地址，需要根据实际情况选择使用哪个地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值