93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
// src/utils/cesium/MarkerTool.ts
|
|
import * as Cesium from 'cesium';
|
|
|
|
export interface Landmark {
|
|
name: string;
|
|
lon: number;
|
|
lat: number;
|
|
desc: string;
|
|
}
|
|
|
|
export class MarkerTool {
|
|
private viewer: Cesium.Viewer;
|
|
private entities: Cesium.EntityCollection;
|
|
private markers: Map<string, Cesium.Entity>;
|
|
|
|
constructor(viewer: Cesium.Viewer) {
|
|
this.viewer = viewer;
|
|
this.entities = viewer.entities;
|
|
this.markers = new Map();
|
|
}
|
|
|
|
// 添加点标注
|
|
addPoint(
|
|
longitude: number,
|
|
latitude: number,
|
|
name: string,
|
|
description: string = '',
|
|
options: any = {}
|
|
): Cesium.Entity {
|
|
const defaultOptions = {
|
|
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
point: {
|
|
pixelSize: 10,
|
|
color: Cesium.Color.YELLOW,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
|
},
|
|
label: {
|
|
text: name,
|
|
font: '14pt sans-serif',
|
|
pixelOffset: new Cesium.Cartesian2(0, -40),
|
|
fillColor: Cesium.Color.WHITE,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE
|
|
}
|
|
};
|
|
|
|
const mergedOptions = { ...defaultOptions, ...options };
|
|
if (description) {
|
|
mergedOptions.description = description;
|
|
}
|
|
|
|
const entity = this.entities.add(mergedOptions);
|
|
this.markers.set(name, entity);
|
|
|
|
return entity;
|
|
}
|
|
|
|
// 添加重庆地标
|
|
addChongqingLandmark(): void {
|
|
const landmarks: Landmark[] = [
|
|
{ name: '解放碑', lon: 106.574, lat: 29.556, desc: '重庆解放碑' },
|
|
{ name: '洪崖洞', lon: 106.577, lat: 29.561, desc: '洪崖洞民俗风貌区' },
|
|
{ name: '朝天门', lon: 106.583, lat: 29.565, desc: '朝天门广场' },
|
|
{ name: '南山', lon: 106.600, lat: 29.553, desc: '南山一棵树观景台' }
|
|
];
|
|
|
|
landmarks.forEach(landmark => {
|
|
this.addPoint(landmark.lon, landmark.lat, landmark.name, landmark.desc);
|
|
});
|
|
}
|
|
|
|
// 移除标注
|
|
removeMarker(name: string): void {
|
|
if (this.markers.has(name)) {
|
|
const entity = this.markers.get(name);
|
|
if (entity) {
|
|
this.entities.remove(entity);
|
|
}
|
|
this.markers.delete(name);
|
|
}
|
|
}
|
|
|
|
// 清除所有标注
|
|
clearAllMarkers(): void {
|
|
this.markers.forEach((entity) => {
|
|
this.entities.remove(entity);
|
|
});
|
|
this.markers.clear();
|
|
}
|
|
} |