openlayers3 使用百度离线瓦片地图 将百度经纬度坐标转换为墨卡托坐标(ESPG:3857)

1.创建百度地图的数据源(以下是添加百度图层的部分代码)

在这里插入图片描述

2.百度地图官网坐标拾取系统地址

http://api.map.baidu.com/lbsapi/getpoint/index.html

3.百度经纬度坐标系、墨卡托坐标系、国际坐标系、火星坐标系之间的相互转换

https://blog.csdn.net/doulejian/article/details/70155080

4.根据以上Java版本改造的JS版本(仅包含百度经纬度坐标系、墨卡托坐标系之间的转换)

/**
 *  百度经纬度坐标 、 百度墨卡托坐标(ESPG:3857)
 */
	
 var EARTHRADIUS = 6370996.81;
 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 main(args) {
	//经纬度坐标
	var lng = 116.403891, 
		lat = 39.914552; 
	
    //百度经纬度坐标转百度墨卡托坐标
	var location = convertLL2MC(lng, lat);
    console.info("bd_mc: " + location[1] + "," + location[0]);
    //百度墨卡托坐标转百度经纬度坐标
    location = convertMC2LL(location[1],location[0]);
    console.info("bd: " + location[1] + "," + location[0]);
}

main();
	    
/**
 * 百度墨卡托坐标  转  百度经纬度坐标
 * @param x
 * @param y
 * @return
 */
function convertMC2LL(lng,lat) {
    var cF = null;
    lng = Math.abs(lng);
    lat = Math.abs(lat);

    for (var cE = 0; cE < MCBAND.length; cE++) {
        if (lat >= MCBAND[cE]) {
            cF = MC2LL[cE];
            break;
        }
    }
    return converter(lng, lat, cF);
}

/**
 * 百度经纬度坐标 转  转百度墨卡托坐标
 * @param lng
 * @param lat
 * @return
 */
function convertLL2MC(lng,lat) {
    var cE = null;
    lng = getLoop(lng, -180, 180);
    lat = getRange(lat, -74, 74);
    for (var i = 0; i < LLBAND.length; i++) {
        if (lat >= LLBAND[i]) {
            cE = LL2MC[i];
            break;
        }
    }
    if (cE!=null) {
        for (var i = LLBAND.length - 1; i >= 0; i--) {
            if (lat <= -LLBAND[i]) {
                cE = LL2MC[i];
                break;
            }
        }
    }
    return converter(lng,lat, cE);
}


function converter(lng, lat, cE) {
    var lngTemp = cE[0] + cE[1] * Math.abs(lng);
    var cC = Math.abs(lat) / cE[9];
    var latTemp = cE[2] + cE[3] * cC + cE[4] * cC * cC + cE[5] * cC * cC * cC + cE[6] * cC * cC * cC * cC + cE[7] * cC * cC * cC * cC * cC + cE[8] * cC * cC * cC * cC * cC * cC;
    lngTemp *= (lng < 0 ? -1 : 1);
    latTemp *= (lat < 0 ? -1 : 1);
    return [latTemp,lngTemp];
}

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

function getRange(lat, min, max) {
    if (min != null) {
        lat = Math.max(lat, min);
    }
    if (max != null) {
        lat = Math.min(lat, max);
    }
    return lat;
}
在Vue项目中使用离线瓦片地图服务,特别是使用OpenLayers 6框架与高德地图瓦片资源时,首先需要理解瓦片地图的概念。瓦片地图是一种将地图划分为多个小块图片(瓦片)的方法,这些瓦片可以单独请求和缓存,以提高地图的加载速度和减少服务器负担。 以下是使用OpenLayers 6在Vue项目中嵌入离线瓦片的基本步骤: 1. 准备离线瓦片数据:确保你有高德地图离线瓦片数据。通常这些数据需要预先下载并放置在服务器或本地文件系统中。 2. 配置Vue项目:在Vue项目中安装OpenLayers依赖,并在项目中正确引用OpenLayers。 例如,在`package.json`文件中添加OpenLayers依赖: ```json "dependencies": { "ol": "latest version" } ``` 然后运行`npm install`来安装依赖。 3. 在Vue组件中添加地图初始化代码:在Vue组件的`mounted`钩子中初始化OpenLayers地图,并添加离线瓦片图层。 以下是一个示例代码片段: ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import TileWMS from 'ol/source/TileWMS'; import TileGrid from 'ol/tilegrid/TileGrid'; import XYZ from 'ol/source/XYZ'; export default { name: 'MapComponent', mounted() { const map = new Map({ target: 'map', // 对应到你的HTML模板中地图容器的id layers: [ new TileLayer({ source: new XYZ({ url: 'path_to_yourOfflineTiles/{z}/{x}/{y}.png', // 离线瓦片文件路径 tileGrid: new TileGrid({ resolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.969809570312, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338], // 分辨率数组 extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] // 世界范围 }) }) }) ], view: new View({ center: [0, 0], // 地图中心点坐标 zoom: 2 // 缩放级别 }) }); map.setTarget('map'); } } ``` 4. 在Vue模板中添加地图容器:确保HTML模板中有对应的地图容器元素。 ```html <div id="map" style="width: 100%; height: 100%;"></div> ``` 请注意,上面的代码需要根据实际情况进行调整,特别是瓦片的URL路径、分辨率数组和世界范围等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值