parent
29c09a5921
commit
7fa52f6038
|
After Width: | Height: | Size: 712 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 966 B |
File diff suppressed because one or more lines are too long
@ -0,0 +1,221 @@
|
||||
// this L.CRS.Baidu from https://github.com/muyao1987/leaflet-tileLayer-baidugaode/blob/master/src/tileLayer.baidu.js
|
||||
|
||||
if (L.Proj) {
|
||||
L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+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 () {
|
||||
var level = 19
|
||||
var res = [];
|
||||
res[0] = Math.pow(2, 18);
|
||||
for (var i = 1; i < level; i++) {
|
||||
res[i] = Math.pow(2, (18 - i))
|
||||
}
|
||||
return res;
|
||||
}(),
|
||||
origin: [0, 0],
|
||||
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
|
||||
});
|
||||
}
|
||||
|
||||
L.TileLayer.ChinaProvider = L.TileLayer.extend({
|
||||
|
||||
initialize: function (type, options) { // (type, Object)
|
||||
var providers = L.TileLayer.ChinaProvider.providers;
|
||||
|
||||
options = options || {}
|
||||
|
||||
var parts = type.split('.');
|
||||
|
||||
var providerName = parts[0];
|
||||
var mapName = parts[1];
|
||||
var mapType = parts[2];
|
||||
|
||||
var url = providers[providerName][mapName][mapType];
|
||||
options.subdomains = providers[providerName].Subdomains;
|
||||
options.key = options.key || providers[providerName].key;
|
||||
|
||||
if ('tms' in providers[providerName]) {
|
||||
options.tms = providers[providerName]['tms']
|
||||
}
|
||||
|
||||
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 = {
|
||||
TianDiTu: {
|
||||
Normal: {
|
||||
Map: "//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
|
||||
Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
|
||||
},
|
||||
Satellite: {
|
||||
Map: "//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
|
||||
Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
|
||||
},
|
||||
Terrain: {
|
||||
Map: "//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
|
||||
Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
|
||||
},
|
||||
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
||||
key: "174705aebfe31b79b3587279e211cb9a"
|
||||
},
|
||||
|
||||
GaoDe: {
|
||||
Normal: {
|
||||
// Map: 'https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}' //高清
|
||||
Map: '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
|
||||
},
|
||||
Satellite: {
|
||||
Map: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
Annotion: 'https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
|
||||
},
|
||||
Subdomains: ["1", "2", "3", "4"]
|
||||
},
|
||||
|
||||
Google: {
|
||||
Normal: {
|
||||
Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
|
||||
},
|
||||
Satellite: {
|
||||
Map: "//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
|
||||
Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
|
||||
},
|
||||
Subdomains: []
|
||||
},
|
||||
|
||||
Geoq: {
|
||||
Normal: {
|
||||
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}",
|
||||
},
|
||||
Theme: {
|
||||
Hydro: "//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
|
||||
},
|
||||
Subdomains: []
|
||||
},
|
||||
|
||||
OSM: {
|
||||
Normal: {
|
||||
Map: "//{s}.tile.osm.org/{z}/{x}/{y}.png",
|
||||
},
|
||||
Subdomains: ['a', 'b', 'c']
|
||||
},
|
||||
|
||||
Baidu: {
|
||||
Normal: {
|
||||
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: '//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020'
|
||||
},
|
||||
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) {
|
||||
return new L.TileLayer.ChinaProvider(type, options);
|
||||
};
|
||||
@ -0,0 +1,143 @@
|
||||
/* eslint-disable */
|
||||
L.CoordConver = function () {
|
||||
function a(b, c) {
|
||||
var d =
|
||||
-100 +
|
||||
2 * b +
|
||||
3 * c +
|
||||
0.2 * c * c +
|
||||
0.1 * b * c +
|
||||
0.2 * Math.sqrt(Math.abs(b)),
|
||||
d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3,
|
||||
d = d + (2 * (20 * Math.sin(c * e) + 40 * Math.sin((c / 3) * e))) / 3
|
||||
return (d +=
|
||||
(2 * (160 * Math.sin((c / 12) * e) + 320 * Math.sin((c * e) / 30))) / 3)
|
||||
}
|
||||
function f(b, c) {
|
||||
var d =
|
||||
300 +
|
||||
b +
|
||||
2 * c +
|
||||
0.1 * b * b +
|
||||
0.1 * b * c +
|
||||
0.1 * Math.sqrt(Math.abs(b)),
|
||||
d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3,
|
||||
d = d + (2 * (20 * Math.sin(b * e) + 40 * Math.sin((b / 3) * e))) / 3
|
||||
return (d +=
|
||||
(2 * (150 * Math.sin((b / 12) * e) + 300 * Math.sin((b / 30) * e))) / 3)
|
||||
}
|
||||
this.getCorrdType = function (b) {
|
||||
var c = 'wgs84'
|
||||
switch (b.split('.')[0]) {
|
||||
case 'Geoq':
|
||||
case 'GaoDe':
|
||||
case 'Google':
|
||||
c = 'gcj02'
|
||||
break
|
||||
case 'Baidu':
|
||||
c = 'bd09'
|
||||
break
|
||||
case 'OSM':
|
||||
case 'TianDiTu':
|
||||
c = 'wgs84'
|
||||
}
|
||||
return c
|
||||
}
|
||||
this.bd09_To_gps84 = function (b, c) {
|
||||
var d = this.bd09_To_gcj02(b, c)
|
||||
return this.gcj02_To_gps84(d.lng, d.lat)
|
||||
}
|
||||
this.gps84_To_bd09 = function (b, c) {
|
||||
var d = this.gps84_To_gcj02(b, c)
|
||||
return this.gcj02_To_bd09(d.lng, d.lat)
|
||||
}
|
||||
this.gps84_To_gcj02 = function (b, c) {
|
||||
var d = a(b - 105, c - 35),
|
||||
k = f(b - 105, c - 35),
|
||||
l = (c / 180) * e,
|
||||
g = Math.sin(l),
|
||||
g = 1 - n * g * g,
|
||||
m = Math.sqrt(g),
|
||||
d = (180 * d) / (((h * (1 - n)) / (g * m)) * e),
|
||||
k = (180 * k) / ((h / m) * Math.cos(l) * e)
|
||||
return { lng: b + k, lat: c + d }
|
||||
}
|
||||
this.gcj02_To_gps84 = function (b, c) {
|
||||
var d = a(b - 105, c - 35),
|
||||
k = f(b - 105, c - 35),
|
||||
l = (c / 180) * e,
|
||||
g = Math.sin(l),
|
||||
g = 1 - n * g * g,
|
||||
m = Math.sqrt(g),
|
||||
d = (180 * d) / (((h * (1 - n)) / (g * m)) * e),
|
||||
k = (180 * k) / ((h / m) * Math.cos(l) * e)
|
||||
return { lng: 2 * b - (b + k), lat: 2 * c - (c + d) }
|
||||
}
|
||||
this.gcj02_To_bd09 = function (b, c) {
|
||||
var d = Math.sqrt(b * b + c * c) + 2e-5 * Math.sin(c * p),
|
||||
a = Math.atan2(c, b) + 3e-6 * Math.cos(b * p)
|
||||
return { lng: d * Math.cos(a) + 0.0065, lat: d * Math.sin(a) + 0.006 }
|
||||
}
|
||||
this.bd09_To_gcj02 = function (b, c) {
|
||||
var d = b - 0.0065,
|
||||
a = c - 0.006,
|
||||
e = Math.sqrt(d * d + a * a) - 2e-5 * Math.sin(a * p),
|
||||
d = Math.atan2(a, d) - 3e-6 * Math.cos(d * p)
|
||||
return { lng: e * Math.cos(d), lat: e * Math.sin(d) }
|
||||
}
|
||||
var e = 3.141592653589793,
|
||||
h = 6378245,
|
||||
n = 0.006693421622965943,
|
||||
p = (3e3 * e) / 180
|
||||
}
|
||||
L.coordConver = function () {
|
||||
return new L.CoordConver()
|
||||
}
|
||||
L.TileLayer.ChinaProvider.include({
|
||||
addTo: function (a) {
|
||||
a.options.corrdType || (a.options.corrdType = this.options.corrdType)
|
||||
a.addLayer(this)
|
||||
return this
|
||||
},
|
||||
})
|
||||
L.tileLayer.chinaProvider = function (a, f) {
|
||||
f = f || {}
|
||||
f.corrdType = L.coordConver().getCorrdType(a)
|
||||
return new L.TileLayer.ChinaProvider(a, f)
|
||||
}
|
||||
L.GridLayer.include({
|
||||
_setZoomTransform: function (a, f, e) {
|
||||
var h = f
|
||||
void 0 != h &&
|
||||
this.options &&
|
||||
('gcj02' == this.options.corrdType
|
||||
? (h = L.coordConver().gps84_To_gcj02(f.lng, f.lat))
|
||||
: 'bd09' == this.options.corrdType &&
|
||||
(h = L.coordConver().gps84_To_bd09(f.lng, f.lat)))
|
||||
f = this._map.getZoomScale(e, a.zoom)
|
||||
e = a.origin
|
||||
.multiplyBy(f)
|
||||
.subtract(this._map._getNewPixelOrigin(h, e))
|
||||
.round()
|
||||
L.Browser.any3d
|
||||
? L.DomUtil.setTransform(a.el, e, f)
|
||||
: L.DomUtil.setPosition(a.el, e)
|
||||
},
|
||||
_getTiledPixelBounds: function (a) {
|
||||
var f = a
|
||||
void 0 != f &&
|
||||
this.options &&
|
||||
('gcj02' == this.options.corrdType
|
||||
? (f = L.coordConver().gps84_To_gcj02(a.lng, a.lat))
|
||||
: 'bd09' == this.options.corrdType &&
|
||||
(f = L.coordConver().gps84_To_bd09(a.lng, a.lat)))
|
||||
a = this._map
|
||||
var e = a._animatingZoom
|
||||
? Math.max(a._animateToZoom, a.getZoom())
|
||||
: a.getZoom(),
|
||||
e = a.getZoomScale(e, this._tileZoom),
|
||||
f = a.project(f, this._tileZoom).floor()
|
||||
a = a.getSize().divideBy(2 * e)
|
||||
return new L.Bounds(f.subtract(a), f.add(a))
|
||||
},
|
||||
})
|
||||
@ -1 +1,60 @@
|
||||
<!-- 驾驶舱紧急事件 -->
|
||||
<!-- 驾驶舱紧急事件 -->
|
||||
<template>
|
||||
<div class="L-app-container">
|
||||
<header>驾驶舱群体事件</header>
|
||||
<div class="tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
style="color: #edeef0"
|
||||
>
|
||||
<el-tab-pane label="待审核" name="first">
|
||||
<!-- <notFilled v-if="isFirst" :id="null" :status="0"></notFilled> -->
|
||||
1
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="已上报" name="second">
|
||||
<!-- <notFilled v-if="isSecond" :id="1" :status="1"></notFilled> -->
|
||||
2
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="重训练" name="third">
|
||||
<!-- <notFilled v-if="isThird" :id="2" :status="1"></notFilled> -->
|
||||
3
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
active: 0,
|
||||
isFirst : true,
|
||||
isSecond :false,
|
||||
isThird : false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClick(e) {
|
||||
// console.log(this.activeName);
|
||||
if (this.activeName == "first") {
|
||||
this.isFirst = true;
|
||||
this.isSecond = false;
|
||||
this.isThird = false;
|
||||
} else if (this.activeName == "second") {
|
||||
this.isFirst = false;
|
||||
this.isSecond = true;
|
||||
this.isThird = false;
|
||||
} else if (this.activeName == "third") {
|
||||
this.isFirst = false;
|
||||
this.isSecond = false;
|
||||
this.isThird = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue