309 lines
9.2 KiB
TypeScript
309 lines
9.2 KiB
TypeScript
import type { layer, MapInterface } from './map.d';
|
||
import { MapOl } from './map.ol';
|
||
import { MapCesium } from './map.cesium';
|
||
|
||
interface MapClassInterface extends MapInterface {
|
||
layers: Map<string, layer>;
|
||
view: any;
|
||
}
|
||
|
||
//描点参数
|
||
export type MDOptions = {
|
||
isAllowOverlap?: boolean; // 是否允许重叠
|
||
labelType?: number; // 标签类型
|
||
labelminZoom?: number; // 标签最小缩放级别
|
||
labelAltitude?: object; // 标签海拔
|
||
isRemove?: boolean; // 是否移除标签
|
||
};
|
||
|
||
export const mapServerBaseUrl =
|
||
localStorage.getItem('gisurl') || 'http://210.72.227.199:18084/';
|
||
|
||
export class MapClass implements MapClassInterface {
|
||
layers: Map<string, layer>;
|
||
view: any;
|
||
private static instance: MapClass;
|
||
private service: MapInterface;
|
||
|
||
constructor() {
|
||
this.layers = new Map();
|
||
this.view = null;
|
||
this.service = new MapOl();
|
||
}
|
||
static getInstance(): MapClass {
|
||
if (!this.instance) {
|
||
this.instance = new MapClass();
|
||
}
|
||
return this.instance;
|
||
}
|
||
// 地图初始化
|
||
init(container: HTMLElement, rectangle?: any): Promise<any> {
|
||
return this.service.init(container, rectangle).then(map => {
|
||
this.view = map;
|
||
return map;
|
||
});
|
||
}
|
||
// 基地面板控制
|
||
jdPanelControlShowAndHidden(baseid: string, isAll: boolean): void {
|
||
this.service.jdPanelControlShowAndHidden(baseid, isAll);
|
||
}
|
||
|
||
mdLayerShowOrHidden(
|
||
layerType: string,
|
||
key?: string,
|
||
baseid: string,
|
||
checked?: boolean,
|
||
isAll?: boolean
|
||
): void {
|
||
this.service.mdLayerShowOrHidden(layerType, key, baseid, checked, isAll);
|
||
}
|
||
// 添加基础数据图层
|
||
addBaseDataLayer(layer: any, isShow: boolean): void {
|
||
return this.service.addBaseDataLayer(layer, isShow);
|
||
}
|
||
// 基础图层显示影隐藏方法
|
||
controlBaseLayerTreeShowAndHidden(
|
||
layerType: string,
|
||
key: string,
|
||
checked: boolean
|
||
) {
|
||
this.service.controlBaseLayerTreeShowAndHidden(layerType, key, checked);
|
||
}
|
||
// 图层树控制描点数据显示隐藏方法
|
||
mdLayerTreeShowOrHidden(layerType: string, checked?: boolean) {
|
||
this.service.mdLayerTreeShowOrHidden(layerType, checked);
|
||
}
|
||
// 根据图例控制锚点显示隐藏
|
||
setLegendPointVisible(
|
||
layerKey: string,
|
||
anchoPointState: string,
|
||
checked: boolean
|
||
): void {
|
||
this.service.setLegendPointVisible(layerKey, anchoPointState, checked);
|
||
}
|
||
// 初始化加载描点数据
|
||
addInitDataLayer = (pointData: any[], layerType: any, mdoptions?: any) => {
|
||
return this.service.addInitDataLayer(pointData, layerType, mdoptions);
|
||
};
|
||
//切换底图
|
||
baseLayerSwitcher(key: string, checked: boolean): void {
|
||
this.service.baseLayerSwitcher(key, checked);
|
||
}
|
||
|
||
// 添加梯级流域图
|
||
addTertiarybasinLayer(
|
||
layer: layer,
|
||
fillcolor: any,
|
||
outlineColor: any,
|
||
datas: any
|
||
): void {
|
||
this.service.addTertiarybasinLayer(layer, fillcolor, outlineColor, datas);
|
||
}
|
||
// 移除梯级流域图
|
||
hideTertiarybasinLayer(layer: layer): void {
|
||
this.service.hideTertiarybasinLayer?.(layer);
|
||
}
|
||
// 缩放
|
||
zoomToggle(type: 'out' | 'in') {
|
||
this.service.zoomToggle(type);
|
||
}
|
||
/**
|
||
* 长度量算
|
||
*/
|
||
lengthCalculate(): void {
|
||
this.service.lengthCalculate();
|
||
}
|
||
/**
|
||
* 面积量算
|
||
*/
|
||
areCalculate(): void {
|
||
this.service.areCalculate();
|
||
}
|
||
/**
|
||
* 移除量算结果
|
||
*/
|
||
removeQueryLayer(): void {
|
||
this.service.removeQueryLayer();
|
||
}
|
||
// 地图打印
|
||
mapOutPut() {
|
||
this.service.mapOutPut();
|
||
}
|
||
// 检查图层是否存在
|
||
hasLayer(layerKey: string): boolean {
|
||
return this.service.hasLayer(layerKey);
|
||
}
|
||
// 检查 GIS/底图图层是否存在
|
||
hasBaseLayer(layerKey: string): boolean {
|
||
return this.service.hasBaseLayer(layerKey);
|
||
}
|
||
// 删除描点图层
|
||
removePointLayer(layerKey: string): void {
|
||
this.service.removePointLayer?.(layerKey);
|
||
}
|
||
// 漫游模式锚点深度测试开关（仅 3D 有效，2D 无此能力直接忽略）
|
||
setRoamDepthTest(enabled: boolean): void {
|
||
this.service.setRoamDepthTest?.(enabled);
|
||
}
|
||
// 漫游模型就绪后触发批量 popup（仅 3D 有效，2D 直接忽略）
|
||
activateRoamingPopups(): void {
|
||
this.service.activateRoamingPopups?.();
|
||
}
|
||
// 销毁地图
|
||
destroy(): void {
|
||
this.service.destroy();
|
||
}
|
||
// 初始化弹窗
|
||
initPopupOverlay(popupContainer: HTMLDivElement): void {
|
||
this.service.initPopupOverlay(popupContainer);
|
||
}
|
||
// 切换地图视图
|
||
switchView(type: '2D' | '3D'): Promise<any> {
|
||
// this.service.switchView(type);
|
||
return new Promise((resolve, reject) => {
|
||
const container = document.getElementById('mapContainer');
|
||
if (!container) {
|
||
reject(new Error('Map container not found'));
|
||
return;
|
||
}
|
||
try {
|
||
// 1. 销毁当前地图服务
|
||
if (this.service) {
|
||
try {
|
||
this.service.destroy();
|
||
} catch (e) {
|
||
console.warn('Error destroying previous service:', e);
|
||
}
|
||
this.service = null;
|
||
}
|
||
this.view = null;
|
||
|
||
// 2. 根据类型初始化新的地图服务
|
||
if (type === '2D') {
|
||
this.service = new MapOl();
|
||
|
||
this.service
|
||
.init(container)
|
||
.then(map => {
|
||
this.view = map;
|
||
resolve(map);
|
||
})
|
||
.catch(err => reject(err));
|
||
} else if (type === '3D') {
|
||
this.service = new MapCesium();
|
||
|
||
this.service
|
||
.init(container)
|
||
.then(viewer => {
|
||
this.view = viewer;
|
||
resolve(viewer);
|
||
})
|
||
.catch(err => reject(err));
|
||
}
|
||
// const container = this.view._container;
|
||
// if (type === '3D' && this.view) {
|
||
// if (type === '2D') {
|
||
// const rectangle = this.view.camera.computeViewRectangle()
|
||
// const heading = this.view.camera.heading
|
||
// const height = this.view.camera.positionCartographic.height
|
||
// const zoom = altitudeToZoom(height) > 11 ? 11 : altitudeToZoom(height)
|
||
// const center = this.service?.getCenterPosition()
|
||
// const west = this.transformRadian(rectangle.west)
|
||
// const north = this.transformRadian(rectangle.north)
|
||
// const east = this.transformRadian(rectangle.east)
|
||
// const south = this.transformRadian(rectangle.south)
|
||
// const bearing = this.transformRadian(heading)
|
||
|
||
// this.service = new MapOl();
|
||
// this.init(document.getElementById('mapContainer'));
|
||
// // this.service
|
||
// .init(document.getElementById('mapContainer'))
|
||
// .then(map => {
|
||
// this.view = map;
|
||
// resolve(map);
|
||
// });
|
||
// } else if (type === '3D') {
|
||
// const data: {
|
||
// _southWest: { lat: number; lng: number }
|
||
// _northEast: { lat: number; lng: number }
|
||
// } = this.view.getBounds()
|
||
// const bearing = this.view.getBearing()
|
||
// const heading = this.transformAngle(bearing)
|
||
// //获取相机高度
|
||
// const altitude = zoomToAltitude(this.view.getZoom())
|
||
// //获取地图中心点
|
||
// let lng = 0.5 * (data._ne.lng + data._sw.lng)
|
||
// let lat = 0.5 * (data._ne.lat + data._sw.lat)
|
||
// let center = { lng, lat }
|
||
// this.destroy();
|
||
|
||
// this.service = null;
|
||
// this.view = null;
|
||
// this.service = new MapCesium()
|
||
// this.service.init(container, data, center, altitude, heading).then((viewer) => {
|
||
// this.view = viewer
|
||
// let removeCallback = viewer.scene.globe.tileLoadProgressEvent.addEventListener((e) => {
|
||
// if (e == 0) {
|
||
// removeCallback()
|
||
// removeCallback = null
|
||
// if (viewer && !viewer.isDestroyed()) {
|
||
// resolve(viewer)
|
||
// }
|
||
// }
|
||
// })
|
||
// //容错机制，放置地图服务挂掉或者响应非常慢
|
||
// setTimeout(() => {
|
||
// if (removeCallback) {
|
||
// removeCallback()
|
||
// removeCallback = null
|
||
// if (viewer && !viewer.isDestroyed()) {
|
||
// resolve(viewer)
|
||
// }
|
||
// }
|
||
// }, 5000)
|
||
// })
|
||
// }
|
||
} catch {
|
||
reject();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 飞行到指定的点
|
||
fitBounds(): void {
|
||
// this.service.fitBounds(bounds)
|
||
}
|
||
|
||
// 飞行到指定的点
|
||
flyTopanto(position: number[], zoom: number): void {
|
||
this.service.flyTopanto(position, zoom);
|
||
}
|
||
|
||
/** 飞入默认视角（仅 3D 生效）：初始地球视图后，图层加载完再飞入中国 */
|
||
async flyToDefaultView(): Promise<void> {
|
||
await this.service.flyToDefaultView();
|
||
}
|
||
|
||
getCurrentZoom(): number | undefined {
|
||
return this.service.getCurrentZoom();
|
||
}
|
||
|
||
// ==================== 倾斜摄影 ====================
|
||
|
||
addQxsyLayer(item: any): void {
|
||
this.service.addQxsyLayer?.(item);
|
||
}
|
||
|
||
removeQxsyLayer(item: any): void {
|
||
this.service.removeQxsyLayer?.(item);
|
||
}
|
||
|
||
qxsyChangeClick(item: any, checked: boolean): void {
|
||
this.service.qxsyChangeClick?.(item, checked);
|
||
}
|
||
|
||
qxsyToPosition(item: any): void {
|
||
this.service.qxsyToPosition?.(item);
|
||
}
|
||
}
|