# @anthropomorphic/delorean 中文文档 规范地址：https://npmcn.com/package/%40anthropomorphic/delorean/ 版本：0\.5\.0 npm 元数据更新时间：2026-11-02T09:24:44.719Z 中文译文更新时间：2026-11-06T22:59:17.472Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40anthropomorphic/delorean 原文对照：https://npmcn.com/package/%40anthropomorphic/delorean/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：59.9 kB，21 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：leaflet \*，maplibre-gl \* - 首次发布：2026-10-27T14:15:09.127Z - 最新版本发布：2026-11-02T09:24:44.022Z - 近 30 天下载量：2199（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：14（近 12 个月 14 个） ## 中文简介 Leaflet和Maplibre地图框架的 WMS 层的轻量级自定义时间控制器库. ## 安装 ```sh npm install @anthropomorphic/delorean ``` 也可以使用：`pnpm add @anthropomorphic/delorean`、`yarn add @anthropomorphic/delorean`、`bun add @anthropomorphic/delorean` ## README # 德意志语Name Temperialize di 层光栅WMS con Leaflet e MapLibre GL JS. 包含非核心的indidendente dal框架,每个i 层 WMS e un web 组件每个i Controlli Tatimeri 对应的适配器. ## 安装zione Antola Delorean e il 框架 cartografico utilizzato dall'applicazione : 维基百科中的相关条目: 克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多克多 ```sh npm install @anthropomorphic/delorean leaflet # oppure npm install @anthropomorphic/delorean maplibre-gl ``` Leaflet e MapLibre GL JS sono同龄人依赖opzionali:安放a quello richiesto dall'adapter che utilizzi. Le richieste Get Capabilities vengono effettuate dal 浏览器, quindi il 服务器 WMS deve consessionire richiest 交叉发端(CORS). ## 导入 Il 软件包 espone 切入点 ditinti e un esporta 未切入点 主 : ```ts import { Delorean } from '@anthropomorphic/delorean/core'; import { DeloreanController } from '@anthropomorphic/delorean/ui'; import { LeafletRasterTimeLayer } from '@anthropomorphic/delorean/leaflet'; import { MaplibreglRasterTimeLayer } from '@anthropomorphic/delorean/maplibre'; ``` 进口独行滑翔进入点 necessari。 进口 `@anthropomorphic/delorean/ui` registra il 自定义元素 ``。 。 。 . ## 核心 拉亚克 `Delorean` (原始内容存档于2018-10-21). Gestisce timestamp Unix espressi in millisedi. Può sessere usata indidentemente da Leaflet, MapLibre e dal 控制器 UI. ```ts import { Delorean } from '@anthropomorphic/delorean/core'; const times = [ Date.parse('2024-01-01T00:00:00Z'), Date.parse('2024-01-02T00:00:00Z') ]; const delorean = new Delorean(times); delorean.addTimeChangedCallback((time, source) => { console.log(time === undefined ? undefined : new Date(time).toISOString(), source); }); delorean.nextTime(); ``` ### 建筑 | 公司 | 德克丽齐昂 | | --- | --- | | `new Delorean(defaultTimes: number[] = [], defaultCurrentTime: number = Date.now())` | Crea una nuova istanza del core. 中国植物物种信息数据库. | | 参数 | 提波 | 默认 | 德克丽齐昂 | | --- | --- | --- | --- | | `defaultTimes` | `number[]` | `[]` | Tempi Iniziali, 来时间戳在毫秒. | | `defaultCurrentTime` | `number` | `Date.now()` | Tempo iniziale da sfacere con i tipoli unponibili. 互联网档案馆的存檔,存档日期2013-12-02. | ### Metodi e 专有性 | API 密码 | Tipo / 事务所a | 德克丽齐昂 | | --- | --- | --- | | `times` | `number[]` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我需要你帮忙. | | `currentTime` | `number | undefined` | (一) 时间戳; `undefined` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}她不是塞雷齐奥内. | | `setTimes(newTimes, operation = 'intersect')` | `(newTimes: number[], operation?: TimesOperation) => void` | Aggiorna i tempi e mantiene la selezione corrente solo e il temp selezionato è ancora sente. 中国植物物种信息数据库. | | `setCurrentTime(time)` | `(time: number) => void` | Seleziona il tepic unposibile suncee o uguale al timetamp richiesto; se il timetamp 在 il primo unposibile, seleziona il primo 之前,先于 il primo unposibile, seleziona il primo. 索文特召回通知 `default`。 。 。 . | | `closestTime(time)` | `(time: number | undefined) => void` | (原始内容存档于2018-09-21) (英语). Seleziona il tepic disponibile piú vicino che sia minore o guale al valore richiesto. 索文特召回通知 `input`。 。 。 . | | `resetCurrentTime()` | `() => void` | 接力相接相接相接相接相接相接相接相接相接相接相接相接 `undefined`。 。 。 . | | `removeTimes(timesToRemove)` | `(timesToRemove: number[]) => void` | (原始内容存档于2018-10-21) (意大利语). Rimuove i temi indicati; aggiorna o azzera la selezione se necessario. | | `prevTime(loop = true)` | `(loop?: boolean) => void` | 帕萨节奏先例。 密码 `loop: true`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你应该知道 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你应该知道 非法无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相相无相无相相相无相相相相相相无相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. | | `nextTime(loop = true)` | `(loop?: boolean) => void` | 帕萨节奏成功。 密码 `loop: true`,该死的'ultimo 龙卷风 al primo。 非法无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相无相相无相无相相相无相相相相相相无相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. | | `firstTime()` | `() => void` | Seleziona il primo tepic disponibile; senza timpi, azzera la selezione. 中国植物物种信息数据库. | | `lastTime()` | `() => void` | Seleziona l'ultimo tepic disponibile; senza timperi, azzera la selezione. 中国植物物种信息数据库. | | `togglePlay(isPlaying, interval = 3000)` | `(isPlaying: boolean, interval?: number) => void` | 阿维娅·奥·克萨斯·克萨斯(Avvia o carna l'avanzamento auto). `interval` (原始内容存档于2017-03-26). espresto in millistei. | | `addTimeChangedCallback(callback)` | `(callback: (newTime: number | undefined, source: TimeChangeSource) => void) => void` | 登记器 un a callback per i cambi di temple. 记录器 / i cambi di temp. | | `removeTimeChangedCallback(callback)` | `(callback: (newTime: number | undefined, source: TimeChangeSource) => void) => void` | Rimuove la callback indicata. 中国植物物种信息数据库. | | `timeChanged(newTime, source = 'default')` | `(newTime: number | undefined, source?: TimeChangeSource) => void` | 重新登记. | ### `TimesOperation` `TimesOperation` 工会类型、非工会类型: | 瓦罗里语Name | Comportamento 执行 | | --- | --- | | `union` | (原始内容存档于2018-10-21) (英语). Unisce i tempi esistenti e quelli nuovi, Elimina replicati e ordina il risultato in modo crescente. | | `intersect` | 行为规范 `union`: unisce, deduplica e ordina (英语). **非卡尔科拉l'intersezione**。 。 。 . | | `replace` | (原始内容存档于2018-03-27) (英语). Sostituisce i tempi esistenti con quelli nuovi e li ordina in modo crescente. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}当然是重复 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的. | > **编号 :** `intersect` (原始内容存档于2018-10-26) (英语). una ancora il comportamento matematico sugterito dal nome. 非票价affidamento su un'intersezione effettiva finché trade a operazione un viene corretta nella libreria. 中国经济网. Il costruttore ordina i timi Iniziali in ordine Crescente. 中国植物物种信息数据库. 萨斯丹扎·德克多尼, `currentTime` è `undefined`. 泉户 `setTimes()` (原始内容存档于2018-10-25) (英语). rimuove il temp corrente, la selezione viene azerata; quando il temp è ancora sente, rimane selezionato. ### 索根特·德卡姆比奥节奏 鸡尾酒 `TimeChangeSource` (原始内容存档于2013-10-12). indica l'grounde della modifica: | 瓦罗里语Name | 符号 | | --- | --- | | `default` | (原始内容存档于2017-10-29). Modifica prodotta dai normali metodi del core o dagli 适配器. | | `input` | 莫迪克·普罗多塔达 `closestTime()`在 risposta 输入自定义控制器. | (原始内容存档于2019-10-21) (英语). Questo permette di non riscrivere il valore digitalato nell'input quando il core seleziona il temple disponibile excore. 假设 : ```ts delorean.addTimeChangedCallback((time, source) => { if (source === 'input') return; controller.time = time; }); ``` ## 适配器 Gli 适配器 `Delorean` 一个无地层光栅WMS del框架 Cartografico Corrispondente. 中国植物物种信息数据库. 卡里卡诺一 蒂皮·达拉维耶 `time` wMS Get Capabilities e aggiornano il 地层 quando cambia il temp del core. 中国植物物种信息数据库. ### 传单 `LeafletRasterTimeLayer` crea un WMS (英语) `TileLayer` 叶取. ```ts import * as leaflet from 'leaflet'; import { Delorean } from '@anthropomorphic/delorean/core'; import { LeafletRasterTimeLayer } from '@anthropomorphic/delorean/leaflet'; const map = leaflet.map('map').setView([39.67209208942453, -101.03346117851018], 5); const delorean = new Delorean(); const timeLayer = new LeafletRasterTimeLayer(delorean, { layerId: 'nexrad-n0r-wmst', tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi', wmsOptions: { layers: 'nexrad-n0r-wmst', format: 'image/png', styles: '', transparent: true, version: '1.3.0' }, getCapabilitiesUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0' }); await timeLayer.addTo(map); // Quando il layer non serve più: timeLayer.removeFrom(map); ``` 费城: `new LeafletRasterTimeLayer(delorean, options)`。 。 。 . | 米多多/专有 | 德克丽齐昂 | | --- | --- | | `layerId` | (原始内容存档于2018-10-29). Nome del plale WMS. | | `layer` | (原始内容存档于2018-07-29). Layer Leaflet sottostante. | | `getCapabilitiesUrl` | URL Get Capabilitys obzionale nel tipo; 每一个caricare i tipoi 的necessario. 中国植物物种信息数据库. | | `addTo(map, defaultTime?, operation = 'intersect')` | Carica i timpi, aggiunge il layer alla mappa e registra la recallback. 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语 乌萨 `defaultTime` e infine l'ultimo tepic disponsibile. 使用电子交换器或电子交换器. | | `removeFrom(map)` | (原始内容存档于2018-10-21) (英语). Rimuove il plale, I suoi tipoi dal core e la callback di aggiornamento. | | `loadTimes()` | 重新启动 una `Promise` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}节奏提前确定 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我需要你. | | `setTime(time)` | Aggiorna il 伞兵 `TIME` 三角层。 谢 `time` è `undefined`我们的心; 自己不 i'ultimo tempe del core; se no ci sono tipoli disponibili, 非 modifica il 层. | #### `LeafletRasterTimeLayerOptions` | 产权 | 提波 | 义务 | 德克丽齐昂 | | --- | --- | --- | --- | | `layerId` | `string` | s | Nome del 地层 WMS, ad esempio `workspace:layer`。 。 。 . | | `tileBaseUrl` | `string` | s | 端点WMS usato per le richieste delle 瓷砖. | | `wmsOptions` | `leaflet.WMSOptions` | s | (原始内容存档于2018-09-29). Opzioni del plale WMS di Leaflet. | | `getCapabilitiesUrl` | `string` | 无螺旋管,每秒 `addTo()` | URL del documento Get Capabilities da cui leggere i timpi. 中国大陆地名信息系统. | ### 地图Libre `MaplibreglRasterTimeLayer` crea una 光栅源 e un 光栅层 MapLibre. {\\fn华文楷体\\fs20\\bord1\\shad1\\1cHE0E0E0\\2cH000000}我把活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 `tileUrlParams` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}不要用绳子; `tileUrlTemplate` 平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平. ```ts import * as maplibregl from 'maplibre-gl'; import { Delorean } from '@anthropomorphic/delorean/core'; import { MaplibreglRasterTimeLayer } from '@anthropomorphic/delorean/maplibre'; const map = new maplibregl.Map({ container: 'map', style: 'https://tiles.openfreemap.org/styles/liberty', center: [-101.03346117851018, 39.67209208942453], zoom: 5 }); const delorean = new Delorean(); const timeLayer = new MaplibreglRasterTimeLayer(delorean, { sourceId: 'wms-test-source', layerId: 'nexrad-n0r-wmst', tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi', tileUrlParams: { service: 'WMS', layers: 'nexrad-n0r-wmst', styles: '', transparent: 'true', format: 'image/png', version: '1.3.0', request: 'GetMap', crs: 'EPSG:3857', width: '256', height: '256' }, tileUrlTemplate: { bbox: '{bbox-epsg-3857}' }, getCapabilitiesUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0' }); await timeLayer.addTo(map); // Quando il layer non serve più: timeLayer.removeFrom(map); ``` 费城: `new MaplibreglRasterTimeLayer(delorean, options)`。 。 。 . | 米多多/专有 | 德克丽齐昂 | | --- | --- | | `sourceId` | ID della光栅源地图Libre. | | `source` | 特地来电源光栅. | | `layerId` | (原始内容存档于2018-09-26). Nome del plale WMS e ID del plale MapLibre. | | `layer` | (原始内容存档于2017-10-21). Specta del raster system MapLibre. | | `getCapabilitiesUrl` | URL Get Capabilitys obzionale nel tipo; 每一个caricare i tipoi 的necessario. 中国植物物种信息数据库. | | `addTo(map, defaultTime?, operation = 'intersect')` | Carica i timpi, aggiunge source e 层 e registra la recallback. 中国植物物种信息数据库. 乌萨 `defaultTime` e infine l'ultimo tepic disponsibile. 使用电子交换器或电子交换器. | | `removeFrom(map)` | Rimuove地层 e source, I suoi timpi dal core e la callback di aggiornamento. 中国植物物种信息数据库. | | `loadTimes()` | 重新启动 una `Promise` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}节奏提前确定 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我需要你. | | `setTime(map, time)` | Aggiorna l'URL delle 瓷砖 con il 伞兵 `TIME`页:1 `time` è `undefined`我们的心; 自己不 i'ultimo tempe del core; se no ci sono tipoli disponibili, 非 modifica il 层. | #### `MaplibreglRasterTimeLayerOptions` | 产权 | 提波 | 义务 | 德克丽齐昂 | | --- | --- | --- | --- | | `sourceId` | `string` | s | ID della光栅源地图Libre. | | `layerId` | `string` | s | (原始内容存档于2018-09-26). Nome del plale WMS e ID del plale MapLibre. | | `tileBaseUrl` | `string` | s | 端点WMS usato per le richieste delle 瓷砖. | | `tileUrlParams` | `Record` | s | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的 适应者阿吉奥纳 `TIME`。 。 。 . | | `tileUrlTemplate` | `Record` | s | Parametri agagiunti all'URL, 包容的占位符来了 `{bbox-epsg-3857}`。 。 。 . | | `paint` | `maplibregl.RasterLayerSpecification['paint']` | 没有 | 透视地层. | | `getCapabilitiesUrl` | `string` | 无螺旋管,每秒 `addTo()` | URL del documento Get Capabilities da cui leggere i timpi. 中国大陆地名信息系统. | ## 主计长 UI 网络组件 ``. . . . . . . . 阿格金吉·阿特克特布多·布来诺 `readonly` 按非变异物计算: ```html ``` (原始内容存档于2013-10-12) (英语). L'attributo può anche essere aggiunto o rimosso dinamicamente; il 组件 aggiorna lo stato `readonly` 代理输入间距 : ```ts controller.setAttribute('readonly', ''); controller.removeAttribute('readonly'); ``` 进口 `@anthropomorphic/delorean/ui` registra il 自定义元素 : ```ts import { DeloreanController } from '@anthropomorphic/delorean/ui'; const controller = document.querySelector('delorean-controller') as DeloreanController; controller.time = Date.now(); ``` Il 设置 `time` 毫秒时标出时间戳 `undefined`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}探险狂想 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我需要你. Il 控制器 Emette 事件i DOM con `bubbles: true` 电子 `composed: true`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}Ascoltabili dagli menti antenati anche attraversando uno shadow DOM. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我需要你帮忙. | 偶数 | `detail` | 德克丽齐昂 | | --- | --- | --- | | `delorean-firsttime` | —— 说 | 瑞奇斯塔·德·塞利西奥纳 简洁的节奏. | | `delorean-prevtime` | —— 说 | Richesta di selezionare il tempt suncele (英语:Richesta di selezionare il tempt suncele (film))是法国的首屈一指. | | `delorean-nexttime` | —— 说 | Richesta di seleziona i temple supposivo. (原始内容存档于2018-09-21) (英语). | | `delorean-lasttime` | —— 说 | Richesta di selezion are I'ultimo teat. 瑞奇斯塔·德·塞列西翁是我的节奏. | | `delorean-play` | `boolean` | Cambiamento dello stato play/pausa(英语: `true` 每场比赛, `false` 每帕萨. | | `delorean-customtime` | `string` | Emesso quando il campo 数据 perde il 焦; 等效 il valore `datetime-local` (原始内容存档于2018-10-21). inserito dall'utente. | 每块无节奏的数位核,在时间戳中转换为 il valore locale e usa `closestTime()`Il valore di (英语) `datetime-local` 不包括非 fuso orario : `new Date(value)` lo 解释 nel fuso 地方 del 浏览器 。 Il metodo sceglie il special disponibile sunce o uguale al valore digitalato. 中国植物物种信息数据库. 中国植物物种信息数据库. 我唤回稻谷 `source: 'input'` se viene selezionato un temp; ignorando surgente a sorgente nell'aggiornamento del control si mantiene visibile il valore digitato; mentre gli 适配器 possono aggiornare i 层节奏分解 selezionato. ```ts this.addEventListener('delorean-customtime', (event: Event) => { const value = (event as CustomEvent).detail; const timestamp = value ? new Date(value).getTime() : undefined; delorean.closestTime(timestamp); }); delorean.addTimeChangedCallback((time, source) => { if (source === 'input') return; controller.time = time; }); ``` 瓦洛雷·因塞里托先生在不负责任之前, `closestTime()` azzera la selezione; in trusto caso il callback mishve (原始内容存档于2018-08-29). 黑龙江省政府网站 `undefined` 高温 `default`成功之道,无所不包 帕桑多语Name `undefined` (ad esempio per un campo vuoto) si azzera la selezione. 中国植物物种信息数据库. `delorean-customtime` (原始内容存档于2018-06-26) (英语). viene emesso al `blur`无名小卒. Le Parti del web 组件 sono personizzabili dall'esterno con lo profession-elemento CSS 互联网档案馆的存檔,存档日期2013-12-04 `::part()`数字 : ```css delorean-controller::part(delorean) { flex-direction: column; } delorean-controller::part(delorean__first) { background-color: red; } ``` | 编 | 元素 | 德克丽齐昂 | | --- | --- | --- | | `delorean` | `div` | (原始内容存档于2017-10-25). Contenitore esterno. | | `delorean__first` | `button` | Torna al primo temple unponibile. (原始内容存档于2018-09-29) (英语). | | `delorean__previous` | `button` | Torna 节奏先例. | | `delorean__play` | `button` | 阿尔特纳玩epousa. | | `delorean__next` | `button` | 帕萨节奏成功. | | `delorean__last` | `button` | 帕萨都无动于衷. | | `delorean__datetime` | `input[type="datetime-local"]` | Campo Tatime; 调制自导自导自导自导自导自导自导自导自导自导自导自出 `readonly`。 。 。 . | ## 获取能力 e 格式化时间 Gli 适配器 richiedono il documento WMS Get Capabilities 有轨电车 `fetch`层地连结a `layerId` e leggono una 维度 `time` (单位:千美元)`Dimension` 欧 `Extent`) (中文(简体) ). Il浏览器去Ve Poter 加入所有'端点有轨电车 CORS. Il 解析地块 : - (一) 瓦罗里-蒂萨蒂-迪斯雷蒂-德维戈拉; - 取消 singolo 间隔lo nel 格式化 `inizio/fine/periodo`以 gi为单位 `P1D` 欧 `PT6H`) (中文(简体) ). (原始内容存档于2019-09-21) (英语). Glisecutli senza perio, con perio not supportato o con fine suncle un'inizio producono una lista di tipoli vute. (原始内容存档于2019-06-26) (英语). La cozinazione di piú interceptli e valori discreti nella stessa viene espansa non viene espansa come una serie completa di interctli. Gli 适配器 Cercano il 层每nome Esatto. iil 层非 esiste nel 文档 o 非 espone una 维度时间, il caricamento fallisce con un errore. `getCapabilitiesUrl` (原始内容存档于2018-03-21) (英语). opzionale nelle interfacce TypeScript, ma deve essere fornito per usare `loadTimes()` 欧 `addTo()`。 。 。 . ## Esempi del progetto (英语) Il 寄存器已到期 : - `examples/delorean-leaflet` - `examples/delorean-maplibre` (原始内容存档于2013-10-12) ```sh npm pack ``` `npm pack` 创建 e genra un 文件 `.tgz` (法语) `anthropomorphic-delorean-0.4.0.tgz`) (中文(简体) ). Poi, dalla cartella della demo, sir a il tarball generrato e avviala: i; ll; Po; Po; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有; 有 ```sh cd examples/delorean-leaflet npm install ../../anthropomorphic-delorean-0.4.0.tgz npm run dev ``` Sostituisci il nome del 文件 存档 `.tgz` 相亲相爱 `npm pack`. Per la demo MapLibre, usa `examples/delorean-maplibre` (原始内容存档于2012-10-12). al posto della cartella Leaflet. Questo flusso testa localmente la vatee del profile, comprese le modificehe no ancora pubblicate; 每一个 verificare un a 释放 publicata, 安装 a invece il 包 con `npm install @anthropomorphic/delorean`。 。 。 . ## Esempi 补选 Gli esempi seguenti sono Basati sulle demo del profile. 互联网档案馆的存檔,存档日期2013-12-02. Usano il 软件包 `@anthropomorphic/delorean`,i nuovi eventi e il 层 WMS NEXRAD delle 演示. 由Testarli con il codice locale, crea e sinda il tarball came descritto nella sezione suncore; 在un'applicazione si sind a normalmente il package publicato con npm. 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语 - 谚语. ### 叶片 ```html delorean-leaflet
``` ```css /* style.css */ html, body { margin: 0; padding: 0; } app-leaflet { display: block; height: 100dvh; } .add-layer-btn, .remove-layer-btn { position: fixed; z-index: 999; left: 16px; } .add-layer-btn { top: 16px; } .remove-layer-btn { top: 48px; } ``` ```ts // main.ts import './style.css'; import './leaflet'; import type { Leaflet } from './leaflet'; const leaflet = document.querySelector('#maplibre') as Leaflet; const addBtn = document.querySelector('#add-layer') as HTMLButtonElement; const removeBtn = document.querySelector('#remove-layer') as HTMLButtonElement; addBtn.onclick = () => leaflet.addWmsTimeLayer({ layerId: 'nexrad-n0r-wmst', tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi', wmsOptions: { layers: 'nexrad-n0r-wmst', format: 'image/png', styles: '', transparent: true, version: '1.3.0' }, getCapabilitiesUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0' }); removeBtn.onclick = () => leaflet.removeWmsTimeLayer('nexrad-n0r-wmst'); ``` ```ts // leaflet.ts import * as leaflet from 'leaflet'; import style from 'leaflet/dist/leaflet.css?raw'; import { Delorean } from '@anthropomorphic/delorean/core'; import { LeafletRasterTimeLayer, type LeafletRasterTimeLayerOptions } from '@anthropomorphic/delorean/leaflet'; import { DeloreanController } from '@anthropomorphic/delorean/ui'; export class Leaflet extends HTMLElement { public shadowRoot: ShadowRoot; #map?: leaflet.Map; #delorean?: Delorean; #deloreanController?: DeloreanController; #layers: LeafletRasterTimeLayer[] = []; constructor() { super(); this.shadowRoot = this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(this.#html().content.cloneNode(true)); this.shadowRoot.appendChild(this.#css().cloneNode(true)); const leafletStylesheet = new CSSStyleSheet(); leafletStylesheet.replaceSync(style); this.shadowRoot.adoptedStyleSheets.push(leafletStylesheet); this.#deloreanController = this.shadowRoot.querySelector('#delorean') as DeloreanController; } #html(): HTMLTemplateElement { const template = document.createElement('template'); template.innerHTML = `
`; return template; } #css(): HTMLStyleElement { const style = document.createElement('style'); style.innerHTML = ` .leaflet { height: 100%; } .delorean { position: fixed; z-index: 999; bottom: 40px; left: 40px; } `; return style; } public connectedCallback(): void { this.#init(); this.#setup(); } #init(): void { const container = this.shadowRoot.querySelector('#leaflet'); if (!(container instanceof HTMLElement)) return; this.#map = leaflet.map(container, { zoomControl: false }) .setView([39.67209208942453, -101.03346117851018], 5) .addLayer(leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png')); this.#delorean = new Delorean(); this.#delorean.addTimeChangedCallback((newTime, source) => { if (source === 'input') return; if (!this.#map || !this.#deloreanController) return; this.#deloreanController.time = newTime; }); } #setup(): void { this.addEventListener('delorean-firsttime', () => this.#delorean?.firstTime()); this.addEventListener('delorean-prevtime', () => this.#delorean?.prevTime()); this.addEventListener('delorean-nexttime', () => this.#delorean?.nextTime()); this.addEventListener('delorean-lasttime', () => this.#delorean?.lastTime()); this.addEventListener('delorean-play', (event: Event) => { this.#delorean?.togglePlay((event as CustomEvent).detail, 3000); }); this.addEventListener('delorean-customtime', (event: Event) => { const value = (event as CustomEvent).detail; const time = value ? new Date(value).getTime() : undefined; this.#delorean?.closestTime(time); }); } public async addWmsTimeLayer(options: LeafletRasterTimeLayerOptions): Promise { if (!this.#map || !this.#delorean) return; const wmsTimeLayer = new LeafletRasterTimeLayer(this.#delorean, options); await wmsTimeLayer.addTo(this.#map, 1787196600000, 'intersect'); this.#layers.push(wmsTimeLayer); } public removeWmsTimeLayer(layerId: string): void { const foundLayer = this.#layers.find((layer) => layer.layerId === layerId); if (!this.#map || !foundLayer) return; foundLayer.removeFrom(this.#map); this.#layers = this.#layers.filter((layer) => layer !== foundLayer); } } customElements.define('app-leaflet', Leaflet); ``` ### 地图Libre ```html delorean-maplibre
``` ```css /* style.css */ html, body { margin: 0; padding: 0; } app-maplibre { display: block; height: 100dvh; } .add-layer-btn, .remove-layer-btn { position: fixed; z-index: 999; left: 16px; } .add-layer-btn { top: 16px; } .remove-layer-btn { top: 48px; } ``` ```ts // main.ts import './style.css'; import './maplibre'; import type { Maplibre } from './maplibre'; const maplibre = document.querySelector('#maplibre') as Maplibre; const addBtn = document.querySelector('#add-layer') as HTMLButtonElement; const removeBtn = document.querySelector('#remove-layer') as HTMLButtonElement; addBtn.onclick = () => maplibre.addWmsTimeLayer({ sourceId: 'wms-test-source', layerId: 'nexrad-n0r-wmst', tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi', tileUrlParams: { service: 'WMS', layers: 'nexrad-n0r-wmst', styles: '', transparent: 'true', format: 'image/png', version: '1.3.0', request: 'GetMap', crs: 'EPSG:3857', width: '256', height: '256' }, tileUrlTemplate: { bbox: '{bbox-epsg-3857}' }, getCapabilitiesUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0' }); removeBtn.onclick = () => maplibre.removeWmsTimeLayer('nexrad-n0r-wmst'); ``` ```ts // maplibre.ts import * as maplibregl from 'maplibre-gl'; import style from 'maplibre-gl/dist/maplibre-gl.css?raw'; import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'; import { Delorean } from '@anthropomorphic/delorean/core'; import { MaplibreglRasterTimeLayer, type MaplibreglRasterTimeLayerOptions } from '@anthropomorphic/delorean/maplibre'; import { DeloreanController } from '@anthropomorphic/delorean/ui'; maplibregl.setWorkerUrl(workerUrl); export class Maplibre extends HTMLElement { public shadowRoot: ShadowRoot; #map?: maplibregl.Map; #delorean?: Delorean; #deloreanController?: DeloreanController; #layers: MaplibreglRasterTimeLayer[] = []; constructor() { super(); this.shadowRoot = this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(this.#html().content.cloneNode(true)); this.shadowRoot.appendChild(this.#css().cloneNode(true)); const maplibreStylesheet = new CSSStyleSheet(); maplibreStylesheet.replaceSync(style); this.shadowRoot.adoptedStyleSheets.push(maplibreStylesheet); this.#deloreanController = this.shadowRoot.querySelector('#delorean') as DeloreanController; } #html(): HTMLTemplateElement { const template = document.createElement('template'); template.innerHTML = `
`; return template; } #css(): HTMLStyleElement { const style = document.createElement('style'); style.innerHTML = ` .maplibre { height: 100%; } .delorean { position: fixed; z-index: 999; bottom: 40px; left: 40px; } `; return style; } public connectedCallback(): void { this.#init(); this.#setup(); } #init(): void { const container = this.shadowRoot.querySelector('#maplibre'); if (!(container instanceof HTMLElement)) return; this.#map = new maplibregl.Map({ container, style: 'https://tiles.openfreemap.org/styles/liberty', center: [-101.03346117851018, 39.67209208942453], zoom: 5 }); this.#delorean = new Delorean(); this.#delorean.addTimeChangedCallback((newTime, source) => { if (source === 'input') return; if (!this.#map || !this.#deloreanController) return; this.#deloreanController.time = newTime; }); } #setup(): void { this.addEventListener('delorean-firsttime', () => this.#delorean?.firstTime()); this.addEventListener('delorean-prevtime', () => this.#delorean?.prevTime()); this.addEventListener('delorean-nexttime', () => this.#delorean?.nextTime()); this.addEventListener('delorean-lasttime', () => this.#delorean?.lastTime()); this.addEventListener('delorean-play', (event: Event) => { this.#delorean?.togglePlay((event as CustomEvent).detail, 1000); }); this.addEventListener('delorean-customtime', (event: Event) => { const value = (event as CustomEvent).detail; const time = value ? new Date(value).getTime() : undefined; this.#delorean?.closestTime(time); }); } public async addWmsTimeLayer(options: MaplibreglRasterTimeLayerOptions): Promise { if (!this.#map || !this.#delorean) return; const wmsTimeLayer = new MaplibreglRasterTimeLayer(this.#delorean, options); await wmsTimeLayer.addTo(this.#map); this.#layers.push(wmsTimeLayer); } public removeWmsTimeLayer(layerId: string): void { const foundLayer = this.#layers.find((layer) => layer.layerId === layerId); if (!this.#map || !foundLayer) return; foundLayer.removeFrom(this.#map); this.#layers = this.#layers.filter((layer) => layer !== foundLayer); } } customElements.define('app-maplibre', Maplibre); ``` La demo Leaflet imposta un timettamp iniziaale esplicito in 互联网档案馆的存檔,存档日期2013-12-22 `addTo()`La demo MapLibre un lo passa e usa quindi il default WMS, se presente, oppure l'ultimo test unponibile. (原始内容存档于2018-09-25). 在 entrambi gli esempi il 控制器 è modificabile 中默认; aggiungi `readonly` al 标签 `` 以及传统习俗. Gli esempi usano le 坐标为 Iniziali delle 演示:叶取米花 `[latitudine, longitudine]` 电子地图Libre `[longitudine, latitudine]`。 。 。 . ## 常见问题 ### @anthropomorphic/delorean 是什么？ Leaflet和Maplibre地图框架的 WMS 层的轻量级自定义时间控制器库\. ### 如何安装 @anthropomorphic/delorean？ 在项目目录运行 npm install @anthropomorphic/delorean，或使用 pnpm add / yarn add / bun add。 ### @anthropomorphic/delorean 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @anthropomorphic/delorean 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @anthropomorphic/delorean 可以商用吗？ @anthropomorphic/delorean 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @anthropomorphic/delorean 的下载量有多少？ 根据 npm 官方下载统计，@anthropomorphic/delorean 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,199 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @anthropomorphic/delorean 还在维护吗？ 最新版本 0\.5\.0 发布于 2026/11/02（5 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/10/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。