介绍
WikiMap 是一个基于 webpack 和 Leaflet 技术开发的在线地图前端组件。该组件可以方便地展示地图上的点、线、面等各种元素，并支持事件响应和样式自定义等功能，非常适合用于地图数据可视化。
安装
使用 npm 下载 wikimap：
npm install wikimap快速入门
如果你已经在项目中安装了 wikimap，可以按照以下方法引入：
-- -------------------- ---- ------- ------ ------- ---- ---------- ----- ------- - - -- ------- ------- ----------- ------------ -- -------- ----- --- -- ------- ----------- - -- ------ ----- ---------------------------------------------------------- - ------------ -- ------------- ------------- -- - -- ----- ------- - --- ----------------- -- ----- ----- ------ - ----------------------------- ------------- ----------------------- ---------------------展开代码
通过以上代码，你就可以在页面上呈现一个带有一点弹出提示的点。
API
坐标转换
WGS84ToMercator(latlng: L.LatLng)将 WGS84 坐标系下经纬度转换成墨卡托投影坐标系下的坐标。MercatorToWGS84(point: L.Point)将墨卡托投影坐标系下的坐标转换成 WGS84 坐标系下的经纬度。
矢量图层
addMarker(latlng: L.LatLng, options?: L.MarkerOptions): L.Marker在地图上添加一个标记点。addLine(latlngs: L.LatLng[], options?: L.PolylineOptions): L.Polyline在地图上画一条折线。addPolygon(latlngs: L.LatLng[], options?: L.PolygonOptions): L.Polygon在地图上画一个多边形。addRectangle(bounds: L.LatLngBounds, options?: L.RectangleOptions): L.Rectangle在地图上画一个矩形。addCircle(latlng: L.LatLng, radius: number, options?: L.CircleMarkerOptions): L.CircleMarker在地图上画一个圆形。
图层分组
addLayer(layer: L.Layer): this将一个图层添加到分组中。removeLayer(layer: L.Layer): this将一个图层从分组中移除。clearLayers(): this清空分组中所有的图层。eachLayer(fn: (layer: L.Layer) => void): void遍历分组中所有的图层，对每个图层执行一个回调函数。
交互事件
on(eventType: string, eventHandler: (event: L.LeafletEvent) => void): this添加事件监听器。off(eventType?: string, eventHandler?: (event: L.LeafletEvent) => void): this移除事件监听器。
总结
这篇文章主要介绍了 npm 包 wikimap 的使用教程。wikimap 可以方便地在地图上添加各种元素，还支持事件响应和样式自定义等功能。在数据可视化的前端项目中，wikimap 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61692
