@asteby/metacore-映射

模拟企业资源规划系统及其附加物的懒惰地图。 一个包,三个工作:

• 构成部分 —— 说 MapView, (中文(简体) ), Marker, (中文(简体) ), ClusterLayer, (中文(简体) ), Polyline编号 :Route, (中文(简体) ), Geofence, (中文(简体) ), LocationPicker, (中文(简体) ), TrackingTimeline。 。 。 .
• 宣告渲染器 —— 说 view_type: map 财务报告和审定财务报表 kind: map | timeline 内核清单的详细面板,在 @asteby/metacore-runtime-react登记簿.
• 没有锁,没有钥匙 —— 说 地图Libre GL 渲染; 底图为样式( 或 PMTiles) 您的主机服务 URL。没有 API 密钥,没有第三方看到您的客户位置.

性能合同(计划§0.2):包件本身的初始块是: ~11 KB克齐普 (由 src/size-budget.test.ts,限制 15 KB)和 maplibre-gl 实值 永远 在一个静态导入图中 —— 它是第一次获取地图挂载。 登记条目/register)在一KB以下,所以一个从不显示地图的宿主几乎一文不值.

安装

pnpm add @asteby/metacore-maps maplibre-gl
# optional, only for pmtiles:// base maps
pnpm add pmtiles

react, (中文(简体) ), maplibre-gl 和《古兰经》 @asteby/metacore-runtime-react, (中文(简体) ), @asteby/metacore-sdk, (中文(简体) ), react-i18next 是同龄人。 在联邦版 @asteby/metacore-maps 财务报告和审定财务报表 maplibre-gl 懒惰的股份(METACORE_PAGE_SHARES:遥控器从不捆绑自己的副本.

配置底图( 一次, 在主机中)

import { configureMaps } from '@asteby/metacore-maps'

configureMaps({
  style: {
    light: 'https://cdn.example.com/map/light.json', // style JSON URL, or an inline style object
    dark: 'https://cdn.example.com/map/dark.json',
  },
  // PMTiles (self-hosted, range requests, no key): style sources use `pmtiles://https://…/mx.pmtiles`.
  pmtiles: () => import('pmtiles'),
  attribution: '© OpenStreetMap contributors', // credit for the data in the tiles you serve
  center: [-102.5, 23.6], zoom: 4,             // used when there is nothing to fit
})

无 style 地图取自一个平地背景(你的点、路线和区域仍在渲染) 没有 除了MapLibre本身,网络请求。 帮助者 : blankStyle(scheme), (中文(简体) ), rasterStyle(['https://tiles/{z}/{x}/{y}.png'], attribution)。 。 。 .

颜色方案跟随主机(.dark 类别/ data-theme="dark" 打开 <html>操作系统;通过 theme="light|dark" 把它钉上 图层在主题切换后幸存.

构成部分

import { MapView, Route, Geofence, LocationPicker, TrackingTimeline } from '@asteby/metacore-maps'

// Points with popups (focusable markers; clusters automatically above 150 points)
<MapView
  ariaLabel="Envíos activos"
  points={[
    { key: 's1', lat: 19.43, lng: -99.13, label: 'TRK-1', status: 'in_transit', statusLabel: 'En tránsito',
      details: [{ label: 'Paquetería', value: 'DHL' }] },
  ]}
  colors={{ in_transit: '#0072B2' }}
  onSelect={(p) => console.log(p.key)}
>
  {/* layers and extra markers are children */}
  <Route path={[{ lat: 19.4, lng: -99.1 }, { lat: 19.9, lng: -100.2 }]} fit />
  <Geofence zones={[{ key: 'z', label: 'Cobertura', center: { lat: 19.43, lng: -99.13 }, radiusM: 5000 }]} />
</MapView>

// Pick a place: click, drag the pin, type coordinates, device GPS, optional address search
<LocationPicker value={point} onChange={setPoint} geocode={(q) => api.geocode(q)} />

// Shipment tracking — no map required
<TrackingTimeline
  events={[{ status: 'En tránsito', at: '2026-10-17T09:00:00Z', location: { label: 'Querétaro', lat: 20.59, lng: -100.39 } }]}
  timeZone="America/Mexico_City"
/>

无障碍

• 每张地图都有对应的 列表 ("Ver lista"),键盘可被接通,每个状态被写出并有一个"在地图中打开"链接. 当WebGL 或 MapLibre 不可用时, 列表是唯一的视图, 有信件这么说 .
• 标记为按钮 aria-label;颜色从来不是唯一的通道(状态文本,glyphs);弹出由文本节点构建(没有HTML注入).
• prefers-reduced-motion 制造 fitBounds 编号 : easeTo 即时. 字符串可通过 labels (和 metacore.maps.* 键在渲染器中.

声明性观点(内核合同)

// host start-up — tiny and MapLibre-free
import { registerMapRenderers } from '@asteby/metacore-maps/register'

registerMapRenderers({ config: { style: { light: '…', dark: '…' } } })

这个叫 registerViewRenderer('map', …), (中文(简体) ), registerPanelRenderer('map', …) 财务报告和审定财务报表 registerPanelRenderer('timeline', …) 与懒惰的装载者(/view, (中文(简体) ), /panel, (中文(简体) ), /timeline-panel) (中文(简体) ). 过 { timeline: false } 保持运行时间的内置时间面板。 它制造出明显的碎片:

{ "view_type": "map",
  "view": { "map": { "point": { "lat": "dest_lat", "lng": "dest_lng" }, "color_by": "status",
                      "popup": ["tracking_number", "carrier", "status"], "cluster": true,
                      "layers": [{ "kind": "points", "model": "Branch", "point": { "lat": "lat", "lng": "lng" }, "label": "name" },
                                 { "kind": "zones",  "model": "Zone",   "geometry": "area", "label": "name" }] } } }

{ "kind": "map",      "map": { "point": {…}, "route": { "relation": "stops", "point": {…}, "order_by": "seq" } } }
{ "kind": "timeline", "timeline": { "date_field": "at", "title_field": "description", "status_field": "status",
                                    "source": { "capability": "commerce.shipping.track", "input": { "tracking_number": "record.tracking_number" }, "items": "events" } } }

行通过同样的纯帮助器成为其列表回落的运行时间用途的特性(@asteby/metacore-runtime-react/views/map因此,两个造物师都用同样的语言来阅读。 选项颜色和标签 color_by 列来自模型元数据; 渲染器显示服务器返回的内容,而从未计算商业值。 时间线活动开始 location编号 :city 财务报告和审定财务报表 lat编号 :lng 列当出.

测试

jsdom/happy-dom没有WebGL. 在你自己的测试中,通过一个接棒通过装载器:

configureMaps({ loadMaplibre: async () => myStub, supportsWebGL: () => true })

乔罗普莱尔

<MapView points={[]}>
  <ChoroplethLayer loader={() => import('./estados.topo.json')} values={{ JAL: 120, CMX: 340 }} keyProperty="code" labelProperty="name" onRegions={setState} />
</MapView>
<ChoroplethList regions={state.regions} label="Ventas por estado" noData="Sin datos" />

几何学(GeoJSON或TopoJSON)来自主机/区域通过 loader,当层起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 SDK船没有形状. ChoroplethList 是可获取的等同物(每个区域都有其价值).