Skip to content

Commit 8e46442

Browse files
cocaine-codercocaine-coder
committed
完善测量
1 parent 217ee97 commit 8e46442

File tree

4 files changed

+138
-9
lines changed

4 files changed

+138
-9
lines changed

‎geojson-editor/src/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ function handleMapLoaded(map: maplibregl.Map) {
4545
});
4646
4747
createMapControl(map, ShowEditorButton);
48-
createMapControl(map, Drawer, { drawManager: new DrawManager(glManager, {}) });
49-
createMapControl(map, Measurer, { measureManager: new MeasureManager(glManager, {}) });
48+
createMapControl(map, Drawer, { drawManager: new DrawManager(glManager, {}) }, 'top-left');
49+
createMapControl(map, Measurer, { measureManager: new MeasureManager(glManager, {}) }, 'top-left');
5050
}
5151
5252
function createMapControl(map: maplibregl.Map, component: Component, data?: Record<string, unknown>, position: maplibregl.ControlPosition = 'top-right') {

‎geojson-editor/src/components/features/Measurer.vue‎

Lines changed: 132 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,125 @@
11
<template>
22
<div class="measure-control">
3-
43
<fieldset>
54
<legend>
65
<div class="form-check">
7-
<label for="ck-measure">测量</label>
6+
<label class="form-check-label" for="ck-measure">测量</label>
87
<input id="ck-measure" type="checkbox" v-model="measureEnable">
98
</div>
109
</legend>
10+
11+
<div class="measure-properties">
12+
<RadioButton class="measure-properties-tabs" :radios="tabs" v-model:value="currentTab"></RadioButton>
13+
14+
<div class="measure-properties-controls visible" v-show="currentTab === 'visible'">
15+
<div>面线段方向</div>
16+
<input type="checkbox" v-model="direction">
17+
<div>面线段距离</div>
18+
<input type="checkbox" v-model="distance">
19+
<div>线段距离</div>
20+
<input type="checkbox" v-model="centerDistance">
21+
</div>
22+
23+
<div class="measure-properties-controls" v-show="currentTab === 'units'">
24+
<div>
25+
面积
26+
</div>
27+
<select v-model="areaUnit">
28+
<option value="M2">平方米</option>
29+
<option value="KM2">平方千米</option>
30+
<option value="MU">亩</option>
31+
<option value="M2KM2">自动</option>
32+
</select>
33+
34+
<div>
35+
长度
36+
</div>
37+
<select v-model="lengthUnit">
38+
<option value="M">米</option>
39+
<option value="KM">千米</option>
40+
<option value="MKM">自动</option>
41+
</select>
42+
</div>
43+
44+
<div class="measure-properties-controls precision" v-show="currentTab === 'precision'">
45+
<div>米</div>
46+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[0]" :min="0" step="1">
47+
<div>千米</div>
48+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[1]" :min="0" step="1">
49+
<div>平方米</div>
50+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[2]" :min="0" step="1">
51+
<div> 平方千米</div>
52+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[3]" :min="0" step="1">
53+
<div>亩</div>
54+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[4]" :min="0" step="1">
55+
</div>
56+
</div>
1157
</fieldset>
1258
</div>
1359
</template>
1460

1561
<script lang="ts" setup>
1662
import { ref, watch } from 'vue';
17-
import { MeasureManager } from '../../../../packages/maplugin-core';
63+
import { MeasureManager, Units } from '../../../../packages/maplugin-core';
64+
import RadioButton from '../base/RadioButton.vue';
65+
66+
const tabs: Record<"visible" | "units" | "precision", string> = {
67+
'visible': "显示",
68+
'units': "单位",
69+
'precision': "精度"
70+
};
71+
const currentTab = ref<keyof typeof tabs>("visible");
1872
1973
const props = defineProps<{
2074
measureManager: MeasureManager
2175
}>();
2276
23-
const measureEnable = ref(false);
2477
props.measureManager.setVisible(false);
78+
props.measureManager.setDirectionSymbol('>', '<')
2579
80+
const measureEnable = ref(false);
2681
watch(measureEnable, a => {
2782
props.measureManager.setVisible(a);
2883
});
2984
85+
const direction = ref(true);
86+
watch(direction, a => {
87+
props.measureManager.showPolygonDirection(a);
88+
});
89+
90+
const distance = ref(true);
91+
watch(distance, a => {
92+
props.measureManager.showPolygonDistance(a);
93+
});
94+
95+
const centerDistance = ref(true);
96+
watch(centerDistance, a => {
97+
props.measureManager.showSegment(a);
98+
});
99+
100+
const areaUnit = ref<Units.TUnitsArea | 'M2KM2'>("M2KM2");
101+
watch(areaUnit, a => {
102+
props.measureManager.setUnits({
103+
area: a
104+
})
105+
});
106+
107+
const lengthUnit = ref<Units.TUnitsLength | 'MKM'>("MKM");
108+
watch(lengthUnit, a => {
109+
props.measureManager.setUnits({
110+
length: a
111+
});
112+
});
113+
114+
const precisions = ref(["2", "2", "2", "2", "2"]);
115+
watch(precisions, a => {
116+
props.measureManager.setPrecision('M', parseInt(a[0] ?? "2"));
117+
props.measureManager.setPrecision('KM', parseInt(a[1] ?? "2"));
118+
props.measureManager.setPrecision('M2', parseInt(a[2] ?? "2"));
119+
props.measureManager.setPrecision('KM2', parseInt(a[3] ?? "2"));
120+
props.measureManager.setPrecision('MU', parseInt(a[4] ?? "2"));
121+
}, { deep: true });
122+
30123
</script>
31124

32125
<style scoped>
@@ -36,6 +129,7 @@ watch(measureEnable, a => {
36129
font-size: var(--size-word);
37130
padding: 8px;
38131
border-radius: 6px;
132+
width: 200px;
39133
}
40134
41135
.form-check {
@@ -46,4 +140,38 @@ watch(measureEnable, a => {
46140
.form-check>* {
47141
cursor: pointer;
48142
}
143+
144+
.form-check-label {
145+
font-size: 14px;
146+
}
147+
148+
.measure-properties {
149+
display: flex;
150+
flex-direction: column;
151+
gap: 8px;
152+
}
153+
154+
.measure-properties-tabs {
155+
border-radius: 4px;
156+
width: fit-content;
157+
}
158+
159+
:deep(.measure-properties-tabs>.radio) {
160+
font-size: 12px !important;
161+
padding: 2px 8px;
162+
}
163+
164+
.measure-properties-controls {
165+
display: grid;
166+
grid-template-columns: 1fr auto;
167+
gap: 8px 40px;
168+
}
169+
170+
.measure-properties-controls.visible>input {
171+
cursor: pointer;
172+
}
173+
174+
.measure-properties-controls.precision>input {
175+
width: 40px;
176+
}
49177
</style>

‎packages/maplugin-core/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './managers';
22
export * from './style';
33
export * from './utils';
4-
export * from './contracts';
4+
export * from './contracts';
5+
export * from './types';

‎packages/maplugin-maplibre/demo/Measure.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484

8585
<script setup lang="ts">
8686
import Map from './Map.vue';
87-
import { GeoJSONLayerManager, MeasureManager, TEditorGeometryType, TIdentityGeoJSONFeature, Units } from '../index';
87+
import { GeoJSONLayerManager, MeasureManager, TDrawGeometryType, TIdentityGeoJSONFeature, Units } from '../index';
8888
import { ref, watch } from 'vue';
8989
9090
const value = ref("");
@@ -131,7 +131,7 @@ function onMapLoad(map: maplibregl.Map) {
131131
measure.showSegment(false);
132132
}
133133
134-
function handleRadioClick(measureType: TEditorGeometryType) {
134+
function handleRadioClick(measureType: TDrawGeometryType) {
135135
measure.start(measureType);
136136
value.value = measureType;
137137
}

0 commit comments

Comments
 (0)