298 lines
8.7 KiB
TypeScript
298 lines
8.7 KiB
TypeScript
import type { layer, MapInterface } from './map.d';
|
|
// import { MapLeaflet } from "./map.leaflet";
|
|
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 MapLeaflet();
|
|
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);
|
|
}
|
|
// 销毁地图
|
|
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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|