{"id":24150895,"url":"https://github.com/hongfaqiu/dde-earth-iframe","last_synced_at":"2026-05-11T08:16:06.139Z","repository":{"id":168926250,"uuid":"644736795","full_name":"hongfaqiu/dde-earth-iframe","owner":"hongfaqiu","description":"这是一个用于在网页中嵌入DDE-Earth Iframe的npm包","archived":false,"fork":false,"pushed_at":"2023-10-08T10:14:05.000Z","size":296,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-17T09:38:51.333Z","etag":null,"topics":["dde","deep-time-digital-earth","earth"],"latest_commit_sha":null,"homepage":"https://dde-earth-iframe.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hongfaqiu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-24T06:41:42.000Z","updated_at":"2023-07-18T09:28:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"2d743acd-e497-4304-85b6-defbed2b10f5","html_url":"https://github.com/hongfaqiu/dde-earth-iframe","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.303030303030303,"last_synced_commit":"e220a1aeedcc4e834781fe803638eae0f10519a4"},"previous_names":["hongfaqiu/dde-earth-iframe"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongfaqiu%2Fdde-earth-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongfaqiu%2Fdde-earth-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongfaqiu%2Fdde-earth-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongfaqiu%2Fdde-earth-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hongfaqiu","download_url":"https://codeload.github.com/hongfaqiu/dde-earth-iframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241095273,"owners_count":19908782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dde","deep-time-digital-earth","earth"],"created_at":"2025-01-12T09:13:01.548Z","updated_at":"2026-05-11T08:16:06.065Z","avatar_url":"https://github.com/hongfaqiu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dde-earth-iframe\r\n\r\n[![gzip size](https://img.shields.io/bundlephobia/minzip/dde-earth-iframe)](https://unpkg.com/dde-earth-iframe) ![npm latest version](https://img.shields.io/npm/v/dde-earth-iframe.svg) ![license](https://img.shields.io/npm/l/dde-earth-iframe)\r\n\r\n这是一个用于在网页中嵌入DDE-Earth Iframe的npm包。\r\n在TypeScript环境下，可以免去查阅操作手册的麻烦。\r\n\r\n[![CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/dde-earth-iframe-z01sy2)\r\n\r\n## 安装\r\n\r\n使用 npm 安装：\r\n\r\n```bash\r\nnpm install dde-earth-iframe --save\r\n```\r\n\r\n## 使用\r\n\r\n```ts\r\nimport EarthIframe from 'dde-earth-iframe';\r\n\r\nconst container = document.getElementById('container');\r\n\r\nconst earthIframe = new EarthIframe(container);\r\n\r\n// 等待初始化完成\r\nawait earthIframe.loadPromise;\r\n\r\n// 示例: 添加事件监听\r\nconst eventId = earthIframe.addEventListener('layer:remove', (res, type) =\u003e {\r\n  console.log(type, res);\r\n});\r\n\r\n// 示例: 移除事件监听\r\nearthIframe.removeEventListener(eventId);\r\n\r\n// 示例: 调用方法\r\nconst res = await earthIframe.dispatch('addLayer', {\r\n  layer: {\r\n    // 图层配置...\r\n  },\r\n  options: {\r\n    // 选项配置...\r\n  },\r\n});\r\n\r\n// 示例: 销毁实例\r\nearthIframe.destroy();\r\n```\r\n\r\n## 浏览器使用\r\n\r\n```html\r\n\u003cbody\u003e\r\n  \u003cdiv id=\"iframeContainer\"\u003e\u003c/div\u003e\r\n\u003c/body\u003e\r\n\r\n\u003cscript src=\"//unpkg.com/dde-earth-iframe@latest\"\u003e\u003c/script\u003e\r\n\r\n\u003cscript\u003e\r\n  const EarthIframeObj = new EarthIframe(\"iframeContainer\");\r\n\u003c/script\u003e\r\n```\r\n\r\n## API\r\n\r\n### EarthIframe\r\n\r\n```ts\r\nclass EarthIframe {\r\n  loadPromise: Promise\u003cthis\u003e;\r\n  /**\r\n   * 加载地球iframe\r\n   * @param container 容器元素或容器元素id\r\n   * @param opts 配置项\r\n   */\r\n  constructor(container: HTMLElement | string, opts?: Partial\u003cEarthIframeOptions\u003e);\r\n  get loaded(): boolean;\r\n  get isDestroy(): boolean;\r\n  /**\r\n   * 添加事件监听\r\n   * @param type 事件类型\r\n   * @param callback 回调函数\r\n   * @param opts 配置项\r\n   * @param opts.once 是否只执行一次回调并移除监听事件, 默认false\r\n   * @param opts.match 是否匹配返回值中的extra参数, 只有extra和id相等时才执行回调函数, 默认flase\r\n   * @param opts.id 自定义事件的唯一id, 重复则覆盖, 默认生成随机id\r\n   * @returns 监听事件的唯一id\r\n   */\r\n  addEventListener\u003cT extends keyof IframeListener.Event\u003e(type: T, callback: (res: IframeListener.Event[T], type?: T) =\u003e any, opts?: {\r\n      once?: boolean;\r\n      match?: boolean;\r\n      id?: string;\r\n  }): string;\r\n  /**\r\n   * 移除事件监听\r\n   * @param id 监听事件的唯一id\r\n   */\r\n  removeEventListener(id: string): void;\r\n  /**\r\n   * 发送事件\r\n   * @param type 事件类型\r\n   * @param body 事件参数\r\n   * @returns Promise\r\n   */\r\n  dispatch\u003cT extends keyof Iframe.Event\u003e(type: T, body: Iframe.Event[T]): Promise\u003cIframeListener.Event[T]\u003e;\r\n  /**\r\n   * 销毁实例\r\n   */\r\n  destroy(): void;\r\n}\r\n```\r\n\r\n### Iframe初始化配置项\r\n\r\n```ts\r\ntype EarthIframeOptions = {\r\n  /** iframe url, defaults to \"https://deep-time.org/map/#/showcase\" */\r\n  baseUrl?: string;\r\n} \u0026 Iframe.Event['mapConfig'];\r\n```\r\n\r\n### 可手动触发的Iframe事件\r\n\r\n```ts\r\nnamespace Iframe {\r\n  type Language =\r\n    /** 英语 */\r\n    'en-US' |\r\n    /** 简体中文 */\r\n    'zh-CN' |\r\n    /** 德语 */\r\n    'de-DE' |\r\n    /** 法语 */\r\n    'fr-FR' |\r\n    /** 西班牙语 */\r\n    'es-ES' |\r\n    /** 俄语 */\r\n    'ru-RU' |\r\n    /** 阿拉伯语 */\r\n    'ar-EG'\r\n\r\n  type EventType =\r\n    | 'LEFT_DOWN'\r\n    | 'LEFT_UP'\r\n    | 'LEFT_CLICK'\r\n    | 'LEFT_DOUBLE_CLICK'\r\n    | 'RIGHT_DOWN'\r\n    | 'RIGHT_UP'\r\n    | 'RIGHT_CLICK'\r\n    | 'MIDDLE_DOWN'\r\n    | 'MIDDLE_UP'\r\n    | 'MIDDLE_CLICK'\r\n    | 'MOUSE_MOVE'\r\n    | 'WHEEL'\r\n    | 'PINCH_START'\r\n    | 'PINCH_MOVE'\r\n    | 'PINCH_END';\r\n  \r\n  type Event = {\r\n    'addAtom': {\r\n      atom: API.Atom;\r\n      /** 默认都为true */\r\n      options?: {\r\n        /** 添加后是否显示 */\r\n        show?: boolean;\r\n        /** 是否显示添加成功/失败信息 */\r\n        showMessage?: boolean;\r\n        /** 添加完成后是否缩放到地图范围，\r\n         * 栅格方式加载需设置boundary或viewPort属性，否则缩放到默认范围\r\n         */\r\n        zoom?: boolean;\r\n        /** 添加到某个id图层下方 */\r\n        topLayerId?: string;\r\n      };\r\n    };\r\n    'addLayer': {\r\n      layer: Layer.LayerItem;\r\n      options?: {\r\n        /** 添加后是否显示，默认为true */\r\n        show?: boolean;\r\n        /** 是否显示添加成功/失败信息，默认为true */\r\n        showMessage?: boolean;\r\n        /** 添加完成后是否缩放到地图范围，默认为false\r\n         * 栅格方式加载需设置boundary或viewPort属性，否则缩放到默认范围\r\n         */\r\n        zoom?: boolean;\r\n        /** 添加到某个id图层下方 */\r\n        topLayerId?: string;\r\n      };\r\n    };\r\n    'removeLayer': {\r\n      id: string;\r\n      /** 默认都为true */\r\n      options?: {\r\n        /** 是否显示移除成功/失败信息 */\r\n        showMessage?: boolean;\r\n      };\r\n    };\r\n    'moveLayerById': {\r\n      sourceId: string;\r\n      targetId: string;\r\n    };\r\n    'addDataSet': Layer.DataSet | {\r\n      name: string;\r\n      id: string;\r\n    };\r\n    'removeDataSet': {\r\n      id: string;\r\n    };\r\n    'addPoints': {\r\n      /** 如果重复,会被覆盖 */\r\n      id: string;\r\n      positions: number[][];\r\n      style?: {\r\n        /** 点颜色 */\r\n        color?: string;\r\n        /** 点大小 */\r\n        pixelSize?: number;\r\n        outlineColor?: string;\r\n        outlineWidth?: number;\r\n      };\r\n      /** 属性 */\r\n      properties?: Record\u003cstring, any\u003e;\r\n    };\r\n    'removePoints': {\r\n      id: string;\r\n    };\r\n    'componentConfig': {\r\n      layerManage?: {\r\n        datasetManage?: {\r\n          disableRemove?: boolean;\r\n          hideLayerPlayer?: boolean;\r\n        };\r\n        /** 面板定位，默认[20, 20] */\r\n        position?: {\r\n          x?: number;\r\n          y?: number\r\n        }\r\n      };\r\n      showLegend?: boolean;\r\n    };\r\n    'mapConfig': {\r\n      /** 国际化语言 */\r\n      language?: Language;\r\n      /** 2为二维, 3为三维, 1为2.5D */\r\n      displayMode?: 1 | 2 | 3;\r\n      /** 是否显示大气 */\r\n      skyAtmosphere?: boolean;\r\n      /** 水汽含量 */\r\n      fogDensity?: number;\r\n      /** 无底图时的纯色背景css颜色, 默认为#4F4F4F */\r\n      baseColor?: string;\r\n      /** 底图 */\r\n      baseMap?: Layer.LayerItem;\r\n      /** 注记 */\r\n      annotationMap?: Layer.LayerItem;\r\n      /** 地形 */\r\n      terrain?: Layer.TerrainLayer;\r\n      /** 是否显示经纬度指示 */\r\n      lonlatIndicator?: boolean;\r\n      /** 是否显示二三维切换按钮 */\r\n      viewerModeSwitch?: boolean;\r\n      /** 是否显示地图请求进度条 */\r\n      ajaxBar?: boolean;\r\n      /** 是否显示量算按钮 */\r\n      measureTool?: boolean;\r\n      /** 是否显示导航控件 */\r\n      navigator?: boolean;\r\n      /** 是否显示信息条 */\r\n      mapStatusBar?: boolean;\r\n      /** 是否显示帧数控件 */\r\n      showFrames?: boolean;\r\n      /** 显示效果,与性能有关,数值0-1,越大越精细 */\r\n      performance?: number;\r\n      /** 地形拉伸系数 */\r\n      terrainExaggeration?: number;\r\n      /** 是否显示经纬网 */\r\n      graticules?: boolean;\r\n      /** 是否开启FXAA抗锯齿 */\r\n      antiAliasing?: boolean;\r\n      /** 版权信息 intellectualGraphVis是否展示 默认展示 intellectualGraphPos展示位置 不传默认是右下 */\r\n      intellectualGraphVis?: boolean;\r\n      intellectualGraphPos?: 'leftBottom' | 'rightBottom';\r\n      /** 是否显示卷帘工具 */\r\n      layerCompareTool?: boolean;\r\n      /** 地球的背景色 */\r\n      backgroundColor?: string;\r\n      /** 是否显示图例工具 */\r\n      legendSwitchTool?: boolean;\r\n      /** 是否显示图例 */\r\n      showLegend?: boolean;\r\n      /** 是否显示地名查询工具 */\r\n      geocoderTool?: boolean;\r\n    };\r\n    'cartography': {\r\n      show: boolean;\r\n      rzpj?: string; // 鉴权\r\n    };\r\n    'openTool': {\r\n      tool:\r\n      | 'geoReconstruct' //古地理重建工具\r\n      | 'layerSplit' // 卷帘工具\r\n      | 'layerVideo' // 图集播放工具\r\n      | 'customLayer' // 自定义添加图层\r\n      | 'customGeoJson' // 自定义创建geojson\r\n      | 'depthDataClip' // 深部数据裁剪\r\n      | 'contourLine' // 等高线地形分析\r\n      | 'COG2Terrain' // 栅格cog转地形\r\n      | 'ImgToAudio' // 图像转声音\r\n      | 'layerManager' //图层管理\r\n      | 'datasetManager' // 数据集管理\r\n\r\n      /** 默认为true,打开工具 */\r\n      show?: boolean;\r\n\r\n      /** 工具面板的样式，默认定位到左上角 */\r\n      style?: {\r\n        right?: number;\r\n        left?: number;\r\n        top?: number;\r\n        bottom?: number;\r\n        [key: string]: any;\r\n      };\r\n      /** 工具面板内容的样式 */\r\n      contentStyle?: React.CSSProperties;\r\n      /** 工具面板拖拽限制 */\r\n      bounds?: {\r\n        right?: number;\r\n        left?: number;\r\n        top?: number;\r\n        bottom?: number;\r\n      };\r\n    };\r\n    'renderLayer': {\r\n      id: string;\r\n      options: Layer.RenderOptions;\r\n      /** 强制以某种方式进行渲染 */\r\n      forceMethod?: Layer.LayerMethod;\r\n    };\r\n    'spatialQuery': {\r\n      /** 矢量图层的id, 每次只能开启一个图层的查询，填写''即为关闭空间查询 */\r\n      id: string;\r\n    };\r\n    'cogQuery': {\r\n      /** cog图层的id */\r\n      id: string;\r\n      /** 是否开启查询 */\r\n      enable: boolean;\r\n    };\r\n    'drawer': {\r\n      /** 绘制的图形类型 */\r\n      type: 'POLYGON' | 'POLYLINE' | 'POINT' | 'CIRCLE' | 'RECTANGLE';\r\n      /** 画图工具方法 */\r\n      operate: 'start' | 'destroy';\r\n      drawOptions?: {\r\n        /**\r\n         * 是否使用地形，当开启时需要浏览器支持地形选取功能，如果不支持将会被关闭\r\n         */\r\n        terrain?: boolean;\r\n        /**\r\n         * 操作方式\r\n         */\r\n        operateType?: {\r\n          /**\r\n           * @desc 勾画开始事件\r\n           * @type EventType\r\n           * @default LEFT_CLICK\r\n           */\r\n          START?: EventType;\r\n          /**\r\n           * @desc 勾画移动事件\r\n           * @type EventType\r\n           * @default MOUSE_MOVE\r\n           */\r\n          MOVING?: EventType;\r\n          /**\r\n           * @desc 勾画撤销事件\r\n           * @type EventType\r\n           * @default RIGHT_CLICK\r\n           */\r\n          CANCEL?: EventType;\r\n          /**\r\n           * @desc 勾画结束事件\r\n           * @type EventType\r\n           * @default LEFT_DOUBLE_CLICK\r\n           */\r\n          END?: EventType;\r\n        };\r\n        /** 勾画时的鼠标提示文字 */\r\n        tips?: {\r\n          init?: string | Element;\r\n          start?: string | Element;\r\n          end?: string | Element;\r\n        };\r\n      };\r\n      /**\r\n       * 是否只勾画一次，如果设为true，则在第一勾画结束时停止\r\n       * @default undefined\r\n       */\r\n      once?: boolean;\r\n      /**\r\n       * @desc 是否使用单例模式，如果开启，当勾画第二个图形时会销毁第一个图形\r\n       */\r\n      oneInstance?: boolean;\r\n    };\r\n    'zoomTo': ({\r\n      type: 'layer';\r\n        /** 图层id */\r\n        id: string;\r\n      } | {\r\n        type: 'viewPort';\r\n        /** 视点, [lon, lat, height] */\r\n        viewPort: number[];\r\n      } | {\r\n        type: 'home';\r\n      }) \u0026 {\r\n        /** 动画时长, 默认1s */\r\n        duration?: number;\r\n      };\r\n    'get:mapConfig': undefined;\r\n    'get:layers': undefined;\r\n    'get:dataset': undefined;\r\n  }\r\n}\r\n```\r\n\r\n### 默认的地图配置\r\n\r\n```ts\r\nconst DefaultMapConfig = {\r\n  navigator: true,\r\n  intellectualGraphVis: true,\r\n  intellectualGraphPos: undefined,\r\n  displayMode: 1,\r\n  skyAtmosphere: true,\r\n  fogDensity: 0.0001,\r\n  baseMap: {\r\n    id: '底图-ESRI影像底图',\r\n    method: 'arcgis',\r\n    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',\r\n  },\r\n  annotationMap: {},\r\n  terrain: {},\r\n  mapStatusBar: true,\r\n  viewerModeSwitch: true,\r\n  measureTool: true,\r\n  cameraController: true,\r\n  ajaxBar: true,\r\n  performance: 1.0,\r\n  terrainExaggeration: 1.0,\r\n  graticules: false,\r\n  antiAliasing: false,\r\n  translucency: {\r\n    enable: false,\r\n    fadeByDistance: true,\r\n    alpha: 0.5,\r\n  },\r\n  geoTimeLine: true,\r\n  geoTime: {\r\n    version: 'ICS2020',\r\n    name: 'Geologic Time',\r\n    scale: true,\r\n    base: 0,\r\n    top: 0\r\n  },\r\n  backgroundColor: '#00000099',\r\n  layerCompareTool: true,\r\n  baseColor: '#4F4F4F',\r\n  legendSwitchTool: true,\r\n  showLegend: false,\r\n  geocoderTool: true,\r\n};\r\n```\r\n\r\n### 可监听的Iframe事件\r\n\r\n```ts\r\nnamespace IframeListener {\r\n  type Event = {\r\n    'initial': boolean;\r\n    'layer:add': Layer.layerManageItem;\r\n    'layer:render': Layer.layerManageItem;\r\n    'layer:update': Layer.layerManageItem;\r\n    'layer:remove': Layer.layerManageItem;\r\n    'layer:move': Layer.layerManageItem[];\r\n    'dataSet:add': Layer.DataSet;\r\n    'dataSet:update': Layer.DataSet;\r\n    'dataSet:remove': Layer.DataSet;\r\n    'mapConfig:update': Iframe.Event['mapConfig'];\r\n\r\n    'addAtom': Layer.layerManageItem;\r\n    'addLayer': Layer.layerManageItem;\r\n    'removeLayer': boolean;\r\n    'moveLayerById': boolean;\r\n    'addDataSet': boolean;\r\n    'removeDataSet': boolean;\r\n    'addPoints': boolean;\r\n    'removePoints': boolean;\r\n    'componentConfig': boolean;\r\n    'mapConfig': boolean;\r\n    'cartography': boolean;\r\n    'openTool': boolean;\r\n    'renderLayer': boolean;\r\n    'spatialQuery': boolean;\r\n    'cogQuery': boolean;\r\n    'drawer': {\r\n      /** 绘制的图形类型 */\r\n      type: 'POLYGON' | 'POLYLINE' | 'POINT' | 'CIRCLE' | 'RECTANGLE';\r\n      /** 经纬度坐标串 */\r\n      positions: number[][];\r\n    };\r\n    'zoomTo': boolean;\r\n    'get:mapConfig': Iframe.Event['mapConfig']\r\n    'get:layers': Layer.layerManageItem[];\r\n    'get:dataset': Layer.DataSet[];\r\n    /** 工具开关回调 */\r\n    'toolVisible': {\r\n      key: Iframe.Event['openTool']['tool'];\r\n      show: boolean;\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Layer类型声明\r\n\r\n请查看 [ts声明]('./src/typings/layer.ts')","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhongfaqiu%2Fdde-earth-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhongfaqiu%2Fdde-earth-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhongfaqiu%2Fdde-earth-iframe/lists"}