代码迁移
This commit is contained in:
50
src/Obj/Base/LocateCurrent/_element.js
Normal file
50
src/Obj/Base/LocateCurrent/_element.js
Normal file
@ -0,0 +1,50 @@
|
||||
import Tools from "../../../Tools";
|
||||
function _element() {
|
||||
let tools = new Tools()
|
||||
let elm = document.createElement('div');
|
||||
elm.className = 'locate-current-bubble-box'
|
||||
elm.innerHTML = `
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="lng" style="display: flex;align-items: center;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lng.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">经度：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="lat" style="display: flex;align-items: center;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lat.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">纬度：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="height" style="display: flex;align-items: center;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/h.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">海拔：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="satellite" style="display: flex;align-items: center;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/satellite.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">卫星：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
elm.style.position = 'absolute'
|
||||
elm.style.background = `url(${tools.getSourceRootPath() + '/img/bubble/bubble.png'}) no-repeat 100% 100%`;
|
||||
elm.style.backgroundSize = '100% 100%'
|
||||
elm.style.width = '220px'
|
||||
elm.style.height = '140px'
|
||||
elm.style.color = '#ffffff'
|
||||
elm.style.padding = '10px'
|
||||
elm.style.boxSizing = 'border-box'
|
||||
elm.style.fontSize = '14px'
|
||||
elm.style.pointerEvents = 'none'
|
||||
document.body.appendChild(elm)
|
||||
return elm
|
||||
}
|
||||
|
||||
export { _element }
|
||||
58
src/Obj/Base/LocateCurrent/_element2.js
Normal file
58
src/Obj/Base/LocateCurrent/_element2.js
Normal file
@ -0,0 +1,58 @@
|
||||
import Tools from "../../../Tools";
|
||||
function _element() {
|
||||
let tools = new Tools()
|
||||
let elm = document.createElement('div');
|
||||
elm.className = 'locate-current-bubble-box'
|
||||
elm.innerHTML = `
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="lng" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lng.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">经度：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="ew" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/e.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">东经：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="lat" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/lat.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">纬度：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="sn" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/s.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">南纬：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 6px;margin-top: 0;">
|
||||
<div class="height" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/h.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">高程：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="satellite" style="display: flex;align-items: center;width: 48%;">
|
||||
<i style="display: inline-block;width: 20px;height: 20px;flex: 0 0 20px;margin-right: 10px;background: url(${tools.getSourceRootPath() + '/img/bubble/satellite.png'}) no-repeat 100% 100%;"></i>
|
||||
<span style="white-space: nowrap;">卫星：</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
elm.style.position = 'absolute'
|
||||
elm.style.background = `url(${tools.getSourceRootPath() + '/img/bubble/bubble.png'}) no-repeat 100% 100%`;
|
||||
elm.style.backgroundSize = '100% 100%'
|
||||
elm.style.width = '400px'
|
||||
elm.style.height = '115px'
|
||||
elm.style.color = '#ffffff'
|
||||
elm.style.padding = '10px'
|
||||
elm.style.boxSizing = 'border-box'
|
||||
elm.style.fontSize = '14px'
|
||||
elm.style.pointerEvents = 'none'
|
||||
document.body.appendChild(elm)
|
||||
return elm
|
||||
}
|
||||
|
||||
export { _element }
|
||||
210
src/Obj/Base/LocateCurrent/index.js
Normal file
210
src/Obj/Base/LocateCurrent/index.js
Normal file
@ -0,0 +1,210 @@
|
||||
import { getHost } from "../../../on";
|
||||
import Tools from "../../../Tools";
|
||||
import { getGroundCover } from '../../../Global/global'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../Global/global'
|
||||
|
||||
class LocateCurrent {
|
||||
#canvas = null
|
||||
#img = {
|
||||
bgimg: null,
|
||||
img1: null,
|
||||
img2: null,
|
||||
img3: null,
|
||||
img4: null,
|
||||
}
|
||||
constructor(sdk, options = {}, callback) {
|
||||
this.sdk = sdk
|
||||
this.options = options
|
||||
this.data = {}
|
||||
this._webSocketCallback = callback
|
||||
this._tools = new Tools(this.sdk)
|
||||
this.requestResource()
|
||||
}
|
||||
|
||||
requestResource() {
|
||||
this.options.host = this.options.host || getHost()
|
||||
let url = ""
|
||||
url = this.options.host + '/yjearth4.0/api/v1/gps/state'
|
||||
this.reconnecting = new ReconnectingWebSocket('ws://' + url, [], { maxReconnectAttempts: 8 })
|
||||
this.reconnecting.onopen = (event) => {
|
||||
this.reconnecting.onmessage = async (event) => {
|
||||
this.data = JSON.parse(event.data)
|
||||
if (this.data && this.data.rmc) {
|
||||
let height = await this._tools.getClampToHeight(this.data.rmc)
|
||||
this.position = new Cesium.Cartesian3.fromDegrees(this.data.rmc.lng, this.data.rmc.lat, height);
|
||||
this.create()
|
||||
}
|
||||
this._webSocketCallback && this._webSocketCallback(this.data)
|
||||
}
|
||||
}
|
||||
|
||||
// let _this = this
|
||||
// this.data = {
|
||||
// rmc: {
|
||||
// lng: 116.397428,
|
||||
// lat: 39.90923,
|
||||
// alt: 100
|
||||
// }
|
||||
// }
|
||||
// this.position = new Cesium.Cartesian3.fromDegrees(this.data.rmc.lng, this.data.rmc.lat, 0);
|
||||
// setInterval(() => {
|
||||
// _this.create()
|
||||
// console.log(1111)
|
||||
// }, 50);
|
||||
}
|
||||
|
||||
create() {
|
||||
this.getcanvas()
|
||||
if (this.data && this.data.rmc && !this.entity) {
|
||||
this.entity = new Cesium.CustomDataSource();
|
||||
this.sdk.viewer.dataSources.add(this.entity);
|
||||
let point = new Cesium.Entity({
|
||||
position: new Cesium.CallbackProperty(() => {
|
||||
let c3 = this.position
|
||||
return c3
|
||||
}, false),
|
||||
billboard: {
|
||||
image: this._tools.getSourceRootPath() + '/img/locate2.png',
|
||||
scale: 1,
|
||||
disableDepthTestDistance: new Cesium.CallbackProperty(function () {
|
||||
return getGroundCover() ? undefined : 100000000
|
||||
}, false),
|
||||
width: 31,
|
||||
height: 36,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -15),
|
||||
},
|
||||
})
|
||||
let lable = new Cesium.Entity({
|
||||
position: new Cesium.CallbackProperty(() => {
|
||||
let c3 = this.position
|
||||
return c3
|
||||
}, false),
|
||||
billboard: {
|
||||
image: new Cesium.CallbackProperty(() => {
|
||||
return this.lableCanvas
|
||||
}),
|
||||
scale: 1,
|
||||
disableDepthTestDistance: new Cesium.CallbackProperty(function () {
|
||||
return getGroundCover() ? undefined : 100000000
|
||||
}, false),
|
||||
width: 220,
|
||||
height: 140,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -110),
|
||||
},
|
||||
})
|
||||
this.entity.entities.add(point)
|
||||
this.entity.entities.add(lable)
|
||||
}
|
||||
}
|
||||
|
||||
loaded(cd) {
|
||||
let data
|
||||
Object.defineProperty(this, 'data', {
|
||||
get() {
|
||||
return data
|
||||
},
|
||||
set(value) {
|
||||
data = value
|
||||
if (cd) {
|
||||
cd()
|
||||
cd = undefined
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getcanvas() {
|
||||
const data = [
|
||||
{
|
||||
images: this._tools.getSourceRootPath() + '/img/bubble/lng.png',
|
||||
text: '经度：' + parseFloat(this.data.rmc.lng.toFixed(10))
|
||||
},
|
||||
{
|
||||
images: this._tools.getSourceRootPath() + '/img/bubble/lat.png',
|
||||
text: '纬度：' + parseFloat(this.data.rmc.lat.toFixed(10))
|
||||
},
|
||||
{
|
||||
images: this._tools.getSourceRootPath() + '/img/bubble/h.png',
|
||||
text: '海拔：' + parseFloat(this.data.rmc.alt.toFixed(10))
|
||||
},
|
||||
{
|
||||
images: this._tools.getSourceRootPath() + '/img/bubble/satellite.png',
|
||||
text: '卫星：' + this.data.satellites || 0
|
||||
}
|
||||
]
|
||||
if (this.#canvas) {
|
||||
const ctx = this.#canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
|
||||
ctx.drawImage(this.#img.bgimg, 0, 0, this.#canvas.width, this.#canvas.height);
|
||||
let imagesLoaded = 0
|
||||
data.forEach((item, index) => {
|
||||
ctx.drawImage(this.#img['img' + (index + 1)], 12, 12 + (index * 26));
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.font = "16px Arial";
|
||||
ctx.fillText(item.text, 44, 28 + (index * 26));
|
||||
imagesLoaded++;
|
||||
if (imagesLoaded === data.length) {
|
||||
this.lableCanvas = this.#canvas.toDataURL()
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.#canvas = document.createElement('canvas');
|
||||
const ctx = this.#canvas.getContext('2d')
|
||||
this.#canvas.width = 220
|
||||
this.#canvas.height = 140
|
||||
let img = new Image();
|
||||
this.#img.bgimg = img
|
||||
img.src = this._tools.getSourceRootPath() + '/img/bubble/bubble.png';
|
||||
let imagesLoaded = 0
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0, this.#canvas.width, this.#canvas.height);
|
||||
data.forEach((item, index) => {
|
||||
const img = new Image();
|
||||
this.#img['img' + (index + 1)] = img
|
||||
img.src = item.images;
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 12, 12 + (index * 26));
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.font = "16px Arial";
|
||||
ctx.fillText(item.text, 44, 28 + (index * 26));
|
||||
imagesLoaded++;
|
||||
if (imagesLoaded === data.length) {
|
||||
this.lableCanvas = this.#canvas.toDataURL()
|
||||
}
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async flyTo(options = {}) {
|
||||
if (this.data && this.data.rmc) {
|
||||
let height = await this._tools.getClampToHeight(this.data.rmc)
|
||||
setActiveViewer(0)
|
||||
closeRotateAround(this.sdk)
|
||||
closeViewFollow(this.sdk)
|
||||
|
||||
this.sdk.viewer.camera.flyTo({
|
||||
orientation: options.orientation || {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-90.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
},
|
||||
destination: Cesium.Cartesian3.fromDegrees(this.data.rmc.lng, this.data.rmc.lat, height + (options.height || 500)),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.#canvas = null
|
||||
this.#img = {}
|
||||
this.reconnecting && this.reconnecting.close()
|
||||
this.sdk.viewer.dataSources.remove(this.entity)
|
||||
this.entity = null
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default LocateCurrent
|
||||
Reference in New Issue
Block a user