Skip to content

Commit 8f349e5

Browse files
cocaine-codercocaine-coder
committed
增加路由经纬度
1 parent 03e9a07 commit 8f349e5

File tree

7 files changed

+201
-9
lines changed

7 files changed

+201
-9
lines changed

‎geojson-editor/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<link rel="icon" type="image/svg+xml" href="/geojson.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>geojson editor</title>
99

‎geojson-editor/public/geojson.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎geojson-editor/src/App.vue‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
</template>
99

1010
<script setup lang="ts">
11-
import { Component, createApp, ref } from 'vue';
11+
import { Component, createApp, ref, watch } from 'vue';
1212
import Map from '../../packages/maplugin-maplibre/demo/Map.vue';
1313
import Drawer from './components/features/Drawer.vue';
1414
import Measurer from './components/features/Measurer.vue';
1515
import FeatureCollectionEditor from './components/features/FeatureCollectionEditor.vue';
1616
import ShowEditorButton from './components/features/ShowEditorButton.vue';
1717
import IO from './components/features/IO.vue';
1818
19-
import { DrawManager, GeoJSONLayerManager, MeasureManager, TIdentityGeoJSONFeature, MiddleButtonRoate, VertexEditor } from '../../packages/maplugin-maplibre';
19+
import { DrawManager, GeoJSONLayerManager, MeasureManager, TIdentityGeoJSONFeature, MiddleButtonRoate, VertexEditor, useCamera } from '../../packages/maplugin-maplibre';
2020
import { StoreEditor } from './stores';
2121
2222
import img_marker from './assets/map-marker.png?url';
@@ -26,9 +26,32 @@ const fc = ref<GeoJSON.FeatureCollection>({
2626
features: []
2727
});
2828
29+
const { camera, setMap } = useCamera({
30+
center: [0, 0],
31+
bearing: 0,
32+
pitch: 0,
33+
zoom: 1
34+
});
35+
36+
watch(camera, a => {
37+
const c = `${a.zoom.toFixed(2)}/${a.center.lng.toFixed(5)}/${a.center.lat.toFixed(5)}/${a.bearing.toFixed(1)}/${a.pitch.toFixed(0)}`;
38+
const url = window.location.href.split('#camera=')[0] + "#camera=" + c;
39+
history.pushState({}, '', new URL(url));
40+
});
41+
2942
function handleMapLoaded(map: maplibregl.Map) {
30-
map.setCenter([121, 31]);
31-
map.setZoom(8);
43+
const c = window.location.hash.split('#camera=')[1];
44+
if (c) {
45+
const [zoom, lng, lat, bearing, pitch] = c.split('/').map(x => parseFloat(x));
46+
if (zoom) map.setZoom(zoom);
47+
if (lng && lat) map.setCenter([lng, lat]);
48+
if (bearing) map.setBearing(bearing);
49+
if (pitch) map.setPitch(pitch);
50+
}else{
51+
map.setCenter([121, 31]);
52+
map.setZoom(8);
53+
}
54+
3255
map.addLayer({
3356
id: "world-raster",
3457
type: 'raster',
@@ -38,6 +61,7 @@ function handleMapLoaded(map: maplibregl.Map) {
3861
tiles: ["https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"]
3962
}
4063
});
64+
setMap(map);
4165
4266
// 中键旋转
4367
new MiddleButtonRoate(map);

‎packages/maplugin-core/hooks/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './useCamera'

‎packages/maplugin-core/hooks/useCamera.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { IMap, TMapEvent } from '../types';
2+
import { ref } from 'vue';
3+
4+
export function useCamera(defaultValue: {
5+
center: [number, number],
6+
zoom: number,
7+
bearing: number,
8+
pitch: number
9+
}, map?: IMap, event: TMapEvent = 'moveend') {
10+
let m = map;
11+
const camera = ref({
12+
center: m?.getCenter() || { lng: defaultValue.center[0], lat: defaultValue.center[1] },
13+
zoom: m?.getZoom() || defaultValue.zoom,
14+
bearing: m?.getBearing() || defaultValue.bearing,
15+
pitch: m?.getPitch() || defaultValue.pitch
16+
});
17+
18+
const cameraChangeHandler = () => {
19+
camera.value = {
20+
center: m!.getCenter(),
21+
zoom: m!.getZoom(),
22+
bearing: m!.getBearing(),
23+
pitch: m!.getPitch()
24+
};
25+
};
26+
27+
m?.on(event, cameraChangeHandler);
28+
29+
function setMap(map: IMap) {
30+
m?.off(event, cameraChangeHandler);
31+
m = map;
32+
m.on(event, cameraChangeHandler);
33+
}
34+
35+
return { camera, setMap };
36+
}
37+
38+
export function useZoom(defaultValue: number, map?: IMap, event: TMapEvent = 'pitchend') {
39+
let m = map;
40+
const zoom = ref(m?.getZoom() || defaultValue);
41+
const cameraChangeHandler = () => {
42+
zoom.value = m!.getZoom();
43+
}
44+
45+
m?.on(event, cameraChangeHandler);
46+
47+
function setMap(map: IMap) {
48+
m?.off(event, cameraChangeHandler);
49+
m = map;
50+
m.on(event, cameraChangeHandler);
51+
}
52+
53+
return { zoom, setMap };
54+
}
55+
56+
export function useCenter(defaultValue: [number, number], map?: IMap, event: TMapEvent = "moveend") {
57+
let m = map;
58+
const center = ref({
59+
lng: m?.getCenter().lng || defaultValue[0],
60+
lat: m?.getCenter().lat || defaultValue[1]
61+
});
62+
const cameraChangeHandler = () => {
63+
center.value = m!.getCenter();
64+
}
65+
66+
m?.on(event, cameraChangeHandler);
67+
68+
function setMap(map: IMap) {
69+
m?.off(event, cameraChangeHandler);
70+
m = map;
71+
m.on(event, cameraChangeHandler);
72+
}
73+
74+
return { center, setMap };
75+
}
76+
77+
78+
export function usePitch(defaultValue: number, map?: IMap, event: TMapEvent = 'pitchend') {
79+
let m = map;
80+
const pitch = ref(m?.getPitch() || defaultValue);
81+
const cameraChangeHandler = () => {
82+
pitch.value = m!.getPitch();
83+
}
84+
85+
m?.on(event, cameraChangeHandler);
86+
87+
function setMap(map: IMap) {
88+
m?.off(event, cameraChangeHandler);
89+
m = map;
90+
m.on(event, cameraChangeHandler);
91+
}
92+
93+
return { pitch, setMap };
94+
}
95+
96+
export function useBearing(defaultValue: number, map?: IMap, event: TMapEvent = 'rotateend') {
97+
let m = map;
98+
const bearing = ref(m?.getBearing() || defaultValue);
99+
100+
const cameraChangeHandler = () => {
101+
bearing.value = m!.getBearing();
102+
};
103+
104+
m?.on(event, cameraChangeHandler);
105+
106+
function setMap(map: IMap) {
107+
m?.off(event, cameraChangeHandler);
108+
m = map;
109+
m.on(event, cameraChangeHandler);
110+
}
111+
112+
return { bearing, setMap };
113+
}
114+

‎packages/maplugin-core/index.ts‎

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

‎packages/maplugin-core/types.ts‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,62 @@
1-
export type TMapEvent = 'click' | 'dblclick' | 'mousemove' | 'contextmenu' | 'zoom' | 'style.load' | 'draw.selectionchange';
1+
export type TMapEvent =
2+
"mousedow" |
3+
"mouseup" |
4+
"mouseover" |
5+
"mouseout" |
6+
"mousemove" |
7+
"mouseenter" |
8+
"mouseleave" |
9+
"preclick" |
10+
"click" |
11+
"dblclick" |
12+
"contextmenu" |
13+
"touchstart" |
14+
"touchend" |
15+
"touchcancel" |
16+
"wheel" |
17+
"resize" |
18+
"remove" |
19+
"touchmove" |
20+
"movestart" |
21+
"move" |
22+
"moveend" |
23+
"dragstart" |
24+
"drag" |
25+
"dragend" |
26+
"zoomstart" |
27+
"zoom" |
28+
"zoomend" |
29+
"rotatestart" |
30+
"rotate" |
31+
"rotateend" |
32+
"pitchstart" |
33+
"pitch" |
34+
"pitchend" |
35+
"boxzoomstart" |
36+
"boxzoomend" |
37+
"boxzoomcancel" |
38+
"webglcontextlost" |
39+
"webglcontextrestored" |
40+
"load" |
41+
"render" |
42+
"idle" |
43+
"error" |
44+
"data" |
45+
"styledata" |
46+
"sourcedata" |
47+
"dataloading" |
48+
"styledataloading" |
49+
"sourcedataloading" |
50+
"styleimagemissing" |
51+
"style.load";
252

353
export interface IMap {
454
getContainer(): HTMLElement,
555

656
getStyle(): any;
757
setStyle(style: string): any;
8-
setCenter(center: [number, number]): void,
58+
setCenter(center: [number, number]): void;
59+
getCenter(): { lng: number, lat: number };
960
setBearing(bearing: number): void;
1061
getBearing(): number;
1162
setPitch(pitch: number): void;
@@ -33,7 +84,7 @@ export interface IMap {
3384

3485
setFilter(id: string, filter?: any, options?: any): void,
3586

36-
doubleClickZoom : {
87+
doubleClickZoom: {
3788
enable(): void;
3889
disable(): void;
3990
isEnabled(): boolean;

0 commit comments

Comments
 (0)