|
@@ -17,10 +17,18 @@
|
|
|
</el-button-group>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
|
|
|
+ <div class="track-list">
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
<el-card shadow="always">
|
|
|
- ff
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>轨迹点列表</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="track-point">
|
|
|
+ <template v-for="(item, index) in trackPointList"></template>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -61,12 +69,13 @@ export default defineComponent({
|
|
|
const state = reactive({
|
|
|
map: <any>null,
|
|
|
mapFunc: null,
|
|
|
+ trackPointList: []
|
|
|
});
|
|
|
const mapLoad = (map: null, func: null) => {
|
|
|
state.map = map
|
|
|
state.mapFunc = func
|
|
|
}
|
|
|
- const drawTrack = (trackSource: string) => {
|
|
|
+ const startDraw = (cb: { (evt: any): void; (arg0: { feature: { getGeometry: () => any; }; }): void; }) => {
|
|
|
let measureTooltipElement: HTMLDivElement | null;
|
|
|
let helpTooltipElement: HTMLDivElement | null;
|
|
|
const realLayer = state.map.getLayers().getArray().filter((v: { get: (arg0: string) => string; }) => v.get('layerName') === 'measureLayer')
|
|
@@ -203,25 +212,8 @@ export default defineComponent({
|
|
|
}
|
|
|
const drawendHandle = (evt: { feature: { getGeometry: () => any; }; }) => {
|
|
|
state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
|
|
|
- const del = document.createElement("div");
|
|
|
- del.className = "lineDel";
|
|
|
- measureTooltipElement?.append(del);
|
|
|
- del.onclick = () => {
|
|
|
- _source?.removeFeature(evt.feature)
|
|
|
- const b = del.parentElement?.parentElement
|
|
|
- b?.parentElement?.removeChild(b);
|
|
|
- const g = evt.feature.getGeometry()
|
|
|
- if (g.getType() === 'LineString') {
|
|
|
- const w = `LINESTRING(${g.getCoordinates().map((v: string[]) => v[0] + ' ' + v[1]).join(',')})`
|
|
|
- copy(w)
|
|
|
- } else if (g.getType() === 'Polygon') {
|
|
|
- const w = `POLYGON(${g.getCoordinates().map(v => '(' + v.map(c => c[0] + ' ' + c[1]) + ')').join(',')})`
|
|
|
- copy(w)
|
|
|
- }
|
|
|
- };
|
|
|
- if (measureTooltipElement) measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
|
|
|
- measureTooltip.setOffset([0, -7]);
|
|
|
sketch = null; //置空当前绘制的要素对象
|
|
|
+ measureTooltipElement?.parentNode?.removeChild(measureTooltipElement);
|
|
|
measureTooltipElement = null; //置空测量工具提示框对象
|
|
|
helpTooltipElement?.parentNode?.removeChild(helpTooltipElement);
|
|
|
helpTooltipElement = null; //置空测量工具提示框对象
|
|
@@ -230,6 +222,7 @@ export default defineComponent({
|
|
|
draw.un('drawend', drawendHandle);
|
|
|
state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
|
|
|
state.map.un('pointermove', pointerMoveHandler)
|
|
|
+ cb(evt)
|
|
|
}
|
|
|
draw.on('drawend', drawendHandle);
|
|
|
}
|
|
@@ -259,6 +252,12 @@ export default defineComponent({
|
|
|
// helpTooltipElement?.addClass('hidden');
|
|
|
// });
|
|
|
}
|
|
|
+ const drawTrack = (trackSource: string) => {
|
|
|
+ startDraw((evt) => {
|
|
|
+ const geom = evt.feature.getGeometry()
|
|
|
+ state.trackPointList = geom.getCoordinates()
|
|
|
+ })
|
|
|
+ }
|
|
|
return {
|
|
|
...toRefs(state),
|
|
|
mapLoad,
|