|
|
|
|
@ -1,4 +1,3 @@
|
|
|
|
|
/* eslint-disable */
|
|
|
|
|
// this L.CRS.Baidu from https://github.com/muyao1987/leaflet-tileLayer-baidugaode/blob/master/src/tileLayer.baidu.js
|
|
|
|
|
|
|
|
|
|
if (L.Proj) {
|
|
|
|
|
@ -7,7 +6,7 @@ if (L.Proj) {
|
|
|
|
|
"+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs",
|
|
|
|
|
{
|
|
|
|
|
resolutions: (function () {
|
|
|
|
|
const level = 24;
|
|
|
|
|
var level = 19;
|
|
|
|
|
var res = [];
|
|
|
|
|
res[0] = Math.pow(2, 18);
|
|
|
|
|
for (var i = 1; i < level; i++) {
|
|
|
|
|
@ -21,98 +20,6 @@ if (L.Proj) {
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
L.tileLayer.baidu = function (option) {
|
|
|
|
|
option = option || {};
|
|
|
|
|
|
|
|
|
|
var layer;
|
|
|
|
|
var subdomains = "0123456789";
|
|
|
|
|
switch (option.layer) {
|
|
|
|
|
//单图层
|
|
|
|
|
case "vec":
|
|
|
|
|
default:
|
|
|
|
|
// http://maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2
|
|
|
|
|
//'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&b=0&limit=60&scaler=1&udt=20170525'
|
|
|
|
|
layer = L.tileLayer(
|
|
|
|
|
"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=" +
|
|
|
|
|
(option.bigfont ? "ph" : "pl") +
|
|
|
|
|
"&scaler=2&p=1",
|
|
|
|
|
{
|
|
|
|
|
name: option.name,
|
|
|
|
|
subdomains: subdomains,
|
|
|
|
|
tms: true,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
case "img_d":
|
|
|
|
|
layer = L.tileLayer(
|
|
|
|
|
"http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46&scaler=2&p=1",
|
|
|
|
|
{
|
|
|
|
|
name: option.name,
|
|
|
|
|
subdomains: subdomains,
|
|
|
|
|
tms: true,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
case "img_z":
|
|
|
|
|
layer = L.tileLayer(
|
|
|
|
|
"http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=" +
|
|
|
|
|
(option.bigfont ? "sh" : "sl") +
|
|
|
|
|
"&v=020&scaler=2&p=1",
|
|
|
|
|
{
|
|
|
|
|
name: option.name,
|
|
|
|
|
subdomains: subdomains,
|
|
|
|
|
tms: true,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case "custom": //Custom 各种自定义样式
|
|
|
|
|
//可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
|
|
|
|
|
option.customid = option.customid || "midnight";
|
|
|
|
|
layer = L.tileLayer(
|
|
|
|
|
"http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=" +
|
|
|
|
|
option.customid,
|
|
|
|
|
{
|
|
|
|
|
name: option.name,
|
|
|
|
|
subdomains: "012",
|
|
|
|
|
tms: true,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case "time": //实时路况
|
|
|
|
|
var time = new Date().getTime();
|
|
|
|
|
layer = L.tileLayer(
|
|
|
|
|
"http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=" +
|
|
|
|
|
time +
|
|
|
|
|
"&label=web2D&v=017",
|
|
|
|
|
{
|
|
|
|
|
name: option.name,
|
|
|
|
|
subdomains: subdomains,
|
|
|
|
|
tms: true,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
//合并
|
|
|
|
|
case "img":
|
|
|
|
|
layer = L.layerGroup([
|
|
|
|
|
L.tileLayer.baidu({
|
|
|
|
|
name: "底图",
|
|
|
|
|
layer: "img_d",
|
|
|
|
|
bigfont: option.bigfont,
|
|
|
|
|
}),
|
|
|
|
|
L.tileLayer.baidu({
|
|
|
|
|
name: "注记",
|
|
|
|
|
layer: "img_z",
|
|
|
|
|
bigfont: option.bigfont,
|
|
|
|
|
}),
|
|
|
|
|
]);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
return layer;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
L.TileLayer.ChinaProvider = L.TileLayer.extend({
|
|
|
|
|
initialize: function (type, options) {
|
|
|
|
|
// (type, Object)
|
|
|
|
|
@ -136,6 +43,91 @@ L.TileLayer.ChinaProvider = L.TileLayer.extend({
|
|
|
|
|
|
|
|
|
|
L.TileLayer.prototype.initialize.call(this, url, options);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getTileUrl: function (coords) {
|
|
|
|
|
var data = {
|
|
|
|
|
s: this._getSubdomain(coords),
|
|
|
|
|
x: coords.x,
|
|
|
|
|
y: coords.y,
|
|
|
|
|
z: this._getZoomForUrl(),
|
|
|
|
|
};
|
|
|
|
|
if (this._map && !this._map.options.crs.infinite) {
|
|
|
|
|
var invertedY = this._globalTileRange.max.y - coords.y;
|
|
|
|
|
if (this.options.tms) {
|
|
|
|
|
data["y"] = invertedY;
|
|
|
|
|
}
|
|
|
|
|
data["-y"] = invertedY;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
data.sx = data.x >> 4;
|
|
|
|
|
data.sy = ((1 << data.z) - data.y) >> 4;
|
|
|
|
|
|
|
|
|
|
return L.Util.template(this._url, L.Util.extend(data, this.options));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
createTile: function (coords) {
|
|
|
|
|
// 创建一个用于绘图的 <canvas> 元素
|
|
|
|
|
var tile = L.DomUtil.create("canvas", "leaflet-tile");
|
|
|
|
|
|
|
|
|
|
// 根据选项设置瓦片的宽度和高度
|
|
|
|
|
var size = this.getTileSize();
|
|
|
|
|
tile.width = size.x;
|
|
|
|
|
tile.height = size.y;
|
|
|
|
|
|
|
|
|
|
// 获得一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西
|
|
|
|
|
var ctx = tile.getContext("2d");
|
|
|
|
|
|
|
|
|
|
// 使用传入的 URL 模板替换变量
|
|
|
|
|
var url = this._url
|
|
|
|
|
.replace("{s}", this._getSubdomain(coords))
|
|
|
|
|
.replace("{x}", coords.x)
|
|
|
|
|
.replace("{y}", coords.y)
|
|
|
|
|
.replace("{z}", this._getZoomForUrl());
|
|
|
|
|
|
|
|
|
|
// 创建一个图像对象来加载瓦片
|
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
|
|
img.src = url; // 替换为你的图片路径
|
|
|
|
|
img.setAttribute("crossOrigin", "anonymous");
|
|
|
|
|
|
|
|
|
|
/**获取外部接受的颜色*/
|
|
|
|
|
var color = this.options.color;
|
|
|
|
|
|
|
|
|
|
// 当图片加载完成后，绘制到 Canvas 上
|
|
|
|
|
img.onload = function () {
|
|
|
|
|
// 绘制图片到 Canvas 上
|
|
|
|
|
ctx.drawImage(img, 0, 0, tile.width, tile.height);
|
|
|
|
|
|
|
|
|
|
if (color) {
|
|
|
|
|
// 获取图像的像素数据
|
|
|
|
|
var imageData = ctx.getImageData(0, 0, tile.width, tile.height);
|
|
|
|
|
// 获取原来的图片的像素颜色
|
|
|
|
|
var pixels = imageData.data;
|
|
|
|
|
for (let i = 0; i < pixels.length; i += 4) {
|
|
|
|
|
const r = pixels[i],
|
|
|
|
|
g = pixels[i + 1],
|
|
|
|
|
b = pixels[i + 2],
|
|
|
|
|
a = pixels[i + 3];
|
|
|
|
|
//计算灰度
|
|
|
|
|
var grayVal = (r + g + b) / 3;
|
|
|
|
|
//灰度反转--会使图片整体变成灰色--方便上色
|
|
|
|
|
grayVal = 255 - grayVal;
|
|
|
|
|
//将灰度替换掉原始的颜色
|
|
|
|
|
pixels[i] = grayVal + color.r;
|
|
|
|
|
pixels[i + 1] = grayVal + color.g;
|
|
|
|
|
pixels[i + 2] = grayVal + color.b;
|
|
|
|
|
//设置一个前景透明度，以便和背景混合
|
|
|
|
|
if (color.a) {
|
|
|
|
|
pixels[i + 3] = a * color.a;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 将修改后的像素数据放回 Canvas
|
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// 返回瓦片，以便在屏幕上呈现
|
|
|
|
|
return tile;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
L.TileLayer.ChinaProvider.providers = {
|
|
|
|
|
@ -161,16 +153,12 @@ L.TileLayer.ChinaProvider.providers = {
|
|
|
|
|
|
|
|
|
|
GaoDe: {
|
|
|
|
|
Normal: {
|
|
|
|
|
Map: "//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
|
|
|
|
},
|
|
|
|
|
// 固定地址
|
|
|
|
|
Normal2: {
|
|
|
|
|
Map: "//wprd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
|
|
|
|
Map: "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
|
|
|
|
},
|
|
|
|
|
Satellite: {
|
|
|
|
|
Map: "//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
|
|
Map: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
|
|
Annotion:
|
|
|
|
|
"//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
|
|
|
|
|
"https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
|
|
|
|
|
},
|
|
|
|
|
Subdomains: ["1", "2", "3", "4"],
|
|
|
|
|
},
|
|
|
|
|
@ -188,11 +176,11 @@ L.TileLayer.ChinaProvider.providers = {
|
|
|
|
|
|
|
|
|
|
Geoq: {
|
|
|
|
|
Normal: {
|
|
|
|
|
Map: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
Map: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
PurplishBlue:
|
|
|
|
|
"//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
Gray: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
Warm: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
"//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
Gray: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
Warm: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
|
|
|
|
|
},
|
|
|
|
|
Theme: {
|
|
|
|
|
Hydro:
|
|
|
|
|
@ -210,16 +198,29 @@ L.TileLayer.ChinaProvider.providers = {
|
|
|
|
|
|
|
|
|
|
Baidu: {
|
|
|
|
|
Normal: {
|
|
|
|
|
Map: "//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2",
|
|
|
|
|
Map: "//online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
|
|
|
|
|
},
|
|
|
|
|
Satellite: {
|
|
|
|
|
Map: "//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
|
|
|
|
|
Annotion:
|
|
|
|
|
"//shangetu{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020&scaler=2",
|
|
|
|
|
"//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020",
|
|
|
|
|
},
|
|
|
|
|
Subdomains: ["0", "1", "2"],
|
|
|
|
|
Subdomains: "0123456789",
|
|
|
|
|
tms: true,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Tencent: {
|
|
|
|
|
Normal: {
|
|
|
|
|
Map: "//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={-y}&type=vector&styleid=3",
|
|
|
|
|
},
|
|
|
|
|
Satellite: {
|
|
|
|
|
Map: "//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg",
|
|
|
|
|
},
|
|
|
|
|
Terrain: {
|
|
|
|
|
Map: "//p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg",
|
|
|
|
|
},
|
|
|
|
|
Subdomains: "0123",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
L.tileLayer.chinaProvider = function (type, options) {
|
|
|
|
|
|
laozt
1 year ago