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