196 lines
8.1 KiB
JavaScript
196 lines
8.1 KiB
JavaScript
|
|
||
|
|
import { attributeElm, labelStyleElm1, labelStyleElm2 } from '../../../../Element/elm_html'
|
||
|
|
|
||
|
|
function html(that) {
|
||
|
|
return `
|
||
|
|
<span class="custom-divider"></span>
|
||
|
|
<div class="div-item">
|
||
|
|
<div class="row" style="align-items: flex-start;">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">名称</span>
|
||
|
|
<input class="input" maxlength="40" type="text" @model="name">
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">颜色</span>
|
||
|
|
<div class="color"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="custom-divider"></span>
|
||
|
|
<div class="div-item">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">经度</span>
|
||
|
|
<input class="input" type="number" title="" min="-180" max="180" @model="lng">
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">最大比例</span>
|
||
|
|
<div class="input-number input-number-unit-1">
|
||
|
|
<input class="input" type="number" title="" min="0.1" max="99999" step="0.1" @model="maximumScale">
|
||
|
|
<span class="unit">倍</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">纬度</span>
|
||
|
|
<input class="input" type="number" title="" min="-90" max="90" @model="lat">
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">最小像素</span>
|
||
|
|
<div class="input-number input-number-unit-1">
|
||
|
|
<input class="input" type="number" title="" min="1" max="99999" @model="minimumPixelSize">
|
||
|
|
<span class="unit">px</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">高度</span>
|
||
|
|
<div class="input-number input-number-unit-1">
|
||
|
|
<input class="input" type="number" title="" min="-99999" max="9999999" @model="alt">
|
||
|
|
<span class="unit">m</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">固定大小</span>
|
||
|
|
<input class="btn-switch" type="checkbox" @model="scaleByDistance">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-item">
|
||
|
|
<div class="row">
|
||
|
|
<DIV-cy-tabs id="model-edit-tabs">
|
||
|
|
<DIV-cy-tab-pane label="属性信息">
|
||
|
|
${attributeElm(that)}
|
||
|
|
</DIV-cy-tab-pane>
|
||
|
|
<DIV-cy-tab-pane label="方向信息">
|
||
|
|
<div>
|
||
|
|
<div class="row">
|
||
|
|
<p class="lable-left-line">旋转</p>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">x 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="360" min="0" step="0.01" @model="rotateX">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="360" @model="rotateX">
|
||
|
|
<span class="unit">°</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">y 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="360" min="0" step="0.01" @model="rotateY">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="360" @model="rotateY">
|
||
|
|
<span class="unit">°</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">z 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="360" min="0" step="0.01" @model="rotateZ">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="360" @model="rotateZ">
|
||
|
|
<span class="unit">°</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="lable-left-line">
|
||
|
|
<span>缩放</span>
|
||
|
|
<div class="checkbox-box">
|
||
|
|
<input type="checkbox">
|
||
|
|
<span>是否等比例缩放</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row no-equal" style="display: none;">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">x 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="99999" min="0" step="1" @model="scaleX">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="99999" @model="scaleX">
|
||
|
|
<span class="unit">倍</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">y 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="99999" min="0" step="1" @model="scaleY">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="99999" @model="scaleY">
|
||
|
|
<span class="unit">倍</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">z 轴</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="99999" min="0" step="1" @model="scaleZ">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="99999" @model="scaleZ">
|
||
|
|
<span class="unit">倍</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row equal" style="display: none;">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">等比例缩放</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="99999" min="0" step="1">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="0" max="99999" step="1">
|
||
|
|
<span class="unit">倍</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<p class="lable-left-line">高度</p>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<span class="label">高度</span>
|
||
|
|
<input style="flex: 1;margin-right: 15px;" type="range" max="999999" min="-99999" step="0.01" @model="alt">
|
||
|
|
<div class="input-number input-number-unit-1" style="width: auto;">
|
||
|
|
<input style="width: 100px;" type="number" title="" min="-99999" max="999999" @model="alt">
|
||
|
|
<span class="unit">m</span>
|
||
|
|
<span class="arrow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</DIV-cy-tab-pane>
|
||
|
|
<DIV-cy-tab-pane label="标注风格">
|
||
|
|
${labelStyleElm1()}
|
||
|
|
</DIV-cy-tab-pane>
|
||
|
|
<DIV-cy-tab-pane label="标签风格">
|
||
|
|
${labelStyleElm2()}
|
||
|
|
</DIV-cy-tab-pane>
|
||
|
|
</DIV-cy-tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="custom-divider"></span>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
export { html }
|