import { getHost } from "../../../../../on"; import { html } from "./_element"; import Dialog from '../../../../Element/Dialog'; import EventBinding from '../../../../Element/Dialog/eventBinding'; import cy_tabs from "../../../../Element/cy_html_tabs"; import EditGltf from "../../../../ModelController/EditGltf"; import LabelObject from "../../../LabelObject"; import { openLeftClick, closeLeftClick, openRightClick, closeRightClick, getLeftClickState, getRightClickState } from "../../../../../Global/ClickCallback" import BaseModel from "../index"; import DrawPoint from '../../../../../Draw/drawPoint.js' import { legp } from '../../../../Element/datalist'; import { getFontList, getFontFamilyName } from '../../../../Element/fontSelect' import { syncData } from '../../../../../Global/MultiViewportMode' import { setSplitDirection, syncSplitData, setActiveId, getSdk } from '../../../../../Global/SplitScreen' import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../../../Global/global' class Model extends BaseModel { #timeoutEventObject = null /** * @constructor * @description 加载模型 * @param sdk {object} sdk * @param options {object} 模型参数 * @param options.id {string} 对象id * @param options.show=true {boolean} 模型显隐 * @param options.name {string} 名称 * @param options.url {string} 资源地址 * @param options.position {object} 模型位置 * @param options.position.lng {number} 经度 * @param options.position.lat {number} 纬度 * @param options.position.alt {number} 高度 * @param options.scale {object} 比例 * @param options.scale.x=1 {number} 比例 * @param options.scale.y=1 {number} 比例 * @param options.scale.z=1 {number} 比例 * @param options.maximumScale=100 {number} 最大比例 * @param options.minimumPixelSize=60 {number} 最小像素 * @param options.scaleByDistance=true {boolean} 随视野缩放 * @param options.rotate {object} 旋转角度 * @param options.rotate.x {number} x轴旋转度数 * @param options.rotate.y {number} y轴旋转度数 * @param options.rotate.z {number} z轴旋转度数 * @param options.img {string} 图片地址 * */ constructor(earth, options = {}, _Dialog = {}) { super(earth, options, _Dialog = {}) if (!options.position) { console.warn("position is required!") return } if (!options.position.lng && options.position.lng !== 0) { console.warn("lng is required!") return } if (!options.position.lat && options.position.lat !== 0) { console.warn("lat is required!") return } if(this.options.earth) { delete this.options.earth } this.picking = true this.options.name = options.name || '未命名对象' this.options.color = options.color || '#ffffff' // this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1 if (typeof options.scale === 'number') { this.options.scale = {} this.options.scale.x = options.scale this.options.scale.y = options.scale this.options.scale.z = options.scale } else { this.options.scale = options.scale || {} this.options.scale.x = (this.options.scale.x || this.options.scale.x === 0) ? this.options.scale.x : 1 this.options.scale.y = (this.options.scale.y || this.options.scale.y === 0) ? this.options.scale.y : 1 this.options.scale.z = (this.options.scale.z || this.options.scale.z === 0) ? this.options.scale.z : 1 } this.options.url = options.url this.options.maximumScale = (options.maximumScale || options.maximumScale === 0) ? options.maximumScale : 100 this.options.minimumPixelSize = (options.minimumPixelSize || options.minimumPixelSize === 0) ? options.minimumPixelSize : 60 this.options.position = options.position = (options.position || {}) this.options.position = { lng: options.position.lng, lat: options.position.lat, alt: options.position.alt } this.options.scaleByDistance = (options.scaleByDistance || options.scaleByDistance === false) ? options.scaleByDistance : true this.options.rotate = options.rotate = (options.rotate || {}) this.options.rotate.x = options.rotate.x || 0 this.options.rotate.y = options.rotate.y || 0 this.options.rotate.z = options.rotate.z || 0 options.label = options.label || {} this.options.label = { text: this.options.name, show: options.label.show || false, position: options.label.position, fontSize: (options.label.fontSize || options.label.fontSize === 0) ? options.label.fontSize : 20, fontFamily: options.label.fontFamily ? options.label.fontFamily : 0, color: options.label.color || '#ffffff', lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4, pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20, backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'], lineColor: options.label.lineColor || '#00ffff80', scaleByDistance: options.label.scaleByDistance || false, near: (options.label.near || options.label.near === 0) ? options.label.near : 2000, far: (options.label.far || options.label.far === 0) ? options.label.far : 100000, } this.options.attribute = options.attribute || {} this.options.attribute.vr = this.options.attribute.vr || {} this.options.attribute.vr.content = this.options.attribute.vr.content || [] this.options.attribute.link = this.options.attribute.link || {} this.options.attribute.link.content = this.options.attribute.link.content || [] this.options.attribute.camera = this.options.attribute.camera || {} this.options.attribute.camera = this.options.attribute.camera.content || [] this.options.attribute.ISC = this.options.attribute.ISC || {} this.options.attribute.ISC.content = this.options.attribute.ISC.content || [] this.options.attribute.goods = this.options.attribute.goods || {} this.options.attribute.goods.content = this.options.attribute.goods.content || [] this.options.attributeType = options.attributeType || 'richText' this._elms = {}; this.entity = { id: this.options.id } this.positionCallBack = null this.rotationCallback = null this.onClickCallback = null this._DialogObject = null this.Dialog = _Dialog this._EventBinding = new EventBinding() this.on() } get type() { return "glb" } async loadModel(url) { syncData(this.sdk, this.options.id) if (!this.sdk || !this.sdk.viewer || !this.sdk.viewer.scene) { return } if (!url.startsWith("http")) { //说明是本地的json,在磁盘中存在的 if (!url.includes(":")) { if (this.options.host) { let o = new URL(url, this.options.host) url = o.href } } } // this.handler = new Cesium.ScreenSpaceEventHandler( // this.sdk.viewer.canvas // ) // this.handler.setInputAction((event) => { // let pickedObject = this.sdk.viewer.scene.pick(event.position); // // 判断是否拾取到模型 // if (Cesium.defined(pickedObject)) { // let cartesian = this.sdk.viewer.scene.pickPosition(event.position); // // 是否获取到空间坐标 // if (Cesium.defined(cartesian)) { // // // 空间坐标转世界坐标(弧度) // let cartographic = Cesium.Cartographic.fromCartesian(cartesian); // // 弧度转为角度(经纬度) // let lon = Cesium.Math.toDegrees(cartographic.longitude); // let lat = Cesium.Math.toDegrees(cartographic.latitude); // //模型高度 // let height = cartographic.height; // // console.log("模型表面的经纬度高程是:", { // // lng: lon, // // lat: lat, // // alt: height, // // }); // } // } // }, Cesium.ScreenSpaceEventType.LEFT_CLICK) let _this = this this.originalOptions = this.deepCopyObj(this.options) let options = { id: this.options.id, url: url, show: this.options.show, // 是否显示模型 maximumScale: this.options.scaleByDistance ? undefined : this.options.maximumScale, minimumPixelSize: this.options.scaleByDistance ? undefined : this.options.minimumPixelSize, // scale: this.options.scale, // minimumPixelSize: 1 } if (Number(Cesium.VERSION.split('.')[1]) >= 107) { this.entity = await Cesium.Model.fromGltfAsync(options) } else { this.entity = await Cesium.Model.fromGltf(options) } this.entity.imageBasedLighting.luminanceAtZenith = 0.6 this.entity.color = Cesium.Color.fromCssColorString(this.options.color) // this.entity.colorBlendMode = 1 // 将模型添加到场景中 await this.sdk.viewer.scene.primitives.add(this.entity); let cartographic = Cesium.Cartographic.fromDegrees(this.options.position.lng, this.options.position.lat, this.options.position.alt); let position = this.sdk.viewer.scene.globe.ellipsoid.cartographicToCartesian(cartographic); this.entity.position = position; this.entity.rotate = { ...this.options.rotate }; this.entity.customScale = this.options.scale; // 设置模型的旋转角度,使其水平放置于地面 this.entity.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position) // 模型大小比例 // Cesium.Matrix4.multiplyByScale(matrix, new Cesium.Cartesian3(this.options.scale, this.options.scale, this.options.scale), this.entity.modelMatrix) // Cesium.Matrix4.multiplyByScale(matrix, new Cesium.Cartesian3(this.options.scale, this.options.scale, this.options.scale), this.entity.modelMatrix) if (Number(Cesium.VERSION.split('.')[1]) >= 107) { this.entity.readyEvent.addEventListener(() => { this.entity.originalBoundingSphereRadius = this.entity.boundingSphere.radius this.editObj = new EditGltf(this.sdk, this.entity) this.editObj.transformCallBack = this.rotationEditingCallBack this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) // 标签 if (!this.label) { this.label = new LabelObject(this.sdk, { id: this.options.id, show: this.options.show ? this.options.label.show : false, position: [this.options.position.lng, this.options.position.lat, this.options.position.alt], text: this.options.name, fontSize: this.options.label.fontSize, fontFamily: this.options.label.fontFamily ? this.options.label.fontFamily : 0, color: this.options.label.color, pixelOffset: this.options.label.pixelOffset, backgroundColor: this.options.label.backgroundColor, lineColor: this.options.label.lineColor, lineWidth: this.options.label.lineWidth, scaleByDistance: this.options.label.scaleByDistance, near: this.options.label.near, far: this.options.label.far }, this.entity) } this.entity.isMove = true clearTimeout(this.#timeoutEventObject) this.#timeoutEventObject = setTimeout(() => { this.entity && (this.entity.isMove = false) }, 500); }) this.activeAnimate = this.options.activeAnimate this.modelAnimations = this.entity.loader.components.animations } else { this.entity.readyPromise.then((entity) => { this.entity.originalBoundingSphereRadius = this.entity.boundingSphere.radius this.editObj = new EditGltf(this.sdk, this.entity) this.editObj.transformCallBack = this.rotationEditingCallBack this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) // 标签 if (!this.label) { this.label = new LabelObject(this.sdk, { id: this.options.id, show: this.options.show ? this.options.label.show : false, position: [this.options.position.lng, this.options.position.lat, this.options.position.alt], text: this.options.name, fontSize: this.options.label.fontSize, fontFamily: this.options.label.fontFamily ? this.options.label.fontFamily : 0, color: this.options.label.color, pixelOffset: this.options.label.pixelOffset, backgroundColor: this.options.label.backgroundColor, lineColor: this.options.label.lineColor, lineWidth: this.options.label.lineWidth, scaleByDistance: this.options.label.scaleByDistance, near: this.options.label.near, far: this.options.label.far, ground: false, }, this.entity) } this.entity.isMove = true clearTimeout(this.#timeoutEventObject) this.#timeoutEventObject = setTimeout(() => { this.entity && (this.entity.isMove = false) }, 500); // 动画 // entity.activeAnimations.add({ // index: 1, // loop: Cesium.ModelAnimationLoop.REPEAT, // speedup: 2, // reverse: false // }) this.activeAnimate = this.options.activeAnimate this.modelAnimations = this.entity.loader.components.animations }) } syncSplitData(this.sdk, this.options.id) } async getModelAnimations() { return new Promise((resolve, reject) => { if (Number(Cesium.VERSION.split('.')[1]) >= 107) { this.entity.readyEvent.addEventListener(() => { this.modelAnimations = this.entity.loader.components.animations resolve(this.modelAnimations) }) } else { this.entity.readyPromise.then((entity) => { this.modelAnimations = this.entity.loader.components.animations resolve(this.modelAnimations) }) } }) } // async loadModelBy2D(url) { // this.entity = this.sdk.viewer.entities.add({ // show: this.options.show, // rectangle: { // coordinates: new Cesium.CallbackProperty(() => { // let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale) // let fromDegreesArray = [ // 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, // ] // return Cesium.Rectangle.fromDegrees(...fromDegreesArray) // }, false), // material: this.options.url, // rotation: new Cesium.CallbackProperty(() => { // return Cesium.Math.toRadians(this.options.angle) // }, false), // stRotation: new Cesium.CallbackProperty(() => { // return Cesium.Math.toRadians(this.options.angle) // }, false) // }, // }) // if (this.sdk.viewer._element.className === 'cesium-viewer 2d') { // this.entity.rectangle.height = 0 // } // } remove() { super.remove() this.label && this.label.remove() this.positionEditing = false this.sdk.viewer.scene.primitives.remove(this.entity); this.entity = null if (this._DialogObject) { this._DialogObject.close() this._DialogObject = null } } async flyTo() { setActiveViewer(0) closeRotateAround(this.sdk) closeViewFollow(this.sdk) if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { let orientation = { heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) } let lng = this.options.customView.relativePosition.lng let lat = this.options.customView.relativePosition.lat let alt = this.options.customView.relativePosition.alt let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) let position = { lng: 0, lat: 0 } if (this.options.position) { position = { ...this.options.position } } else if (this.options.positions) { position = { ...this.options.positions[0] } } else if (this.options.center) { position = { ...this.options.center } } else if (this.options.start) { position = { ...this.options.start } } else { if (this.options.hasOwnProperty('lng')) { position.lng = this.options.lng } if (this.options.hasOwnProperty('lat')) { position.lat = this.options.lat } if (this.options.hasOwnProperty('alt')) { position.alt = this.options.alt } } // 如果没有高度值,则获取紧贴高度计算 if (!position.hasOwnProperty('alt')) { position.alt = await this.getClampToHeight(position) } lng = this.options.customView.relativePosition.lng + position.lng lat = this.options.customView.relativePosition.lat + position.lat alt = this.options.customView.relativePosition.alt + position.alt destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) this.sdk.viewer.camera.flyTo({ destination: destination, orientation: orientation }) } else { if (Number(Cesium.VERSION.split('.')[1]) >= 107) { if (this.entity.ready) { let boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(this.options.position.lng, this.options.position.lat, this.options.position.alt), this.entity.originalBoundingSphereRadius * this.options.scale.z * 2) this.sdk.viewer.camera.flyToBoundingSphere(boundingSphere) } } else { this.entity.readyPromise.then(() => { let boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(this.options.position.lng, this.options.position.lat, this.options.position.alt), (this.entity.originalBoundingSphereRadius || this.entity.boundingSphere.radius) * this.options.scale.z * 2) this.sdk.viewer.camera.flyToBoundingSphere(boundingSphere) }) } } // this.sdk.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(this.options.position.lng, this.options.position.lat, this.options.position.alt)}) } on() { return this.add() } setDefaultValue() { super.setDefaultValue() this.options.host = this.options.host || getHost() this.options.url = this.options.url || "" } get color() { return this.options.color } set color(v) { this.options.color = v this.entity.color = Cesium.Color.fromCssColorString(v) if (this._elms.color) { this._elms.color.forEach((item, i) => { let colorPicker = new ewPlugins('colorpicker', { el: item.el, size: 'mini',//颜色box类型 alpha: true,//是否开启透明度 defaultColor: v, disabled: false,//是否禁止打开颜色选择器 openPickerAni: 'opacity',//打开颜色选择器动画 sure: (c) => { this.color = c },//点击确认按钮事件回调 clear: () => { this.color = 'rgba(255,255,255,1)' },//点击清空按钮事件回调 }) this._elms.color[i] = colorPicker }) } } get lng() { return this.options.position.lng } set lng(v) { this.options.position = { lng: v, lat: this.options.position.lat, alt: this.options.position.alt } this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this.label && (this.label.position = [this.options.position.lng, this.options.position.lat, this.options.position.alt]) this._elms.lng && this._elms.lng.forEach((item) => { item.value = v }) } get lat() { return this.options.position.lat } set lat(v) { this.options.position = { lng: this.options.position.lng, lat: v, alt: this.options.position.alt } this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this.label && (this.label.position = [this.options.position.lng, this.options.position.lat, this.options.position.alt]) this._elms.lat && this._elms.lat.forEach((item) => { item.value = v }) } get alt() { return this.options.position.alt } set alt(v) { this.options.position = { lng: this.options.position.lng, lat: this.options.position.lat, alt: v } this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this.label && (this.label.position = [Number(this.options.position.lng), Number(this.options.position.lat), Number(this.options.position.alt)]) this._elms.alt && this._elms.alt.forEach((item) => { item.value = v }) } get maximumScale() { return this.options.maximumScale } set maximumScale(v) { this.options.maximumScale = v this.entity.maximumScale = this.scaleByDistance ? undefined : v this._elms.maximumScale && this._elms.maximumScale.forEach((item) => { item.value = v }) } get minimumPixelSize() { return this.options.minimumPixelSize } set minimumPixelSize(v) { this.options.minimumPixelSize = v this.entity.minimumPixelSize = this.scaleByDistance ? undefined : this.options.minimumPixelSize this._elms.minimumPixelSize && this._elms.minimumPixelSize.forEach((item) => { item.value = v }) } get scaleByDistance() { return this.options.scaleByDistance } set scaleByDistance(v) { this.options.scaleByDistance = v this.entity.maximumScale = v ? undefined : this.maximumScale this.entity.minimumPixelSize = v ? undefined : this.options.minimumPixelSize this._elms.scaleByDistance && this._elms.scaleByDistance.forEach((item) => { item.checked = v }) } get rotateX() { return this.options.rotate.x } set rotateX(v) { this.options.rotate.x = v this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.rotateX && this._elms.rotateX.forEach((item) => { item.value = v }) } get rotateY() { return this.options.rotate.y } set rotateY(v) { this.options.rotate.y = v this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.rotateY && this._elms.rotateY.forEach((item) => { item.value = v }) } get rotateZ() { return this.options.rotate.z } set rotateZ(v) { this.options.rotate.z = v this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.rotateZ && this._elms.rotateZ.forEach((item) => { item.value = v }) } // get scale() { // return this.options.scale // } // set scale(v) { // this.options.scale = v // this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) // this._elms.scale && this._elms.scale.forEach((item) => { // item.value = v // }) // } get scaleX() { return this.options.scale.x } set scaleX(v) { this.options.scale.x = Number(Number(v).toFixed(2)) this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.scaleX && this._elms.scaleX.forEach((item) => { item.value = this.options.scale.x }) } get scaleY() { return this.options.scale.y } set scaleY(v) { this.options.scale.y = Number(Number(v).toFixed(2)) this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.scaleY && this._elms.scaleY.forEach((item) => { item.value = this.options.scale.y }) } get scaleZ() { return this.options.scale.z } set scaleZ(v) { this.options.scale.z = Number(Number(v).toFixed(2)) this.updateModel(this.options.position.lng, this.options.position.lat, this.options.position.alt, this.options.rotate.x, this.options.rotate.y, this.options.rotate.z, this.options.scale) this._elms.scaleZ && this._elms.scaleZ.forEach((item) => { item.value = this.options.scale.z }) } get labelShow() { return this.options.label.show } set labelShow(v) { this.options.label.show = v if (this.show) { this.label && (this.label.show = v) } else { this.label && (this.label.show = false) } this._elms.labelShow && this._elms.labelShow.forEach((item) => { item.checked = v }) } get labelFontFamily() { return this.options.label.fontFamily } set labelFontFamily(v) { this.options.label.fontFamily = v || 0 this.label && (this.label.fontFamily = this.options.label.fontFamily) let name = getFontFamilyName(this.labelFontFamily) || '' this._elms.labelFontFamily && this._elms.labelFontFamily.forEach(item => { item.value = name }) } get labelColor() { return this.options.label.color } set labelColor(v) { this.options.label.color = v this.label && (this.label.color = v) if (this._elms.labelColor) { this._elms.labelColor.forEach((item, i) => { let labelColorPicker = new ewPlugins('colorpicker', { el: item.el, size: 'mini',//颜色box类型 alpha: true,//是否开启透明度 defaultColor: this.labelColor, disabled: false,//是否禁止打开颜色选择器 openPickerAni: 'opacity',//打开颜色选择器动画 sure: (color) => { this.labelColor = color },//点击确认按钮事件回调 clear: () => { this.labelColor = 'rgba(255,255,255,1)' },//点击清空按钮事件回调 }) this._elms.labelColor[i] = labelColorPicker }) } } get labelFontSize() { return this.options.label.fontSize } set labelFontSize(v) { this.options.label.fontSize = v this.label && (this.label.fontSize = v) this._elms.labelFontSize && this._elms.labelFontSize.forEach((item) => { item.value = v }) } get labelScaleByDistance() { return this.options.label.scaleByDistance } set labelScaleByDistance(v) { this.options.label.scaleByDistance = v this.label && (this.label.scaleByDistance = v) this._elms.labelScaleByDistance && this._elms.labelScaleByDistance.forEach((item) => { item.checked = v }) } get labelNear() { return this.options.label.near } set labelNear(v) { let near = v if (near > this.labelFar) { near = this.labelFar } this.options.label.near = near this.label.near = near this._elms.labelNear && this._elms.labelNear.forEach((item) => { item.value = near }) } get labelFar() { return this.options.label.far } set labelFar(v) { let far = v if (far < this.labelNear) { far = this.labelNear } this.options.label.far = far this.label.far = far this._elms.labelFar && this._elms.labelFar.forEach((item) => { item.value = far }) } get labelLineWidth() { return this.options.label.lineWidth } set labelLineWidth(v) { this.options.label.lineWidth = v this.label && (this.label.lineWidth = v) this._elms.labelLineWidth && this._elms.labelLineWidth.forEach((item) => { item.value = v }) } get labelPixelOffset() { return this.options.label.pixelOffset } set labelPixelOffset(v) { this.options.label.pixelOffset = v this.label && (this.label.pixelOffset = v) this._elms.labelPixelOffset && this._elms.labelPixelOffset.forEach((item) => { item.value = v }) } get labelLineColor() { return this.options.label.lineColor } set labelLineColor(v) { this.options.label.lineColor = v this.label && (this.label.lineColor = v) if (this._elms.labelLineColor) { this._elms.labelLineColor.forEach((item, i) => { let lineColorPicker = new ewPlugins('colorpicker', { el: item.el, size: 'mini',//颜色box类型 alpha: true,//是否开启透明度 defaultColor: this.labelLineColor, disabled: false,//是否禁止打开颜色选择器 openPickerAni: 'opacity',//打开颜色选择器动画 sure: (color) => { this.labelLineColor = color },//点击确认按钮事件回调 clear: () => { this.labelLineColor = 'rgba(0,255,255,0.5)' },//点击清空按钮事件回调 }) this._elms.labelLineColor[i] = lineColorPicker }) } } get labelBackgroundColorStart() { return this.options.label.backgroundColor[0] } set labelBackgroundColorStart(v) { this.options.label.backgroundColor[0] = v this.label && (this.label.backgroundColor = [v, this.label.backgroundColor[1]]) if (this._elms.labelBackgroundColorStart) { this._elms.labelBackgroundColorStart.forEach((item, i) => { let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', { el: item.el, size: 'mini',//颜色box类型 alpha: true,//是否开启透明度 defaultColor: this.labelBackgroundColorStart, disabled: false,//是否禁止打开颜色选择器 openPickerAni: 'opacity',//打开颜色选择器动画 sure: (color) => { this.labelBackgroundColorStart = color },//点击确认按钮事件回调 clear: () => { this.labelBackgroundColorStart = 'rgba(255,255,255,1)' },//点击清空按钮事件回调 }) this._elms.labelBackgroundColorStart[i] = labelBackgroundColorStartPicker }) } } get labelBackgroundColorEnd() { return this.options.label.backgroundColor[1] } set labelBackgroundColorEnd(v) { this.options.label.backgroundColor[1] = v this.label && (this.label.backgroundColor = [this.label.backgroundColor[0], v]) if (this._elms.labelBackgroundColorEnd) { this._elms.labelBackgroundColorEnd.forEach((item, i) => { let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', { el: item.el, size: 'mini',//颜色box类型 alpha: true,//是否开启透明度 defaultColor: this.labelBackgroundColorEnd, disabled: false,//是否禁止打开颜色选择器 openPickerAni: 'opacity',//打开颜色选择器动画 sure: (color) => { this.labelBackgroundColorEnd = color },//点击确认按钮事件回调 clear: () => { this.labelBackgroundColorEnd = 'rgba(255,255,255,1)' },//点击清空按钮事件回调 }) this._elms.labelBackgroundColorEnd[i] = labelBackgroundColorEndPicker }) } } get attributeType() { return this.options.attributeType } set attributeType(v) { this.options.attributeType = v this._elms.attributeType && this._elms.attributeType.forEach((item) => { item.value = v }) let attributeContent = this._DialogObject._element.content.getElementsByClassName('attribute-content') for (let i = 0; i < attributeContent.length; i++) { if (attributeContent[i].className.indexOf('attribute-content-' + v) > -1) { attributeContent[i].style.display = 'block'; } else { attributeContent[i].style.display = 'none'; } } } get attributeLink() { return this.options.attribute.link.content } set attributeLink(v) { this.options.attribute.link.content = v if (!this._DialogObject || !this._DialogObject._element || !this._DialogObject._element.content || this._DialogObject._element.content.getElementsByClassName('attribute-content-link').length == 0) { return } let table = this._DialogObject._element.content.getElementsByClassName('attribute-content-link')[1].getElementsByClassName('table')[0] let tableContent = table.getElementsByClassName('table-body')[0] tableContent.innerHTML = '' if (this.options.attribute.link.content.length > 0) { table.getElementsByClassName('table-empty')[0].style.display = 'none' } else { table.getElementsByClassName('table-empty')[0].style.display = 'flex' } for (let i = 0; i < this.options.attribute.link.content.length; i++) { let tr = `