@allmaps/地图
所有地图插件 地图Libre GL。此插件允许显示地理参考 IIIF 图像 在地图里。 插件通过加载工作 地理参考说明 并使用WebGL从一个 IIIF 图像服务器上转换图像,以覆盖其正确的地理位置.
见 页面存档备份,存于互联网档案馆 allmaps.org 更多信息.
实例:
如何运作
此插件创建了新类 WarpedMapLayer 扩展 MapLibre 的 CustomLayerInterface。您可以在 WardedMapLayer 中添加一个或多个地理参考说明(或带有多个地理参考说明的注释页),并在您的 MapLibre 地图中添加 WardedMapLayer 。 这将使您地图Libre地图上的地理参考注释中包含的所有地理参考地图生效.
为了了解每个地理参考地图的引擎盖下会发生什么,请参看 @ allmaps/ 放弃 软件包.
此插件继承了大量方法 @ allmaps/ warpedmapplayer (帮助),核心软件包集成连接 Allmaps 插件到 @ allmaps/ 放弃 软件包.
安装
这个软件包在浏览器和Node.js中作为无害环境管理或UMD模块发挥作用.
用 pnpm 安装 :
pnpm install @allmaps/maplibre
您可以通过运行在本地建立此软件包 :
pnpm run build
在本地开发期间测试此软件包的最简单方法是通过 @ allmaps/ test- plugins中还包括一个最小的例子 ./index.html 并可通过 pnpm run dev。 。 。 .
使用量
为MapLibre 5.0所建,但也应与更早的版本合作.
将一个被扭曲的MapLayer添加到地图里
创建一个 WarpedMapLayer 并把它添加到地图上 看起来像这样:
import { Map as MapLibreMap } from 'maplibre-gl'
import { WarpedMapLayer } from '@allmaps/maplibre'
const map = new MapLibreMap({
container: 'map',
// @ts-expect-error MapLibre types are incompatible
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
center: [-73.9337, 40.8011],
zoom: 11.5,
// Pitch is currently not supported by the Allmaps plugin for MapLibre
maxPitch: 0
})
const annotationUrl = 'https://annotations.allmaps.org/images/d180902cb93d5bf2'
const warpedMapLayer = new WarpedMapLayer()
map.on('load', () => {
// @ts-expect-error MapLibre types are incompatible
map.addLayer(warpedMapLayer)
warpedMapLayer.addGeoreferenceAnnotationByUrl(annotationUrl)
})
被扭曲的MapLayer 使用 MapLibre 执行 自定义 Layer 界面。它可以像其他的 MapLibre 地层一样被添加到地图中,但有些东西需要考虑:
WarpedMapLayer不使用一个 来源 (虽然这可以在今后实施,类似于 @ allmaps/ 打开层) (中文(简体) ).WarpedMapLayer目前不支持投出, 因此在您的地图上禁用它 .- 就像其他的MapLibre地层一样,一个被扭曲的地图 层必须有一个独特的
id默认情况下id有数值warped-map-layer。当在您的地图上添加多个WardedMapLayers时,通过一个独特的id切入其构造器:
const warpedMapLayerWithUniqueId = new WarpedMapLayer({layerId: 'my-unique-id'})
装入地理参考说明的方法
一旦该地层被添加到地图中,就可以在图中添加地理参考注释 WarpedMapLayer 使用 addGeoreferenceAnnotation 财务报告和审定财务报表 addGeoreferenceAnnotationByUrl 函数:
fetch(annotationUrl)
.then((response) => response.json())
.then((annotation) => warpedMapLayer.addGeoreferenceAnnotation(annotation))
或者说:
await warpedMapLayer.addGeoreferenceAnnotationByUrl(annotationUrl)
也可以先创建出WarpedMapList并传递到创作的地层. 这样做的优点是能够先计算出一个被wappedMapList的属性,例如获得界限并传递到MapLibre地图.
import { Map as MapLibreMap } from 'maplibre-gl'
import { WarpedMapLayer } from '@allmaps/maplibre'
import { WarpedMapList } from '@allmaps/render'
import { WebGL2WarpedMap } from '@allmaps/render/webgl2'
const annotationUrl = 'https://annotations.allmaps.org/images/d180902cb93d5bf2'
const annotation = await fetch(annotationUrl).then((response) =>
response.json()
)
const warpedMapList = new WarpedMapList<WebGL2WarpedMap>()
await warpedMapList.addGeoreferenceAnnotation(annotation)
const bbox = warpedMapList.getMapsBbox()
map = new MapLibreMap({
container: 'map',
// @ts-expect-error MapLibre types are incompatible
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
// Pitch is currently not supported by the Allmaps plugin for MapLibre
maxPitch: 0
})
map.on('load', () => {
const warpedMapLayer = new WarpedMapLayer({ warpedMapList })
// @ts-expect-error MapLibre types are incompatible
map.addLayer(warpedMapLayer)
if (bbox) {
map.fitBounds(bbox, { padding: 20 })
}
})
注意 ...ByUrl() 函数不可用在 WardedMapList 上.
扭曲的MapLayer API, 选项和事件
见 @ allmaps/ warpedmapplayer (帮助) 用于来自 WardedMapLayer 类的方法的 API 文档的软件包(由所有 Allmaps 插件共享)。 它描述的方法像 addGeoreferenceAnnotation() ,并包含一个列表,列出可以设置在类实例上的所有选项,以及所有传递给托管层实例的本地地图实例的事件.
你可以设置 选项 在整个层上,或在层上的特定地图上(覆盖层选项):
warpedMapLayer.setLayerOptions({ visible: true })
warpedMapLayer.setMapOptions(mapId, { visible: true })
你可以听从 事件 以典型方式:
map.on('warpedmapadded', (event) => {
console.log(event.mapIds)
})
许可证
麻省理工学院
API 密码
MapLibreWarpedMapLayerOptions
类型
SpecificMapLibreWarpedMapLayerOptions & Partial<WebGL2RenderOptions>
new WarpedMapLayer(options)
创建扭曲的MapLayer实例
参数
options?(单位:千美元)Partial<MapLibreWarpedMapLayerOptions> | undefined(中文(简体) )- 选项
回返
WarpedMapLayer。 。 。 .
扩展
BaseWarpedMapLayerCustomLayerInterface
WarpedMapLayer#getBounds()
将所有地图的边框取为 MapLibre LngLat Boundes 像对象
这是默认的 MapLibre 获得Bounds () 函数
以 Lon- lat 返回结果 EPSG:4326。 。 。 .
参数
没有参数.
回返
所有地图的边框LngLatBoundsLike | undefined) (中文(简体) ).
WarpedMapLayer#getCenterZoomBearing(options)
获取中心,缩放和轴承,使"Maplibre地图"的取景口符合地层中的所有地图.
可用作
- 地图. jumpTo () 供立即更改
- 平滑平缓的 Map. Easeto ()
- Map.flyTo() 用于放大和放大的飞行动画
参数
options?(单位:千美元)Partial<Partial<MaskOptions> & { bearingMapIds?: string[]; bearingCallbackFn: (bearing: number) => number; fit: Fit; } & CenterZoomBearing & { ...; } & { ...; }> | undefined(中文(简体) )
回返
中心、缩放和承载({center?: LngLatLike; zoom?: number; bearing?: number}) (中文(简体) ).
WarpedMapLayer#getMapCenterZoomBearing(mapId, options)
获取中心,缩放和轴承使 Maplibre 地图的取景口符合所选地图所需的.
可用作
- 地图. jumpTo () 供立即更改
- 平滑平缓的 Map. Easeto ()
- Map.flyTo () 用于一个飞行动画, 它缩放出并回缩放
参数
mapId(单位:千美元)string(中文(简体) )options?(单位:千美元)Partial<Partial<MaskOptions> & { bearingMapIds?: string[]; bearingCallbackFn: (bearing: number) => number; fit: Fit; } & CenterZoomBearing & { ...; } & { ...; }> | undefined(中文(简体) )
回返
中心、缩放和承载({center?: LngLatLike; zoom?: number; bearing?: number}) (中文(简体) ).
WarpedMapLayer#getMapsBounds(mapIds)
将所有选中地图的边框取为 MapLibre LngLatBounds 像对象
这是默认的 MapLibre 获得Bounds () 函数
以 Lon- lat 返回结果 EPSG:4326。 。 。 .
参数
mapIds(单位:千美元)Array<string>(中文(简体) )- 地图标识
回返
所有所选地图的边框( r)LngLatBoundsLike | undefined) (中文(简体) ).
WarpedMapLayer#getMapsCenterZoomBearing(mapIds, partialOptions)
获取中心,缩放和轴承 使 Maplibre 地图的取景口符合所有选中的地图 .
可用作
- 地图. jumpTo () 供立即更改
- 平滑平缓的 Map. Easeto ()
- Map.flyTo () 用于一个飞行动画, 它缩放出并回缩放
参数
mapIds(单位:千美元)Array<string>(中文(简体) )partialOptions?(单位:千美元)Partial<Partial<MaskOptions> & { bearingMapIds?: string[]; bearingCallbackFn: (bearing: number) => number; fit: Fit; } & CenterZoomBearing & { ...; } & { ...; }> | undefined(中文(简体) )
回返
中心、缩放和承载({center?: LngLatLike; zoom?: number; bearing?: number}) (中文(简体) ).
WarpedMapLayer#id
类型
string
WarpedMapLayer#map?
类型
MaplibreMap
WarpedMapLayer#nativePassWarpedMapEvent(event)
传递事件
参数
event(单位:千美元)Event(中文(简体) )
回返
void。 。 。 .
WarpedMapLayer#nativeUpdate()
触发地图的本地更新功能
参数
没有参数.
回返
void。 。 。 .
WarpedMapLayer#onAdd(map, gl)
当图层被添加时, 方法会调用 .
参数
map(单位:千美元)MaplibreMap(中文(简体) )- 此自定义图层是刚刚添加的 .
gl(单位:千美元)WebGL2RenderingContext(中文(简体) )- 地图的 WebGL 2 上下文 .
回返
void。 。 。 .
WarpedMapLayer#onContextLost
参数
event(单位:千美元)MapContextEvent(中文(简体) )
回返
void。 。 。 .
WarpedMapLayer#onContextRestored
参数
event(单位:千美元)MapContextEvent(中文(简体) )
回返
void。 。 。 .
WarpedMapLayer#onRemove()
当图层被移除时, 方法会调用 .
参数
没有参数.
回返
void。 。 。 .
WarpedMapLayer#render()
翻出一层来.
参数
没有参数.
回返
void。 。 。 .
WarpedMapLayer#renderingMode
类型
'2d'
WarpedMapLayer#type
类型
'custom'