jinna
3 years ago
parent
5289cf52bb
commit
370a345a42
10 changed files with 1214 additions and 635 deletions
@ -0,0 +1,76 @@ |
||||
//wgs84_to_gcj02.js文件
|
||||
|
||||
//地标 转 国测 常量
|
||||
var x_PI = (3.14159265358979324 * 3000.0) / 180.0; |
||||
var PI = 3.1415926535897932384626; |
||||
var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
|
||||
var ee = 0.00669342162296594323; //椭球的偏心率。
|
||||
|
||||
//判断是否在国内，在中国国内的经纬度才需要做偏移
|
||||
function out_of_china(lng, lat) { |
||||
return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271 || false; |
||||
} |
||||
|
||||
//转化经度
|
||||
function transformlng(lng, lat) { |
||||
var ret = |
||||
300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); |
||||
ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0; |
||||
ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0; |
||||
ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0; |
||||
return ret; |
||||
} |
||||
|
||||
//转化纬度
|
||||
function transformlat(lng, lat) { |
||||
var ret = |
||||
-100.0 + |
||||
2.0 * lng + |
||||
3.0 * lat + |
||||
0.2 * lat * lat + |
||||
0.1 * lng * lat + |
||||
0.2 * Math.sqrt(Math.abs(lng)); |
||||
ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0; |
||||
ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0; |
||||
ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0; |
||||
return ret; |
||||
} |
||||
|
||||
//wgs84 to gcj02 地球坐标系 转 火星坐标系
|
||||
export function wgs84_to_gcj02(lng, lat) { |
||||
if (out_of_china(lng, lat)) { |
||||
return [lng, lat]; |
||||
} else { |
||||
var dlat = transformlat(lng - 105.0, lat - 35.0); |
||||
var dlng = transformlng(lng - 105.0, lat - 35.0); |
||||
var radlat = (lat / 180.0) * PI; |
||||
var magic = Math.sin(radlat); |
||||
magic = 1 - ee * magic * magic; |
||||
var sqrtmagic = Math.sqrt(magic); |
||||
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI); |
||||
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI); |
||||
var mglat = lat + dlat; |
||||
var mglng = lng + dlng; |
||||
|
||||
return [mglng, mglat]; |
||||
} |
||||
} |
||||
|
||||
//gcj02 to wgs84 火星坐标系 转 地球坐标系
|
||||
export function gcj02_to_wgs84(lng, lat) { |
||||
if (out_of_china(lng, lat)) { |
||||
return [lng, lat]; |
||||
} else { |
||||
var dlat = transformlat(lng - 105.0, lat - 35.0); |
||||
var dlng = transformlng(lng - 105.0, lat - 35.0); |
||||
var radlat = (lat / 180.0) * PI; |
||||
var magic = Math.sin(radlat); |
||||
magic = 1 - ee * magic * magic; |
||||
var sqrtmagic = Math.sqrt(magic); |
||||
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI); |
||||
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI); |
||||
mglat = lat + dlat; |
||||
mglng = lng + dlng; |
||||
return [lng * 2 - mglng, lat * 2 - mglat]; |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,118 @@ |
||||
<template> |
||||
<div> |
||||
<div class="box" v-if="showFirst"> |
||||
<el-carousel height="150px" :interval="parseInt(5000 / oneArr.length)" initial-index="0"> |
||||
<el-carousel-item v-for="item in oneArr" :key="item" > |
||||
<h3 class="small">{{ item }}</h3> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<div class="box two" v-if="showSecond"> |
||||
<el-carousel height="150px" :interval="parseInt(5000 / twoArr.length)" initial-index="0"> |
||||
<el-carousel-item v-for="item in twoArr" :key="item" > |
||||
<h3 class="small">{{ item }}</h3> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<div class="box three" v-if="showThree"> |
||||
<el-carousel height="150px" :interval="parseInt(5000 / threeArr.length)" initial-index="0"> |
||||
<el-carousel-item v-for="item in threeArr" :key="item" > |
||||
<h3 class="small">{{ item }}</h3> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<div class="box four" v-if="showForth"> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
showFirst:false, |
||||
showSecond:false, |
||||
showThree:false, |
||||
showForth:false, |
||||
firstInter:null, |
||||
twoInter:null, |
||||
threeInter:null, |
||||
fourInter:null, |
||||
oneArr:[1,2,3,4], |
||||
twoArr:[5,6], |
||||
threeArr:[7,8,9], |
||||
fourArr:[10,11,12,13,14], |
||||
} |
||||
}, |
||||
created() { |
||||
this.showBox() |
||||
}, |
||||
methods: { |
||||
showBox(){ |
||||
this.showFirst = true; |
||||
this.showForth = false; |
||||
clearTimeout(this.firstInter) |
||||
clearTimeout(this.twoInter) |
||||
clearTimeout(this.threeInter) |
||||
clearTimeout(this.fourInter) |
||||
this.firstInter = setTimeout(() =>{ |
||||
this.showBox1() |
||||
},5100) |
||||
}, |
||||
showBox1(){ |
||||
this.showSecond = true; |
||||
this.showFirst = false; |
||||
clearTimeout(this.firstInter) |
||||
clearTimeout(this.twoInter) |
||||
clearTimeout(this.threeInter) |
||||
clearTimeout(this.fourInter) |
||||
this.twoInter = setTimeout(() =>{ |
||||
|
||||
this.showBox2() |
||||
},5100) |
||||
}, |
||||
showBox2(){ |
||||
this.showSecond = false; |
||||
this.showThree = true; |
||||
clearTimeout(this.firstInter) |
||||
clearTimeout(this.twoInter) |
||||
clearTimeout(this.threeInter) |
||||
clearTimeout(this.fourInter) |
||||
this.threeInter = setTimeout(() =>{ |
||||
this.showBox3() |
||||
},5100) |
||||
}, |
||||
showBox3(){ |
||||
this.showThree = false; |
||||
this.showForth = true; |
||||
clearTimeout(this.firstInter) |
||||
clearTimeout(this.twoInter) |
||||
clearTimeout(this.threeInter) |
||||
clearTimeout(this.fourInter) |
||||
this.threeInter = setTimeout(() =>{ |
||||
this.showBox() |
||||
},5100) |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.box{ |
||||
width: 300px; |
||||
height: 300px; |
||||
border: 1px solid #000; |
||||
margin: 30px; |
||||
} |
||||
|
||||
.two{ |
||||
border: 1px solid red; |
||||
} |
||||
.three{ |
||||
border: 1px solid green; |
||||
} |
||||
.four{ |
||||
border: 1px solid yellow; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue