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
}
if (thatP.label && thatP.labelShow) {
thatP.label.entity.show = true
thatP.labelShow = true
}
if (thatD.label) {
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">
</div>
<div class="col">
<button class="anchor btn" @click="setAnchorPoint">调整锚点</button>
<button class="anchor btn">调整锚点</button>
</div>
</div>
</div>

184
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.y=false {boolean} 绕Y轴翻转
* @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.confirmCallBack {function} 弹框确认时的回调
* */
@ -35,8 +35,8 @@ class GroundImage extends Base {
this.options.url = options.url
this.options.angle = options.angle || 0
this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1
this.options.positions = options.positions
this.options.offset = { x: 0.5, y: 0.5 }
this.options.position = options.position
this.options.offset = options.offset || { x: 0.5, y: 0.5 }
this.options.flipe = options.flipe || {}
this.options.flipe.x = this.options.flipe.x || false
@ -49,7 +49,7 @@ class GroundImage extends Base {
this.Dialog = _Dialog
this._elms = {};
this.previous = {
positions: { ...this.options.positions }
position: { ...this.options.position }
}
this._EventBinding = new EventBinding()
this.event = new MouseEvent(this.sdk)
@ -62,6 +62,32 @@ class GroundImage extends Base {
}
set 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() {
@ -97,14 +123,15 @@ class GroundImage extends Base {
}
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;
canvas.height = img.height;
canvas.width = img.width * 2;
canvas.height = img.height * 2;
// 绘制图像
if (this.flipeX) {
@ -115,7 +142,7 @@ class GroundImage extends Base {
ctx.scale(-1, 1);
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({
image: canvas,
transparent: true
@ -140,14 +167,15 @@ class GroundImage extends Base {
}
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;
canvas.height = img.height;
canvas.width = img.width * 2;
canvas.height = img.height * 2;
// 绘制图像
if (this.flipeX) {
@ -158,7 +186,7 @@ class GroundImage extends Base {
ctx.scale(-1, 1);
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({
image: canvas,
transparent: true
@ -174,12 +202,12 @@ class GroundImage extends Base {
}
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 = [
// this.options.positions.lng - 0.05, this.options.positions.lat - 0.05,
// this.options.positions.lng + 0.05, this.options.positions.lat - 0.05,
// this.options.positions.lng + 0.05, this.options.positions.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.position.lng + 0.05, this.options.position.lat - 0.05,
// this.options.position.lng + 0.05, this.options.position.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), {
method: 'get',
@ -192,14 +220,15 @@ class GroundImage extends Base {
// let arrayBuffer = await data.arrayBuffer()
// const str = String.fromCharCode(...new Uint8Array(arrayBuffer));
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;
canvas.height = img.height;
canvas.width = img.width * 2;
canvas.height = img.height * 2;
// 绘制图像
if (this.flipeX) {
ctx.scale(1, -1);
@ -209,35 +238,45 @@ class GroundImage extends Base {
ctx.scale(-1, 1);
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({
id: this.options.id,
show: this.options.show,
rectangle: {
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 = {
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,
}
offset = {
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 = [
this.options.positions.lng - offset.lng, this.options.positions.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, this.options.position.lat - offset.lat,
// (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.positions.lng + 0.05, this.options.positions.lat - 0.05,
// this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap,
// // this.options.positions.lng - 0.05, this.options.positions.lat + 0.05,
this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap,
// this.options.position.lng + 0.05, this.options.position.lat - 0.05,
this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap,
// this.options.position.lng - 0.05, this.options.position.lat + 0.05,
]
return Cesium.Rectangle.fromDegrees(...fromDegreesArray)
@ -281,7 +320,7 @@ class GroundImage extends Base {
// 编辑框
async edit(state) {
let _this = this
this.originalOptions = { ...this.options }
this.originalOptions = this.deepCopyObj(this.options)
if (this._DialogObject && this._DialogObject.close) {
this._DialogObject.close()
this._DialogObject = null
@ -312,16 +351,19 @@ class GroundImage extends Base {
this.Dialog.removeCallBack && this.Dialog.removeCallBack()
},
closeCallBack: () => {
this.previous = null
this.reset()
// this.entity.style = new Cesium.Cesium3DTileStyle({
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
// show: true,
// });
this.positionEditing = false
if (anchorSetDialogObject && anchorSetDialogObject.close) {
anchorSetDialogObject.close()
}
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
YJ.Measure.SetMeasureStatus(false)
this.positionEditing = false
},
showCallBack: (show) => {
this.show = show
@ -491,17 +533,17 @@ class GroundImage extends Base {
return
}
this._positionEditing = status
this.previous = {
positions: { ...this.options.positions }
}
if (status === true) {
this.previous = {
position: { ...this.options.position }
}
this.tip && this.tip.destroy()
this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk)
this.event.mouse_move((movement, cartesian) => {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng
this.options.positions.lat = positions.lat
this.options.positions.alt = positions.alt
let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.position.lng = position.lng
this.options.position.lat = position.lat
this.options.position.alt = position.alt
this.tip.setPosition(
cartesian,
movement.endPosition.x,
@ -509,21 +551,22 @@ class GroundImage extends Base {
)
})
this.event.mouse_left((movement, cartesian) => {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng
this.options.positions.lat = positions.lat
this.options.positions.alt = positions.alt
let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.position.lng = position.lng
this.options.position.lat = position.lat
this.options.position.alt = position.alt
this.event.mouse_move(() => { })
this.event.mouse_left(() => { })
this.event.mouse_right(() => { })
this.event.gesture_pinck_start(() => { })
this.event.gesture_pinck_end(() => { })
this.previous = null
this.positionEditing = false
})
this.event.mouse_right((movement, cartesian) => {
this.options.positions.lng = this.previous.positions.lng
this.options.positions.lat = this.previous.positions.lat
this.options.positions.alt = this.previous.positions.alt
this.options.position.lng = this.previous.position.lng
this.options.position.lat = this.previous.position.lat
this.options.position.alt = this.previous.position.alt
this.positionEditing = false
})
@ -533,16 +576,16 @@ class GroundImage extends Base {
let endTime = new Date()
if (endTime - startTime >= 500) {
// 长按取消
this.options.positions.lng = this.previous.positions.lng
this.options.positions.lat = this.previous.positions.lat
this.options.positions.alt = this.previous.positions.alt
this.options.position.lng = this.previous.position.lng
this.options.position.lat = this.previous.position.lat
this.options.position.alt = this.previous.position.alt
this.positionEditing = false
}
else {
let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.positions.lng = positions.lng
this.options.positions.lat = positions.lat
this.options.positions.alt = positions.alt
let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
this.options.position.lng = position.lng
this.options.position.lat = position.lat
this.options.position.alt = position.alt
this.event.mouse_move(() => { })
this.event.mouse_left(() => { })
this.event.mouse_right(() => { })
@ -562,9 +605,17 @@ class GroundImage extends Base {
this.event.gesture_pinck_end(() => { })
}
this.tip && this.tip.destroy()
this.options.positions.lng = this.previous.positions.lng
this.options.positions.lat = this.previous.positions.lat
this.options.positions.alt = this.previous.positions.alt
if (!this.previous) {
this.previous = {
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) {
position = { ...this.options.position }
}
else if (this.options.positions) {
position = { ...this.options.positions[0] }
else if (this.options.position) {
position = { ...this.options.position[0] }
}
else if (this.options.center) {
position = { ...this.options.center }
@ -630,14 +681,14 @@ class GroundImage extends Base {
})
}
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 = [
[this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.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],
[this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap],
]
let positionArray = []
let height = 0
let position = this.options.positions
let position = this.options.position
let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0);
let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000);
let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3());
@ -680,9 +731,14 @@ class GroundImage extends Base {
if (!this.entity) {
return
}
this.name = this.originalOptions.name
this.angle = this.originalOptions.angle
this.scale = this.originalOptions.scale
this.options = this.deepCopyObj(this.originalOptions)
this.name = this.options.name
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() {
@ -699,9 +755,9 @@ class GroundImage extends Base {
}
setPosition(v) {
this.options.positions.lng = v.position.lng
this.options.positions.lat = v.position.lat
this.options.positions.alt = v.position.alt
this.options.position.lng = v.position.lng
this.options.position.lat = v.position.lat
this.options.position.alt = v.position.alt
}
}