// 方式一：默认导入（推荐）
import MyOl, { MapInitType } from 'my-openlayer';

// 方式二：命名导入
// import { MyOl, MapInitType } from 'my-openlayer';

// 地图初始化配置
const mapConfig: MapInitType = {
  center: [119.81, 29.969],
  zoom: 10,
  minZoom: 8,
  maxZoom: 20,
  token: process.env.VUE_APP_TIANDITU_TOKEN, // 从环境变量获取天地图token
  annotation: true,
  layers: {
    vec_c: [],
    img_c: [],
    ter_c: []
  }
};

// 创建地图实例
const map = new MyOl('map-container', mapConfig);

import { PointOptions, ClusterOptions, PointData } from 'my-openlayer';

const point = map.getPoint();

// 点位数据
const pointData: PointData[] = [
  { lgtd: 119.81, lttd: 29.969, name: '测试点位', type: 'marker' }
];

// 添加普通点位
const pointOptions: PointOptions = {
  layerName: 'test-point',
  nameKey: 'name',
  img: 'marker.png',
  hasImg: true,
  scale: 1.2,
  textFont: '12px sans-serif',
  textFillColor: '#FFF',
  textStrokeColor: '#000',
  textStrokeWidth: 3,
  textOffsetY: 20,
  zIndex: 4,
  visible: true
};
point.addPoint(pointData, pointOptions);

// 添加聚合点位
const clusterData: PointData[] = [
  { lgtd: 119.81, lttd: 29.969, name: 'A' },
  { lgtd: 119.82, lttd: 29.97, name: 'B' }
];
const clusterOptions: ClusterOptions = {
  layerName: 'cluster-point',
  nameKey: 'name',
  img: 'cluster.png',
  distance: 50,
  minDistance: 20,
  zIndex: 4
};
point.addClusterPoint(clusterData, clusterOptions);

// 添加 Vue 组件点位
const domPoints = point.setDomPointVue(
  [{ lgtd: 119.81, lttd: 29.969 }],
  YourVueComponent,
  Vue
);

// 控制组件点位显隐
domPoints.setVisible(true);

// 移除组件点位
domPoints.remove();

// 地图定位
point.locationAction(119.81, 29.969, 15, 1000);

import { LineOptions, MapJSONData } from 'my-openlayer';

const line = map.getLine();

// 线要素数据（GeoJSON 格式）
const lineGeoJSON: MapJSONData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { name: '测试线路', type: 'highway' },
      geometry: {
        type: 'LineString',
        coordinates: [[119.81, 29.969], [119.82, 29.97]]
      }
    }
  ]
};

// 添加普通线要素
const lineOptions: LineOptions = {
  layerName: 'test-line',
  type: 'test-line',
  strokeColor: '#037AFF',
  strokeWidth: 3,
  lineDash: [5, 5], // 虚线样式
  zIndex: 3,
  textVisible: true,
  textCallBack: (feature) => feature.get('name')
};
line.addLineCommon(lineGeoJSON, lineOptions);

// 添加河流要素（支持分级显示）
const riverOptions: LineOptions = {
  layerName: 'river',
  type: 'river',
  strokeColor: '#0071FF',
  strokeWidth: 3,
  zIndex: 6,
  visible: true
};
line.addRiverLayersByZoom(riverGeoJSON, riverOptions);

// 控制河流图层显隐
line.showRiverLayer(true); // 显示
line.showRiverLayer(false); // 隐藏

import MyOl, { PolygonOptions, HeatMapOptions, FeatureColorUpdateOptions, PointData } from 'my-openlayer';

const polygon = map.getPolygon();

// 面要素数据（GeoJSON 格式）
const borderGeoJSON: MapJSONData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { name: '边界区域' },
      geometry: {
        type: 'Polygon',
        coordinates: [[[119.8, 29.96], [119.82, 29.96], [119.82, 29.98], [119.8, 29.98], [119.8, 29.96]]]
      }
    }
  ]
};

// 添加边界面
const borderOptions: PolygonOptions = {
  layerName: 'border',
  fillColor: 'rgba(255,255,255,0)',
  strokeColor: '#EBEEF5',
  strokeWidth: 2,
  zIndex: 1
};
polygon.addBorderPolygon(borderGeoJSON, borderOptions);

// 添加分区面
const zoneOptions: PolygonOptions = {
  layerName: 'zone',
  fillColor: 'rgba(1, 111, 255, 0.3)',
  strokeColor: '#037AFF',
  strokeWidth: 2,
  textVisible: true,
  nameKey: 'name',
  textFont: '14px Calibri,sans-serif',
  textFillColor: '#FFF',
  textStrokeColor: '#409EFF',
  textStrokeWidth: 2,
  zIndex: 2
};
polygon.addPolygon(zoneGeoJSON, zoneOptions);

// 更新面颜色
const colorUpdateOptions: FeatureColorUpdateOptions = {
  nameKey: 'name'
};
polygon.updateFeatureColor('zone', { 'A区': 'rgba(255,0,0,0.6)' }, colorUpdateOptions);

// 添加图片图层
const extent = [119.8, 29.96, 119.82, 29.98]; // [minx, miny, maxx, maxy]
polygon.addImage('imgLayer', 'img.png', extent, { zIndex: 10 });

// 添加热力图
const heatData: PointData[] = [
  { lgtd: 119.81, lttd: 29.969, value: 10 },
  { lgtd: 119.82, lttd: 29.97, value: 20 }
];
const heatOptions: HeatMapOptions = {
  layerName: 'heatLayer',
  valueKey: 'value',
  radius: 20,
  blur: 15,
  opacity: 0.8,
  zIndex: 5
};
polygon.addHeatmap('heatLayer', heatData, heatOptions);

import { MyOl, ErrorHandler, ErrorType, MyOpenLayersError } from 'my-openlayer';

// 获取错误处理器实例
const errorHandler = ErrorHandler.getInstance();

// 设置全局错误回调
errorHandler.addErrorCallback((error: MyOpenLayersError) => {
  console.log('地图错误:', error.message);
  console.log('错误类型:', error.type);
  console.log('错误详情:', error.details);
  
  // 发送错误到监控系统
  sendToMonitoring({
    type: error.type,
    message: error.message,
    timestamp: new Date().toISOString()
  });
});

// 手动验证和错误处理
try {
  // 验证坐标
  ErrorHandler.validateCoordinates(longitude, latitude);
  
  // 验证图层名称
  ErrorHandler.validateLayerName(layerName);
  
  // 验证颜色格式
  ErrorHandler.validateColor(color);
  
} catch (error) {
  if (error instanceof MyOpenLayersError) {
    console.error(`${error.type}错误:`, error.message);
  }
}

// 错误类型
// ErrorType.COORDINATE_ERROR - 坐标错误
// ErrorType.LAYER_ERROR - 图层错误
// ErrorType.STYLE_ERROR - 样式错误
// ErrorType.DATA_ERROR - 数据错误
// ErrorType.CONFIG_ERROR - 配置错误

import { MyOl, EventManager, MapEventType, EventCallback, MapEventData } from 'my-openlayer';

// 创建事件管理器
const eventManager = new EventManager(map.map); // 传入原生 ol.Map

// 监听点击事件
const clickCallback: EventCallback = (eventData: MapEventData) => {
  console.log('点击位置:', eventData.coordinate);
  console.log('点击要素:', eventData.feature);
  console.log('像素位置:', eventData.pixel);
};
const clickListenerId = eventManager.on('click', clickCallback);

// 监听缩放事件
eventManager.on('zoomend', (eventData) => {
  console.log('当前缩放级别:', eventData.zoom);
  console.log('地图范围:', eventData.extent);
});

// 监听鼠标悬停事件
eventManager.on('pointermove', (eventData) => {
  if (eventData.feature) {
    console.log('悬停要素:', eventData.feature.get('name'));
  }
});

// 移除特定事件监听
eventManager.off(clickListenerId);

// 移除所有事件监听
eventManager.removeAllListeners();

// 一次性事件监听
eventManager.on('click', (eventData) => {
  console.log('只触发一次');
}, { once: true });

// 带过滤器的事件监听
eventManager.on('click', (eventData) => {
  console.log('点击了要素');
}, {
  filter: (eventData) => eventData.feature !== undefined
});

// 事件统计
console.log('点击事件监听器数量:', eventManager.getListenerCount('click'));
console.log('总事件触发次数:', eventManager.getTotalEventCount());

import { MyOl, ConfigManager, PointOptions, LineOptions } from 'my-openlayer';

// 使用默认配置
const pointOptions: PointOptions = ConfigManager.mergeOptions(
  ConfigManager.DEFAULT_POINT_OPTIONS,
  {
    strokeColor: '#ff0000',
    scale: 1.5,
    textVisible: true
  }
);

// 获取默认配置
const defaultPointConfig = ConfigManager.DEFAULT_POINT_OPTIONS;
const defaultLineConfig = ConfigManager.DEFAULT_LINE_OPTIONS;
const defaultPolygonConfig = ConfigManager.DEFAULT_POLYGON_OPTIONS;

// 验证工具
if (ConfigManager.isValidCoordinate(lng, lat)) {
  console.log('坐标有效');
}

if (ConfigManager.isValidColor('#ff0000')) {
  console.log('颜色格式有效');
}

if (ConfigManager.isValidZIndex(10)) {
  console.log('层级有效');
}

// 生成唯一ID
const layerId = ConfigManager.generateId('layer'); // layer_1234567890
const pointId = ConfigManager.generateId('point'); // point_1234567890

// 深度合并配置
const mergedConfig = ConfigManager.mergeOptions(
  { a: 1, b: { c: 2 } },
  { b: { d: 3 }, e: 4 }
); // { a: 1, b: { c: 2, d: 3 }, e: 4 }

new MyOl(id: string, options: MapInitType)

// 地图初始化配置
interface MapInitType {
  layers?: BaseLayer[] | { [key: string]: BaseLayer[] },
  zoom?: number,
  center?: number[],
  minZoom?: number,
  maxZoom?: number,
  extent?: number[],
  mapClipData?: MapJSONData,
  token?: string,
  annotation?: boolean,
  coordinateSystem?: string // 坐标系（支持CGCS2000）
}

// 点位数据
interface PointData {
  lgtd: number,  // 经度
  lttd: number,  // 纬度
  [key: string]: any  // 其他属性
}

// GeoJSON 数据
interface MapJSONData {
  type: string,
  name?: string,
  features: Feature[]
}

// 事件类型
type EventType = 'click' | 'hover' | 'moveend';

// 天地图类型
type TiandituType = 'vec_c' | 'img_c' | 'ter_c' | string;

// 基础选项 - 所有图层的公共配置
interface BaseOptions {
  /** 图层名称 */
  layerName?: string;
  /** 图层层级 */
  zIndex?: number;
  /** 图层可见性 */
  visible?: boolean;
  /** 图层透明度 */
  opacity?: number;
  /** 是否适应视图 */
  fitView?: boolean;
  // ... 其他基础属性
}

// 样式选项 - 图形样式相关配置
interface StyleOptions {
  /** 描边颜色 */
  strokeColor?: string | number[];
  /** 描边宽度 */
  strokeWidth?: number;
  /** 线条虚线样式 */
  lineDash?: number[];
  /** 填充颜色 */
  fillColor?: string;
  // ... 其他样式属性
}

// 文本选项 - 文本标注相关配置
interface TextOptions {
  /** 文本可见性 */
  textVisible?: boolean;
  /** 文本内容回调函数 */
  textCallBack?: (feature: any) => string;
  /** 文本字体 */
  textFont?: string;
  /** 文本填充颜色 */
  textFillColor?: string;
  // ... 其他文本属性
}

// 点位选项 - 点位图层专用配置
interface PointOptions extends BaseOptions, StyleOptions, TextOptions {
  /** 名称字段键 */
  nameKey?: string;
  /** 图标图片 */
  img?: string;
  /** 图标缩放比例 */
  scale?: number;
  /** 是否有图标 */
  hasImg?: boolean;
  /** 图标颜色 */
  iconColor?: string;
}

// 线条选项 - 线条图层专用配置
interface LineOptions extends BaseOptions, StyleOptions, TextOptions {
  /** 线条类型 */
  type?: string;
}

// 多边形选项 - 多边形图层专用配置
interface PolygonOptions extends BaseOptions, StyleOptions, TextOptions {
  /** 名称字段键 */
  nameKey?: string;
  /** 是否为蒙版 */
  mask?: boolean;
}

// 聚合选项 - 聚合点位专用配置
interface ClusterOptions extends PointOptions {
  /** 聚合距离 */
  distance?: number;
  /** 最小聚合距离 */
  minDistance?: number;
}

// 热力图选项
interface HeatMapOptions {
  layerName?: string,
  radius?: number,
  blur?: number,
  gradient?: string[],
  opacity?: number,
  visible?: boolean,
  zIndex?: number,
  valueKey?: string,
}

interface VueTemplatePointOptions {
  coordinate: [number, number];     // 点位坐标
  template: any;                    // Vue 组件模板
  data?: any;                       // 传递给组件的数据
  vue: VueInstance | VueApp;        // Vue 实例（Vue 2/3）
  layerName?: string;               // 图层名称
  id?: string;                      // 点位唯一标识
  className?: string;               // CSS 类名
  stopEvent?: boolean;              // 是否阻止事件冒泡
}

enum ErrorType {
  VALIDATION_ERROR = 'VALIDATION_ERROR',
  MAP_ERROR = 'MAP_ERROR',
  LAYER_ERROR = 'LAYER_ERROR',
  COORDINATE_ERROR = 'COORDINATE_ERROR',
  DATA_ERROR = 'DATA_ERROR',
  COMPONENT_ERROR = 'COMPONENT_ERROR'
}

class MyOpenLayersError extends Error {
  public readonly type: ErrorType;
  public readonly timestamp: Date;
  public readonly context?: any;
}

/**
 * 兼容性类型别名 - 保持向后兼容
 * @deprecated 请使用具体的选项接口：PointOptions, LineOptions, PolygonOptions
 */
type OptionsType = BaseOptions & StyleOptions & TextOptions & {
  nameKey?: string;
  img?: string;
  scale?: number;
  hasImg?: boolean;
  iconColor?: string;
  type?: string;
  mask?: boolean;
};

// 旧写法
import { MyOl, OptionsType } from 'my-openlayer';
const options: OptionsType = {
  layerName: 'points',
  strokeColor: '#ff0000',
  img: '/icons/marker.png'
};

// 新写法
import { MyOl, PointOptions } from 'my-openlayer';
const options: PointOptions = {
  layerName: 'points',
  strokeColor: '#ff0000',
  img: '/icons/marker.png'
};

const options: PointOptions = {
  img: '/path/to/icon.png',
  scale: 1.2,
  strokeColor: '#ff0000',
  textVisible: true
};

// 使用 EventManager
const eventManager = new EventManager(map.map);
eventManager.on('click', (eventData) => {
  console.log('点击位置:', eventData.coordinate);
});

// 使用 mapOnEvent
map.mapOnEvent('click', (feature, event) => {
  console.log('点击要素:', feature);
});

import { MyOl, ErrorHandler } from 'my-openlayer';

// 设置全局错误回调
ErrorHandler.getInstance().addErrorCallback((error) => {
  console.error('地图错误:', error.message);
});

// 手动验证
try {
  ErrorHandler.validateCoordinates(lng, lat);
} catch (error) {
  console.error('坐标验证失败:', error.message);
}