地图

交互式地图 @djangocfg/widget-map,在 地图Libre GL 通过 react-map-gl ——标记,集群的GeoJSON,弹出,层厂,免费的OpenFreeMap / PMTiles basemaps,运行时基图切换器,3D地形,地址/位置自动完成(geocoder),指南针,点击量度,可拖动标记,自定义标记图标,以及一个选入定位我(GPS)芯片,全部被放在一个小的提供商/康特表面后.

装舱警告. MapLibre GL为重(~800 KB gziped). 这个 @djangocfg/widget-map 条目已经是 懒惰 一个 - LazyMapContainer 将 MapLibre 块推迟到挂起 。 所有组件都是 'use client';从不在 Next.js 服务器上渲染出.

安装

pnpm add @djangocfg/widget-map @djangocfg/ui-core

快开始

import { LazyMapContainer, MapMarker } from '@djangocfg/widget-map';

<div className="h-96 rounded-xl overflow-hidden">
  <LazyMapContainer
    initialViewport={{ latitude: 25.08, longitude: 55.14, zoom: 13 }}
    mapStyle="light"
  >
    <MapMarker
      marker={{ id: 'home', latitude: 25.08, longitude: 55.14 }}
      color="#10b981"
      size={32}
    />
  </LazyMapContainer>
</div>

集装箱自行提供 MapProvider。使用兄弟会的地图上下文(例如按钮调用) flyTo,将你的树包入 <MapProvider> 提供 <MapView> 内在的 见 集装箱。 。 。 .

公共出口 - @djangocfg/widget-map

包子路径解决了懒惰入门. 它的表面:

构成部分 —— 说 LazyMapContainer, (中文(简体) ), LazyMapView (代码分割), MapView- 通过..MapContainer 类型,加上浅原始: MapMarker, (中文(简体) ), MapPopup, (中文(简体) ), MapCluster, (中文(简体) ), MapSource, (中文(简体) ), MapLayer, (中文(简体) ), MapControls, (中文(简体) ), CustomOverlay, (中文(简体) ), MapLegend, (中文(简体) ), LayerSwitcher, (中文(简体) ), MeasureControl, (中文(简体) ), DraggableMarkers, (中文(简体) ), GeocoderInput, (中文(简体) ), GeocoderControl, (中文(简体) ), CompassChip, (中文(简体) ), MarkerCard, (中文(简体) ), MapMarkers。 。 。 .

A. 背景情况 —— 说 MapProvider, (中文(简体) ), useMapContext, (中文(简体) ), MapContext。 。 。 .

样式 —— 说 MAP_STYLES, (中文(简体) ), getMapStyle, (中文(简体) ), MAP_STYLE_LABELS, (中文(简体) ), KEY_FREE_STYLES, (中文(简体) ), resolveBasemapOptions,以及自由地形 DEM 来源 TERRAIN_DEM 编号 : TERRAIN_DEM_URL。 。 。 .

导弹 —— 说 addPMTilesProtocol, (中文(简体) ), pmtilesSourceUrl (自发托管/离线基底图).

地理编码器 —— 说 photonResolve (默认无密钥光子解析器), cameraForResult (智能-zoom 帮助),和类型 GeocodeResult, (中文(简体) ), GeocodeKind, (中文(简体) ), ResolveGeocode。见 地理编码器。 。 。 .

类型 —— 说 MapContainerProps, (中文(简体) ), GeolocateOptions, (中文(简体) ), GeolocatePosition, (中文(简体) ), MapMarkerProps, (中文(简体) ), MapPopupProps, (中文(简体) ), MapClusterProps, (中文(简体) ), MapSourceProps, (中文(简体) ), MapLayerProps, (中文(简体) ), MapControlsProps, (中文(简体) ), MeasureControlProps, (中文(简体) ), DraggableMarkersProps, (中文(简体) ), DraggablePoint, (中文(简体) ), GeocoderInputProps, (中文(简体) ), GeocoderControlProps, (中文(简体) ), CompassChipProps, (中文(简体) ), MapProviderProps, (中文(简体) ), MapViewport, (中文(简体) ), MapStyleKey, (中文(简体) ), MarkerData,加上钩型 GeolocationFix, (中文(简体) ), GeolocationStatus, (中文(简体) ), UseGeolocationOptions, (中文(简体) ), UseGeolocationResult, (中文(简体) ), UseGeocoderOptions, (中文(简体) ), UseGeocoderResult, (中文(简体) ), UseCompassResult, (中文(简体) ), UseTerrainOptions, (中文(简体) ), UseMeasureResult, (中文(简体) ), MeasureMode, (中文(简体) ), MapImage, (中文(简体) ), UseMapImagesResult, (中文(简体) ), UseDraggableMarkersOptions, (中文(简体) ), UseDraggableMarkersResult, (中文(简体) ), DraggableMarkerHandlers,加上标记卡类型 MarkerCardProps, (中文(简体) ), MapMarkersProps, (中文(简体) ), MarkerWithCard, (中文(简体) ), MarkerCardInfo (卡片数据形状), MarkerCardAction, (中文(简体) ), MarkerCardData, (中文(简体) ), MarkerCardActionData, (中文(简体) ), UseMarkerCardResult。 。 。 .

钩子 —— 说 useMap, (中文(简体) ), useMapControl, (中文(简体) ), useMarkers, (中文(简体) ), useMapEvents, (中文(简体) ), useMapViewport, (中文(简体) ), useMapLayers, (中文(简体) ), useControl, (中文(简体) ), useSpiderfy (+ 数) UseSpiderfyOptions 编号 : UseSpiderfyResult 类型), useMarkerCard (单开标记卡选择状态),功能钩 useCompass, (中文(简体) ), useTerrain, (中文(简体) ), useMeasure, (中文(简体) ), useMapImages, (中文(简体) ), useDraggableMarkers, (中文(简体) ), useGeocoder和地图独立 useGeolocation (自定义“我在哪里”的浏览器位置;见 钩子) (中文(简体) ). useMapScrollProtection 编号 : useMapTouchMode 也出口——它们的力量 scrollProtection用来给你的.

层工厂 —— 说 createClusterLayers, (中文(简体) ), createPointLayer, (中文(简体) ), createHeatmapLayer, (中文(简体) ), createPolygonLayer, (中文(简体) ), createPolygonOutlineLayer, (中文(简体) ), createHighlightLayer, (中文(简体) ), createLineLayer, (中文(简体) ), createRouteLayers, (中文(简体) ), createDashedLineLayer, (中文(简体) ), createAnimatedLineLayer, (中文(简体) ), createSymbolLayer。 。 。 .

几何曲线 —— 说 calculateBounds, (中文(简体) ), calculateCenter, (中文(简体) ), calculateDistance, (中文(简体) ), isPointInBounds, (中文(简体) ), expandBounds, (中文(简体) ), toGeoJSON, (中文(简体) ), fromGeoJSON, (中文(简体) ), createPoint, (中文(简体) ), createPolygon, (中文(简体) ), createLineString, (中文(简体) ), createFeatureCollection。 。 。 .

蜘蛛鱼利用 —— 说 offsetOverlappingMarkers, (中文(简体) ), getSpiderfyPositions, (中文(简体) ), groupOverlappingMarkers, (中文(简体) ), hasOverlappingMarkers, (中文(简体) ), getOverlapStats。 。 。 .

文档

两个条目

eager 来源于根 (export * from './index' 加上静态 因此,两个表面不能漂移; src/entries.test.ts 走着走着 静态导入图, 并自控分割 .

在一个应用程序中导入两者都会使拆分失败 静态边缘拉起 MapLibre进入条目,不管其他一半做什么.

校验

pnpm --filter @djangocfg/widget-map check-types test

相关

• 底线: react-map-gl (MapLibre适配器) 顶上 MapLibre GL 联合来文