| | |
| | | <template> |
| | | <div class="attributeInfo"> |
| | | <!-- 标题 --> |
| | | <div |
| | | class="attributeTitle" |
| | | @mousemove="setMouseMove(1)" |
| | | @mouseout="setMouseMove(2)" |
| | | > |
| | | <div class="attributeTitle" @mousemove="setMouseMove(1)" @mouseout="setMouseMove(2)"> |
| | | <div class="attributeLabel">属性信息</div> |
| | | <div |
| | | class="attributeClose" |
| | | @click="setAttributeInfoClose" |
| | | > |
| | | <el-icon |
| | | :size="20" |
| | | style="color:#d6e4ff" |
| | | > |
| | | <div class="attributeClose" @click="setAttributeInfoClose"> |
| | | <el-icon :size="20" style="color:#d6e4ff"> |
| | | <Close /> |
| | | </el-icon> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentLabel"> <label>名称</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | @change="setEntityNameChange" |
| | | v-model="fromLine.cnName" |
| | | ></el-input> |
| | | <div class="contentmenu"><el-input size="mini" @change="setEntityNameChange" v-model="fromLine.cnName"></el-input> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="showEntity.label" |
| | | > |
| | | <div class="contentBox" v-show="showEntity.label"> |
| | | <div class="contentLabel"> <label>内容</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | v-model="fromLine.text" |
| | | ></el-input></div> |
| | | <div class="contentmenu"><el-input size="mini" v-model="fromLine.text"></el-input></div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="showEntity.label" |
| | | > |
| | | <div class="contentBox" v-show="showEntity.label"> |
| | | <div class="contentLabel"> <label>字体</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | v-model="fromLine.font" |
| | | ></el-input></div> |
| | | <div class="contentmenu"><el-input size="mini" v-model="fromLine.font"></el-input></div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="showEntity.label" |
| | | > |
| | | <div class="contentBox" v-show="showEntity.label"> |
| | | <div class="contentLabel"> <label>比例大小</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | v-model="fromLine.scale" |
| | | ></el-input></div> |
| | | <div class="contentmenu"><el-input size="mini" v-model="fromLine.scale"></el-input></div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="showEntity.point" |
| | | > |
| | | <div class="contentBox" v-show="showEntity.point"> |
| | | <div class="contentLabel"> <label>大小</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | @change="setEntitySizeChange" |
| | | v-model="fromLine.size" |
| | | ></el-input> |
| | | <div class="contentmenu"><el-input size="mini" @change="setEntitySizeChange" v-model="fromLine.size"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentBox" v-show="showEntity.setclampToGround"> |
| | | <div class="contentLabel"> |
| | | <label v-show="!showEntity.clampToGround">是否被遮挡</label> |
| | | <label v-show="showEntity.clampToGround">是否贴地</label> |
| | | </div> |
| | | <div class="contentmenu"> <el-switch |
| | | v-model="fromLine.heightReference" |
| | | @change="setEntityHeightReferenceChange" |
| | | /></div> |
| | | <div class="contentmenu"> <el-switch v-model="fromLine.heightReference" |
| | | @change="setEntityHeightReferenceChange" /></div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentLabel"> <label>填充色</label></div> |
| | | <div class="contentmenu"> <el-color-picker |
| | | size="small" |
| | | v-model="fromLine.material" |
| | | @change="setEntityMaterColorChange" |
| | | /></div> |
| | | <div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.material" |
| | | @change="setEntityMaterColorChange" /></div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentLabel"> <label>填充透明度</label></div> |
| | | <div class="contentmenu"> <el-slider |
| | | size="small" |
| | | v-model="fromLine.materialAlpha" |
| | | @change="setEntityMaterColorChange" |
| | | :step="0.1" |
| | | :max="1" |
| | | :min="0" |
| | | /></div> |
| | | <div class="contentmenu"> <el-slider size="small" v-model="fromLine.materialAlpha" |
| | | @change="setEntityMaterColorChange" :step="0.1" :max="1" :min="0" /></div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentLabel"> <label>是否显示边框</label></div> |
| | | <div class="contentmenu"> <el-switch |
| | | @change="setEntityOutLineShowReferenceChange" |
| | | v-model="fromLine.outline" |
| | | /> |
| | | <div class="contentmenu"> <el-switch @change="setEntityOutLineShowReferenceChange" v-model="fromLine.outline" /> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="fromLine.outline" |
| | | > |
| | | <div class="contentBox" v-show="fromLine.outline"> |
| | | <div class="contentLabel"> <label>边框大小</label></div> |
| | | <div class="contentmenu"> |
| | | <el-input-number |
| | | v-model="fromLine.width" |
| | | :min="0" |
| | | size="small" |
| | | @change="setEntityOutLineWidthReferenceChange" |
| | | controls-position="right" |
| | | /> |
| | | <el-input-number v-model="fromLine.width" :min="0" size="small" @change="setEntityOutLineWidthReferenceChange" |
| | | controls-position="right" /> |
| | | |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="fromLine.outline" |
| | | > |
| | | <div class="contentBox" v-show="fromLine.outline"> |
| | | <div class="contentLabel"> <label>边框色</label></div> |
| | | <div class="contentmenu"> <el-color-picker |
| | | size="small" |
| | | v-model="fromLine.outlineColor" |
| | | @change="setEntityOutLineColorChange" |
| | | /></div> |
| | | <div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.outlineColor" |
| | | @change="setEntityOutLineColorChange" /></div> |
| | | </div> |
| | | <div |
| | | class="contentBox" |
| | | v-show="fromLine.outline" |
| | | > |
| | | <div class="contentBox" v-show="fromLine.outline"> |
| | | <div class="contentLabel"> <label>边框透明度</label></div> |
| | | <div class="contentmenu"> <el-slider |
| | | size="small" |
| | | v-model="fromLine.outlineAlpha" |
| | | :step="0.1" |
| | | :max="1" |
| | | :min="0" |
| | | @change="setEntityOutLineColorChange" |
| | | /></div> |
| | | <div class="contentmenu"> <el-slider size="small" v-model="fromLine.outlineAlpha" :step="0.1" :max="1" :min="0" |
| | | @change="setEntityOutLineColorChange" /></div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="contentLabel"> <label>最小可视距离</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | v-model="fromLine.near" |
| | | @change="setEntityNearChange" |
| | | ></el-input> |
| | | <div class="contentmenu"><el-input size="mini" v-model="fromLine.near" @change="setEntityNearChange"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox contentBottom "> |
| | | <div class="contentLabel"> <label>最大可视距离</label></div> |
| | | <div class="contentmenu"><el-input |
| | | size="mini" |
| | | v-model="fromLine.far" |
| | | @change="setEntityFarChange" |
| | | ></el-input> |
| | | <div class="contentmenu"><el-input size="mini" v-model="fromLine.far" @change="setEntityFarChange"></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | label: false, |
| | | point: false, |
| | | clampToGround: false, |
| | | setclampToGround: true, |
| | | }); |
| | | const entity = ref(null); |
| | | const entityType = ref(null); |
| | |
| | | switch (entityType.value) { |
| | | case "point": |
| | | entity.value.point.disableDepthTestDistance = |
| | | fromLine.value.heightReference == true ? null : false; |
| | | fromLine.value.heightReference == true ? null : Number.POSITIVE_INFINITY; |
| | | break; |
| | | case "label": |
| | | entity.value.label.disableDepthTestDistance = |
| | |
| | | break; |
| | | case "polyline": |
| | | entity.value.polyline.clampToGround = fromLine.value.heightReference; |
| | | |
| | | break; |
| | | |
| | | } |
| | | }; |
| | | const setEntityOutLineWidthReferenceChange = () => { |
| | |
| | | entity.value.label.outlineWidth = fromLine.value.width; |
| | | break; |
| | | case "polyline": |
| | | setPolylineEntityColor(); |
| | | entity.value.polyline.material.outlineWidth._value = fromLine.value.width; |
| | | break; |
| | | case "rectangle": |
| | | entity.value.rectangle.outlineWidth._value = fromLine.value.width; |
| | | break; |
| | | case "polygon": |
| | | entity.value.polygon.outlineWidth._value = fromLine.value.width; |
| | | break; |
| | | } |
| | | }; |
| | | |
| | | const setPolylineEntityColor = () => { |
| | | const outlineWidth = 0; |
| | | if (fromLine.value.outline) { |
| | | outlineWidth = fromLine.value.width; |
| | | } |
| | | }; |
| | | |
| | | const setEntityOutLineShowReferenceChange = () => { |
| | | var type = entity.value.GeoType; |
| | | if (type == "point") { |
| | |
| | | } else { |
| | | entity.value.label.style = Cesium.LabelStyle.FILL; |
| | | } |
| | | } else if (type == 'polyline') { |
| | | if (fromLine.value.outline) { |
| | | entity.value.polyline.material.outlineWidth._value = fromLine.value.width; |
| | | } else { |
| | | entity.value.polyline.material.outlineWidth._value = null; |
| | | } |
| | | } else if (type == 'rectangle') { |
| | | |
| | | entity.value.rectangle.outline._value = fromLine.value.outline; |
| | | } else if (type == 'polygon') { |
| | | |
| | | entity.value.polygon.outline._value = fromLine.value.outline; |
| | | } |
| | | }; |
| | | const setAttributeInfoClose = () => { |
| | | store.state.editTemporaryback = entity._value.id; |
| | | store.state.setEditTemporaryShow = false; |
| | | store.state.editTemporaryId = null; |
| | | sgworld.Creator.SimpleGraphic.SimpleGraphicObj=[]; |
| | | |
| | | }; |
| | | const setEntityMaterColorChange = () => { |
| | | const material = "rgb(255,255,255)"; |
| | |
| | | material = hexToRgb(fromLine.value.material); |
| | | } |
| | | var type = entity.value.GeoType; |
| | | |
| | | if (type == "point") { |
| | | entity.value.point.color = Cesium.Color.fromCssColorString( |
| | | material |
| | | ).withAlpha(fromLine.value.materialAlpha); |
| | | } else if (type == "label") { |
| | | entity.value.label.fillColor = Cesium.Color.fromCssColorString( |
| | | material |
| | | ).withAlpha(fromLine.value.materialAlpha); |
| | | } else if (type == 'polyline') { |
| | | |
| | | entity.value.polyline.material.color = Cesium.Color.fromCssColorString( |
| | | material |
| | | ).withAlpha(fromLine.value.materialAlpha); |
| | | } else if (type == 'rectangle') { |
| | | |
| | | entity.value.rectangle.material.color = Cesium.Color.fromCssColorString( |
| | | material |
| | | ).withAlpha(fromLine.value.materialAlpha); |
| | | } else if (type == 'polygon') { |
| | | |
| | | entity.value.polygon.material.color = Cesium.Color.fromCssColorString( |
| | | material |
| | | ).withAlpha(fromLine.value.materialAlpha); |
| | | } |
| | |
| | | material = hexToRgb(fromLine.value.outlineColor); |
| | | } |
| | | var type = entity.value.GeoType; |
| | | |
| | | if (type == "point") { |
| | | entity.value.point.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | } else if (type == "label") { |
| | | |
| | | entity.value.label.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | } else if (type == 'polyline') { |
| | | |
| | | entity.value.polyline.material.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | } else if (type == 'rectangle') { |
| | | |
| | | entity.value.rectangle.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | } else if (type == 'polygon') { |
| | | |
| | | entity.value.polygon.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | } |
| | | |
| | | |
| | | }; |
| | | const setEntityNearChange = () => { |
| | | var type = entity.value.GeoType; |
| | | var res; |
| | | if (type == "point") { |
| | | res = entity.value.point; |
| | | } else if (type == "label") { |
| | | res = entity.value.label; |
| | | } else if (type == 'polyline') { |
| | | res = entity.value.polyline; |
| | | } else if (type == 'rectangle') { |
| | | res = entity.value.rectangle; |
| | | } else if (type == 'polygon') { |
| | | res = entity.value.polygon; |
| | | } |
| | | res.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha( |
| | | fromLine.value.outlineAlpha |
| | | ); |
| | | }; |
| | | const setEntityNearChange = () => { |
| | | entity.value.point._distanceDisplayCondition._value.near = |
| | | fromLine.value.near; |
| | | res._distanceDisplayCondition._value.near = fromLine.value.near; |
| | | }; |
| | | const setEntityFarChange = () => { |
| | | entity.value.point._distanceDisplayCondition._value.far = fromLine.value.far; |
| | | // entity.value.point._distanceDisplayCondition._value.far = fromLine.value.far; |
| | | var type = entity.value.GeoType; |
| | | var res; |
| | | if (type == "point") { |
| | | res = entity.value.point; |
| | | } else if (type == "label") { |
| | | res = entity.value.label; |
| | | } else if (type == 'polyline') { |
| | | res = entity.value.polyline; |
| | | } else if (type == 'rectangle') { |
| | | res = entity.value.rectangle; |
| | | } else if (type == 'polygon') { |
| | | res = entity.value.polygon; |
| | | } |
| | | res._distanceDisplayCondition._value.near = fromLine.value.far; |
| | | }; |
| | | const hexToRgb = (hex) => { |
| | | return ( |
| | |
| | | var res = entity.value; |
| | | var type = res.GeoType; |
| | | entityType.value = type; |
| | | |
| | | debugger |
| | | switch (type) { |
| | | case "label": |
| | | showEntity.value.label = true; |
| | |
| | | case "point": |
| | | showEntity.value.point = true; |
| | | break; |
| | | case "polygon": |
| | | break; |
| | | case "polyline": |
| | | showEntity.value.clampToGround = true; |
| | | break; |
| | | case "rectangle": |
| | | showEntity.value.setclampToGround = false; |
| | | break; |
| | | case "polygon": |
| | | showEntity.value.setclampToGround = false; |
| | | break; |
| | | } |
| | | |
| | |
| | | fromLine.value = obj; |
| | | }; |
| | | const getTemporaryAttribute = () => { |
| | | |
| | | if (store.state.editTemporaryId) { |
| | | var entities = window.Viewer.entities._entities._array; |
| | | for (var i in entities) { |