Add Baidu layer #3522
Comments
|
+1 for Baidu integration |
|
I found an article here |
|
Here are transforms for the Baidu Mercator / BD-09 projection: https://github.com/tschaub/projzh This was a port of a Java implementation that was initially licensed with GPL v3. This has been relicensed with the MIT license (see tschaub/projzh#3 (comment)). So I can update the license for the JavaScript implementation. I think it would be appropriate to make a contribution to proj4js. Here is an example of adding a layer with Baidu tiles to an OpenLayers map (using the above var projzh = require('projzh');
var extent = [72.004, 0.8293, 137.8347, 55.8271];
var baiduMercator = new ol.proj.Projection({
code: 'baidu',
extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),
units: 'm'
});
ol.proj.addProjection(baiduMercator);
ol.proj.addCoordinateTransforms('EPSG:4326', baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll);
ol.proj.addCoordinateTransforms('EPSG:3857', baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);
var bmercResolutions = new Array(19);
for (var i = 0; i < 19; ++i) {
bmercResolutions[i] = Math.pow(2, 18 - i);
}
var urls = [0, 1, 2, 3, 4].map(function(sub) {
return 'http://shangetu' + sub +
'.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46&udt=20150601';
});
var baidu = new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'baidu',
maxZoom: 18,
tileUrlFunction: function(tileCoord) {
var x = tileCoord[1];
var y = tileCoord[2];
var z = tileCoord[0];
var hash = (x << z) + y;
var index = hash % urls.length;
index = index < 0 ? index + urls.length : index;
return urls[index].replace('{x}', x).replace('{y}', y).replace('{z}', z);
},
tileGrid: new ol.tilegrid.TileGrid({
resolutions: bmercResolutions,
origin: [0, 0],
extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),
tileSize: [256, 256]
})
})
}); |
|
Just FYI, I've found Baidu Mercator projection is based on Clarke 1866. Here's a sample code I manage to write in proj4js (may be incomplete): proj4.defs('EPSG:4008','+proj=longlat +ellps=clrk66 +no_defs')
proj4.defs('BD-MC','+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs')Now you can use projection: 'BD-MC',and it will be projected to the right point just as EPSG:3857 does. var baidu = new ol.layer.Tile({
title: 'Baidu',
source: new ol.source.XYZ({
projection: 'BD-MC',
maxZoom: 19,
tileUrlFunction: function (tileCoord) {
var URLS_LENGTH = 5
var x = tileCoord[1]
var y = tileCoord[2]
var z = tileCoord[0]
var hash = (x << z) + y
var index = hash % URLS_LENGTH
index = index < 0 ? index + URLS_LENGTH : index
if (x < 0) {
x = 'M' + (-x)
}
if (y < 0) {
y = 'M' + (-y)
}
return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
.replace('{}', index).replace('{x}', x).replace('{y}', y).replace('{z}', z)
},
tileGrid: new ol.tilegrid.TileGrid({
extent: ol.proj.transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-MC'),
origin: [0, 0],
minZoom: 3,
// note that resolution could be 0.5
resolutions: [
262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048,
1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5,
],
}),
})
})Hope it can be useful for someone googling to here. |
|
为什么用Openlayers加载百度地图，显示起来会比较模糊，好像被缩小了。。。坐标是对的 |
|
@EV71 是的，克拉克1866确实比常用的3857椭球体大 |
|
@yangfl 有什么办法令其不模糊呢？我看过一些leaflets加载百度地图的例子，显示完全正常，坐标也对。也用过另外一个叫maptalk的，显示也正常，为什么偏偏Openlayers不正常？ |
|
@EV71 我也只是尝试过openlayers，没有用过其他库，不知道其他是怎么实现的。不过可以肯定的是，Openlayers的缩放比例尺和百度的对不上，Openlayers以度为单位，而百度以米为单位，这之间肯定存在图片伸缩问题。我建议你在方面研究一下。 |
|
@idrinkjava Hi,you can see the example maptalks-baidu,Maybe can help you TileConfigSpec |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
ol6，这些方案就不好使了 |
|
@chenyu51 我在上面代码的基础上改了一部分，虽然整体看上去好像没啥问题，但是地图两端感觉还是缺失了一部分，而且文字也很小很模糊 import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileGrid from "ol/tilegrid/TileGrid";
import { Projection, addProjection, addCoordinateTransforms, transform } from "ol/proj";
import projzh from "projzh";
var bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 12474104.17];
var baiduMercator = new Projection({
code: "baidu",
extent: bd09Extent,
units: "m"
});
addProjection(baiduMercator);
addCoordinateTransforms("EPSG:4326", baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll);
addCoordinateTransforms("EPSG:3857", baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);
var bmercResolutions = new Array(19);
for (var i = 0; i < 19; ++i) {
bmercResolutions[i] = Math.pow(2, 18 - i);
}
var urls = [0, 1, 2, 3].map(function(sub) {
return (
"http://maponline" +
sub +
".bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20191119"
);
});
var baidu = new Tile({
source: new XYZ({
projection: "baidu",
maxZoom: 18,
tileUrlFunction: function(tileCoord) {
var x = tileCoord[1];
var y = -tileCoord[2] - 1;
var z = tileCoord[0];
var hash = (x << z) + y;
var index = hash % urls.length;
index = index < 0 ? index + urls.length : index;
if (x < 0) {
x = "M" + -x;
}
if (y < 0) {
y = "M" + -y;
}
return urls[index] .replace("{x}", x).replace("{y}", y) .replace("{z}", z);
},
tileGrid: new TileGrid({
resolutions: bmercResolutions,
origin: [0, 0]
})
})
});
var map = new Map({
target: "map",
layers: [baidu],
view: new View({
center: transform([121.51, 31.55], "EPSG:4326", "baidu"),
zoom: 1,
projection: "baidu",
extent: bd09Extent
})
}); |
|
这简直是太好了，请分享你的成果。
…------------------ 原始邮件 ------------------
发件人: "Lee"<notifications@github.com>;
发送时间: 2020年4月26日(星期天) 上午10:35
收件人: "openlayers/openlayers"<openlayers@noreply.github.com>;
抄送: "Bill"<4669027@qq.com>; "Mention"<mention@noreply.github.com>;
主题: Re: [openlayers/openlayers] Add Baidu layer (#3522)
@yangfl 有什么办法令其不模糊呢？我看过一些leaflets加载百度地图的例子，显示完全正常，坐标也对。也用过另外一个叫maptalk的，显示也正常，为什么偏偏Openlayers不正常？
@EV71 关于百度瓦片缩小模糊的问题你这边后来又解决吗？怎么解决的能分享下吗？谢谢
最近我正好也遇到这个问题，研究之后解决了。如果感兴趣，我抽空写个博客分享一下。
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
请问使用zoom控件也有这个问题吗？我使用zoom时都会加载对应级别瓦片，但用zoomslider或者mousewheel时怀疑因为比例尺和瓦片级别不对应产生了模糊。 |
|
openlayers 6.x/5.x 解决加载百度地图模糊： |
I want it also，long time pass，your target has resolved ？could you share with me？thx very match！ |
|
@wuli-wangzj @EV71 @yangfl @huanianjwt 另外，各位如何纠偏的？我用了一个常用的转换算法，还是有偏移，用orgin参数做了修正，但是只在一个小范围内有效。 |
|
WGS EPSG:4326 AND EPSG:3857 map Mutual conversion,Switch to each other ？？？ |
@whzc2020 请问GCJ-02的纠偏解决了吗？ |
|
GCJ-02的纠偏。 |
|
@whzc2020 想了解针对加载高德地图（GCJ-02）的瓦片的纠偏。 |
|
@whzc2020 需要背景地图的兼容即 ： gcj02和wgs84完美重叠展示 |
|
@whzc2020 谢谢分享！ |
|
@whzc2020 请问在哪里可以看到你的分享？谢谢！ |
|
@whzc2020 感谢分享，请问gcj02纠偏有案例吗 |
|
I created a codepen for this. https://codepen.io/dbauszus-glx/pen/LYqZaNE Wouldn't have been able to solve this without user Mike on stackoverflow. |
|
I created a "pure" ES6/React version with debug coordinates using information from various contributors: https://codesandbox.io/s/clever-rhodes-c9qdg4 For comparison and checking of alignment issues, there is a related plugin for mapboxgl: http://raw.githack.com/gisarmory/mapboxgl.InternetMapCorrection/main/examples/rasterTileLayer.html#12.44/30.28623/120.29269 Btw, Baidu maps seem to be misaligned for regions outside of China (even with corrections applied), and the transformation code does contain checks for China bounding box. Not sure if this is a "feature" of Baidu projection, or whether the transformation code can be further tweaked. |
可以分享一下如何解决openlayer6加载百度地图模糊的问题吗？ |
大佬可以分享个demo。如何解决openlayer6模糊问题吗 |
and others
For the Greater China region, a Baidu Map layer would be very helpful.
I've created a Wikipedia page about Baidu Maps and their BD-09 coordinate system.
Baidu has an extensive API with large rate limits. The documentation is in Chinese, but installing the Google Translate extension makes it relatively readable.
So far I've found the API for returning tiles. They're branded with Baidu's logo, but hopefully someone else can pick up from here.
Result of http://api.map.baidu.com/staticimage?center=121,31&width=300&height=300&zoom=15:
Random implementations I've found on GitHub:
Part of other projects
The text was updated successfully, but these errors were encountered: