Skip to content

Commit f35c9dc

Browse files
cocaine-codercocaine-coder
committed
初始化geojson编辑器代码
1 parent 8da31b4 commit f35c9dc

File tree

14 files changed

+1918
-28
lines changed

14 files changed

+1918
-28
lines changed

‎geojson-editor/components/base/RadioButton.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="radio-group">
3+
<div class="radio" :class="{ active: value === key as any }" v-for="label, key in radios" :key="key"
4+
@click="handleRadioChange(key as any)">
5+
{{ label }}
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script setup lang="ts" generic="K extends string, T extends Record<K,string>">
11+
12+
defineProps<{
13+
radios: T,
14+
value: K | undefined
15+
}>();
16+
17+
const emits = defineEmits<{
18+
(e: 'update:value', value: T): void
19+
}>();
20+
21+
function handleRadioChange(k: T) {
22+
emits('update:value', k);
23+
}
24+
</script>
25+
26+
<style scoped>
27+
.radio-group {
28+
display: flex;
29+
align-items: center;
30+
overflow: hidden;
31+
background: var(--color-bg);
32+
color: var(--color-word);
33+
}
34+
35+
.radio {
36+
cursor: pointer;
37+
padding: 6px 12px;
38+
font-size: var(--size-word);
39+
}
40+
41+
.radio:hover {
42+
background: var(--color-hover);
43+
}
44+
45+
.radio.active {
46+
background: var(--color-hover) !important;
47+
color: var(--color-primary) !important;
48+
}
49+
</style>

‎geojson-editor/components/features/Drawer.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="drawer-control">
3+
<RadioButton :radios="radios" v-model:value="currentMeasure"></RadioButton>
4+
<div class="btn" @click="handleClear()">清空</div>
5+
<div class="btn" @click="handleStop()">停止</div>
6+
</div>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
import RadioButton from '../base/RadioButton.vue';
11+
import { DrawManager, TDrawGeometryType } from '../../../packages/maplugin-core';
12+
import { ref, watch } from 'vue';
13+
14+
const radios: Record<TDrawGeometryType, string> = {
15+
'Point': '点',
16+
'LineString': '线',
17+
'Polygon': '面'
18+
}
19+
20+
const props = defineProps<{
21+
drawManager: DrawManager
22+
}>();
23+
24+
const currentMeasure = ref<TDrawGeometryType | undefined>();
25+
26+
watch(currentMeasure, a => {
27+
if (a) {
28+
props.drawManager.start(a);
29+
}
30+
});
31+
32+
function handleClear() {
33+
props.drawManager.clear();
34+
}
35+
36+
function handleStop() {
37+
props.drawManager.stop();
38+
currentMeasure.value = undefined;
39+
40+
}
41+
</script>
42+
43+
<style scoped>
44+
.drawer-control {
45+
display: flex;
46+
background: var(--color-bg);
47+
color: var(--color-word);
48+
border-radius: 6px;
49+
overflow: hidden;
50+
}
51+
52+
.btn {
53+
cursor: pointer;
54+
padding: 6px 12px;
55+
font-size: var(--size-word);
56+
}
57+
58+
.btn:hover {
59+
background: var(--color-hover);
60+
}
61+
</style>

‎geojson-editor/components/features/FeatureCollectionEditor.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div ref="codeEditBox" class="fc-editor"></div>
3+
</template>
4+
5+
<script setup lang="ts">
6+
//@ts-ignore
7+
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
8+
//@ts-ignore
9+
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
10+
import * as monaco from 'monaco-editor'
11+
import geojson_schema from '../../contracts/geojson-schema.json';
12+
import { onMounted, ref, watch } from 'vue';
13+
14+
self.MonacoEnvironment = {
15+
getWorker(_: string, label: string) {
16+
if (label === 'json') {
17+
return new jsonWorker()
18+
}
19+
20+
return new EditorWorker()
21+
},
22+
}
23+
24+
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
25+
validate: true,
26+
schemas: [
27+
{
28+
uri: 'https://geojson.org/schema/GeoJSON.json',
29+
fileMatch: ['*'],
30+
schema: geojson_schema
31+
}
32+
]
33+
});
34+
35+
const props = defineProps<{
36+
fc: GeoJSON.FeatureCollection
37+
}>();
38+
39+
const codeEditBox = ref<HTMLDivElement>();
40+
let editor: monaco.editor.IStandaloneCodeEditor;
41+
42+
onMounted(() => {
43+
editor = monaco.editor.create(codeEditBox.value!, {
44+
value: JSON.stringify(props.fc, null, 4),
45+
language: 'json',
46+
theme: 'vs-dark',
47+
minimap: {
48+
enabled: false
49+
},
50+
automaticLayout: true,
51+
formatOnPaste: true
52+
});
53+
});
54+
55+
watch(() => props.fc, (a) => {
56+
editor.setValue(JSON.stringify(props.fc, null, 4));
57+
});
58+
</script>
59+
60+
<style scoped>
61+
.fc-editor {
62+
height: 100%;
63+
width: 100%;
64+
}
65+
</style>

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="measure-control">
3+
4+
<fieldset>
5+
<legend>
6+
<div class="form-check">
7+
<label for="ck-measure">测量</label>
8+
<input id="ck-measure" type="checkbox" v-model="measureEnable">
9+
</div>
10+
</legend>
11+
</fieldset>
12+
</div>
13+
</template>
14+
15+
<script lang="ts" setup>
16+
import { ref, watch } from 'vue';
17+
import { MeasureManager } from '../../../packages/maplugin-core';
18+
19+
const props = defineProps<{
20+
measureManager: MeasureManager
21+
}>();
22+
23+
const measureEnable = ref(false);
24+
props.measureManager.setVisible(false);
25+
26+
watch(measureEnable, a => {
27+
props.measureManager.setVisible(a);
28+
});
29+
30+
</script>
31+
32+
<style scoped>
33+
.measure-control {
34+
background: var(--color-bg);
35+
color: var(--color-word);
36+
font-size: var(--size-word);
37+
padding: 8px;
38+
border-radius: 6px;
39+
}
40+
41+
.form-check {
42+
display: flex;
43+
align-items: center;
44+
}
45+
46+
.form-check>* {
47+
cursor: pointer;
48+
}
49+
</style>

0 commit comments

Comments
 (0)