zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

贴地图片增加锚点设置

Browse Source
This commit is contained in:
zh
2025-08-12 11:50:47 +08:00
parent a888969c5d
commit 67540c1808
3 changed files with 122 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Global/SplitScreen/index.js
View File

@ -517,7 +517,7 @@ async function setSplitDirection(v, id, isoff = false, entityId) {
thatD.textShow = thatP.textShow thatD.textShow = thatP.textShow
} }
if (thatP.label && thatP.labelShow) { if (thatP.label && thatP.labelShow) {
thatP.label.entity.show = true thatP.labelShow = true
} }
if (thatD.label) { if (thatD.label) {
thatD.label.options.ground = false thatD.label.options.ground = false

2
src/Obj/Base/GroundImage/_element.js
View File

@ -8,7 +8,7 @@ function html() {
<input class="input" maxlength="40" type="text" @model="name"> <input class="input" maxlength="40" type="text" @model="name">
</div> </div>
<div class="col"> <div class="col">
<button class="anchor btn" @click="setAnchorPoint">调整锚点</button> <button class="anchor btn">调整锚点</button>
</div> </div>
</div> </div>
</div> </div>

182
src/Obj/Base/GroundImage/index.js
View File

@ -24,7 +24,7 @@ class GroundImage extends Base {
* @param options.flipe.x=false {boolean} 绕X轴翻转 * @param options.flipe.x=false {boolean} 绕X轴翻转
* @param options.flipe.y=false {boolean} 绕Y轴翻转 * @param options.flipe.y=false {boolean} 绕Y轴翻转
* @param options.url {string} 图片地址 * @param options.url {string} 图片地址
* @param {Array.<object>} options.positions 经纬度和高度的列表，值交替 [{lon,lat,alt},...] * @param {Array.<object>} options.position 经纬度和高度的列表，值交替 [{lon,lat,alt},...]
* @param _Dialog {object} 弹框事件 * @param _Dialog {object} 弹框事件
* @param _Dialog.confirmCallBack {function} 弹框确认时的回调 * @param _Dialog.confirmCallBack {function} 弹框确认时的回调
* */ * */
@ -35,8 +35,8 @@ class GroundImage extends Base {
this.options.url = options.url this.options.url = options.url
this.options.angle = options.angle || 0 this.options.angle = options.angle || 0
this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1 this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1
this.options.positions = options.positions this.options.position = options.position
this.options.offset = { x: 0.5, y: 0.5 } this.options.offset = options.offset || { x: 0.5, y: 0.5 }
this.options.flipe = options.flipe || {} this.options.flipe = options.flipe || {}
this.options.flipe.x = this.options.flipe.x || false this.options.flipe.x = this.options.flipe.x || false
@ -49,7 +49,7 @@ class GroundImage extends Base {
this.Dialog = _Dialog this.Dialog = _Dialog
this._elms = {}; this._elms = {};
this.previous = { this.previous = {
positions: { ...this.options.positions } position: { ...this.options.position }
} }
this._EventBinding = new EventBinding() this._EventBinding = new EventBinding()
this.event = new MouseEvent(this.sdk) this.event = new MouseEvent(this.sdk)
@ -62,6 +62,32 @@ class GroundImage extends Base {
} }
set offset(v) { set offset(v) {
this.options.offset = v this.options.offset = v
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = this.replaceHost(this.options.url, this.options.host);
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = img.width * 2;
canvas.height = img.height * 2;
// 绘制图像
if (this.flipeX) {
ctx.scale(1, -1);
ctx.translate(0, -canvas.height)
}
if (this.flipeY) {
ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0);
}
ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
image: canvas,
transparent: true
})
}
} }
get angle() { get angle() {
@ -97,14 +123,15 @@ class GroundImage extends Base {
} }
const img = new Image(); const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = this.replaceHost(this.options.url, this.options.host); img.src = this.replaceHost(this.options.url, this.options.host);
img.onload = () => { img.onload = () => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// 设置画布大小 // 设置画布大小
canvas.width = img.width; canvas.width = img.width * 2;
canvas.height = img.height; canvas.height = img.height * 2;
// 绘制图像 // 绘制图像
if (this.flipeX) { if (this.flipeX) {
@ -115,7 +142,7 @@ class GroundImage extends Base {
ctx.scale(-1, 1); ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0); ctx.translate(-canvas.width, 0);
} }
ctx.drawImage(img, 0, 0); ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
this.entity && (this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ this.entity && (this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
image: canvas, image: canvas,
transparent: true transparent: true
@ -140,14 +167,15 @@ class GroundImage extends Base {
} }
const img = new Image(); const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = this.replaceHost(this.options.url, this.options.host); img.src = this.replaceHost(this.options.url, this.options.host);
img.onload = () => { img.onload = () => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// 设置画布大小 // 设置画布大小
canvas.width = img.width; canvas.width = img.width * 2;
canvas.height = img.height; canvas.height = img.height * 2;
// 绘制图像 // 绘制图像
if (this.flipeX) { if (this.flipeX) {
@ -158,7 +186,7 @@ class GroundImage extends Base {
ctx.scale(-1, 1); ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0); ctx.translate(-canvas.width, 0);
} }
ctx.drawImage(img, 0, 0); ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
image: canvas, image: canvas,
transparent: true transparent: true
@ -174,12 +202,12 @@ class GroundImage extends Base {
} }
async create() { async create() {
// let gap = Math.abs(Math.cos(Math.PI/180 * this.options.positions.lat)) * (0.0001*this.options.scale) // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.position.lat)) * (0.0001*this.options.scale)
// let fromDegreesArray = [ // let fromDegreesArray = [
// this.options.positions.lng - 0.05, this.options.positions.lat - 0.05, // this.options.position.lng - 0.05, this.options.position.lat - 0.05,
// this.options.positions.lng + 0.05, this.options.positions.lat - 0.05, // this.options.position.lng + 0.05, this.options.position.lat - 0.05,
// this.options.positions.lng + 0.05, this.options.positions.lat + 0.05, // this.options.position.lng + 0.05, this.options.position.lat + 0.05,
// this.options.positions.lng - 0.05, this.options.positions.lat + 0.05, // this.options.position.lng - 0.05, this.options.position.lat + 0.05,
// ] // ]
let response = await fetch(this.replaceHost(this.options.url, this.options.host), { let response = await fetch(this.replaceHost(this.options.url, this.options.host), {
method: 'get', method: 'get',
@ -192,14 +220,15 @@ class GroundImage extends Base {
// let arrayBuffer = await data.arrayBuffer() // let arrayBuffer = await data.arrayBuffer()
// const str = String.fromCharCode(...new Uint8Array(arrayBuffer)); // const str = String.fromCharCode(...new Uint8Array(arrayBuffer));
const img = new Image(); const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = this.replaceHost(this.options.url, this.options.host); img.src = this.replaceHost(this.options.url, this.options.host);
img.onload = () => { img.onload = () => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// 设置画布大小 // 设置画布大小
canvas.width = img.width; canvas.width = img.width * 2;
canvas.height = img.height; canvas.height = img.height * 2;
// 绘制图像 // 绘制图像
if (this.flipeX) { if (this.flipeX) {
ctx.scale(1, -1); ctx.scale(1, -1);
@ -209,14 +238,14 @@ class GroundImage extends Base {
ctx.scale(-1, 1); ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0); ctx.translate(-canvas.width, 0);
} }
ctx.drawImage(img, 0, 0); ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
this.entity = this.sdk.viewer.entities.add({ this.entity = this.sdk.viewer.entities.add({
id: this.options.id, id: this.options.id,
show: this.options.show, show: this.options.show,
rectangle: { rectangle: {
coordinates: new Cesium.CallbackProperty(() => { coordinates: new Cesium.CallbackProperty(() => {
let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale) let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale)
let offset = { let offset = {
x: this.flipeY ? Math.abs(this.options.offset.x - 1) : this.options.offset.x, x: this.flipeY ? Math.abs(this.options.offset.x - 1) : this.options.offset.x,
y: this.flipeX ? Math.abs(this.options.offset.y - 1) : this.options.offset.y, y: this.flipeX ? Math.abs(this.options.offset.y - 1) : this.options.offset.y,
@ -225,19 +254,29 @@ class GroundImage extends Base {
lng: offset.x * ((0.0001 * this.options.scale) * 2), lng: offset.x * ((0.0001 * this.options.scale) * 2),
lat: Math.abs(offset.y - 1) * (gap * 2) lat: Math.abs(offset.y - 1) * (gap * 2)
} }
// let point1 = [this.options.position.lng - offset.lng + 360, this.options.position.lat - offset.lat];
// let point2 = [(this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2) + 360, (this.options.position.lat - offset.lat) + (gap * 2)];
// let midpoint = turf.point([point1[0]+point2[0]/2, point1[1]+point2[1]/2]);
// let rotatedPot = turf.transformRotate(midpoint, -Number(this.options.angle), {pivot: [this.options.position.lng, this.options.position.lat]});
// console.log(midpoint.geometry.coordinates, rotatedPot.geometry.coordinates, this.options.position)
// let fromDegreesArray = [
// rotatedPot.geometry.coordinates[0]-(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]-(0.0001 * this.options.scale),
// rotatedPot.geometry.coordinates[0]+(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]+(0.0001 * this.options.scale),
// ]
let fromDegreesArray = [ let fromDegreesArray = [
this.options.positions.lng - offset.lng, this.options.positions.lat - offset.lat, // this.options.position.lng - offset.lng, this.options.position.lat - offset.lat,
(this.options.positions.lng - offset.lng) + ((0.0001 * this.options.scale) * 2), (this.options.positions.lat - offset.lat) + (gap * 2), // (this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2), (this.options.position.lat - offset.lat) + (gap * 2),
// this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap, this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap,
// // this.options.positions.lng + 0.05, this.options.positions.lat - 0.05, // this.options.position.lng + 0.05, this.options.position.lat - 0.05,
// this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap, this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap,
// // this.options.positions.lng - 0.05, this.options.positions.lat + 0.05, // this.options.position.lng - 0.05, this.options.position.lat + 0.05,
] ]
return Cesium.Rectangle.fromDegrees(...fromDegreesArray) return Cesium.Rectangle.fromDegrees(...fromDegreesArray)
@ -281,7 +320,7 @@ class GroundImage extends Base {
// 编辑框 // 编辑框
async edit(state) { async edit(state) {
let _this = this let _this = this
this.originalOptions = { ...this.options } this.originalOptions = this.deepCopyObj(this.options)
if (this._DialogObject && this._DialogObject.close) { if (this._DialogObject && this._DialogObject.close) {
this._DialogObject.close() this._DialogObject.close()
this._DialogObject = null this._DialogObject = null
@ -312,16 +351,19 @@ class GroundImage extends Base {
this.Dialog.removeCallBack && this.Dialog.removeCallBack() this.Dialog.removeCallBack && this.Dialog.removeCallBack()
}, },
closeCallBack: () => { closeCallBack: () => {
this.previous = null
this.reset() this.reset()
// this.entity.style = new Cesium.Cesium3DTileStyle({ // this.entity.style = new Cesium.Cesium3DTileStyle({
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')", // color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
// show: true, // show: true,
// }); // });
this.positionEditing = false
if (anchorSetDialogObject && anchorSetDialogObject.close) { if (anchorSetDialogObject && anchorSetDialogObject.close) {
anchorSetDialogObject.close() anchorSetDialogObject.close()
} }
this.Dialog.closeCallBack && this.Dialog.closeCallBack() this.Dialog.closeCallBack && this.Dialog.closeCallBack()
YJ.Measure.SetMeasureStatus(false)
this.positionEditing = false
}, },
showCallBack: (show) => { showCallBack: (show) => {
this.show = show this.show = show
@ -491,17 +533,17 @@ class GroundImage extends Base {
return return
} }
this._positionEditing = status this._positionEditing = status
this.previous = {
positions: { ...this.options.positions }
}
if (status === true) { if (status === true) {
this.previous = {
position: { ...this.options.position }
}
this.tip && this.tip.destroy() this.tip && this.tip.destroy()
this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk) this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk)
this.event.mouse_move((movement, cartesian) => { this.event.mouse_move((movement, cartesian) => {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng this.options.position.lng = position.lng
this.options.positions.lat = positions.lat this.options.position.lat = position.lat
this.options.positions.alt = positions.alt this.options.position.alt = position.alt
this.tip.setPosition( this.tip.setPosition(
cartesian, cartesian,
movement.endPosition.x, movement.endPosition.x,
@ -509,21 +551,22 @@ class GroundImage extends Base {
) )
}) })
this.event.mouse_left((movement, cartesian) => { this.event.mouse_left((movement, cartesian) => {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng this.options.position.lng = position.lng
this.options.positions.lat = positions.lat this.options.position.lat = position.lat
this.options.positions.alt = positions.alt this.options.position.alt = position.alt
this.event.mouse_move(() => { }) this.event.mouse_move(() => { })
this.event.mouse_left(() => { }) this.event.mouse_left(() => { })
this.event.mouse_right(() => { }) this.event.mouse_right(() => { })
this.event.gesture_pinck_start(() => { }) this.event.gesture_pinck_start(() => { })
this.event.gesture_pinck_end(() => { }) this.event.gesture_pinck_end(() => { })
this.previous = null
this.positionEditing = false this.positionEditing = false
}) })
this.event.mouse_right((movement, cartesian) => { this.event.mouse_right((movement, cartesian) => {
this.options.positions.lng = this.previous.positions.lng this.options.position.lng = this.previous.position.lng
this.options.positions.lat = this.previous.positions.lat this.options.position.lat = this.previous.position.lat
this.options.positions.alt = this.previous.positions.alt this.options.position.alt = this.previous.position.alt
this.positionEditing = false this.positionEditing = false
}) })
@ -533,16 +576,16 @@ class GroundImage extends Base {
let endTime = new Date() let endTime = new Date()
if (endTime - startTime >= 500) { if (endTime - startTime >= 500) {
// 长按取消 // 长按取消
this.options.positions.lng = this.previous.positions.lng this.options.position.lng = this.previous.position.lng
this.options.positions.lat = this.previous.positions.lat this.options.position.lat = this.previous.position.lat
this.options.positions.alt = this.previous.positions.alt this.options.position.alt = this.previous.position.alt
this.positionEditing = false this.positionEditing = false
} }
else { else {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng this.options.position.lng = position.lng
this.options.positions.lat = positions.lat this.options.position.lat = position.lat
this.options.positions.alt = positions.alt this.options.position.alt = position.alt
this.event.mouse_move(() => { }) this.event.mouse_move(() => { })
this.event.mouse_left(() => { }) this.event.mouse_left(() => { })
this.event.mouse_right(() => { }) this.event.mouse_right(() => { })
@ -562,9 +605,17 @@ class GroundImage extends Base {
this.event.gesture_pinck_end(() => { }) this.event.gesture_pinck_end(() => { })
} }
this.tip && this.tip.destroy() this.tip && this.tip.destroy()
this.options.positions.lng = this.previous.positions.lng if (!this.previous) {
this.options.positions.lat = this.previous.positions.lat this.previous = {
this.options.positions.alt = this.previous.positions.alt position: { ...this.options.position }
}
}
else {
this.options.position.lng = this.previous.position.lng
this.options.position.lat = this.previous.position.lat
this.options.position.alt = this.previous.position.alt
}
} }
} }
@ -596,8 +647,8 @@ class GroundImage extends Base {
if (this.options.position) { if (this.options.position) {
position = { ...this.options.position } position = { ...this.options.position }
} }
else if (this.options.positions) { else if (this.options.position) {
position = { ...this.options.positions[0] } position = { ...this.options.position[0] }
} }
else if (this.options.center) { else if (this.options.center) {
position = { ...this.options.center } position = { ...this.options.center }
@ -630,14 +681,14 @@ class GroundImage extends Base {
}) })
} }
else { else {
let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale) let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale)
let fromDegreesArray = [ let fromDegreesArray = [
[this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap], [this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap],
[this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap], [this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap],
] ]
let positionArray = [] let positionArray = []
let height = 0 let height = 0
let position = this.options.positions let position = this.options.position
let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0); let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0);
let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000); let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000);
let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3()); let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3());
@ -680,9 +731,14 @@ class GroundImage extends Base {
if (!this.entity) { if (!this.entity) {
return return
} }
this.name = this.originalOptions.name this.options = this.deepCopyObj(this.originalOptions)
this.angle = this.originalOptions.angle this.name = this.options.name
this.scale = this.originalOptions.scale this.angle = this.options.angle
this.scale = this.options.scale
this.offset = this.options.offset
this.flipeX = this.options.flipe.x
this.flipeY = this.options.flipe.y
this.show = this.options.show
} }
async remove() { async remove() {
@ -699,9 +755,9 @@ class GroundImage extends Base {
} }
setPosition(v) { setPosition(v) {
this.options.positions.lng = v.position.lng this.options.position.lng = v.position.lng
this.options.positions.lat = v.position.lat this.options.position.lat = v.position.lat
this.options.positions.alt = v.position.alt this.options.position.alt = v.position.alt
} }
} }