npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tianheng-map

v0.2.4

Published

一个基于 leaflet 封装的地图组件

Downloads

158

Readme

地图组件

一个基于 leaflet 封装的地图组件

组件属性

| prop | type | description | | --------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | crs | Object | 地图的 crs 坐标系统 | | zoom | Number | 缩放级别 | | center | Array | 地图中心点 | | zoomConfig | Object | 缩放组件配置 {"control":true,"doubleClickZoom":false,"position":"bottomright"} | | drawConfig | Object | 绘制配置 {"color":"#409EFF","fillColor":"#409EFF","fillOpacity":0.5} | | measureConfig | Object | 测量配置 {"weight":3,"color":"#039bec","showTip":true,"showResult":true,"unitDistance":"kilometer","unitArea":"kilometer","precisionDistance":2,"precisionArea":2,"precisionCoord":6,"customTip":{"step1":"单击开始绘制","step2":"单机继续绘制","step3":"右键单击结束绘制"}} |

事件

| Event | Data | Description | | ------------ | ----------------------------------------------- | ------------------------ | | mapReady | Map | 初始化完成后返回地图对象 | | drawResult | {type: String, data: Object} | 返回绘制的类型和数据 |

方法

| Method | Args | Returns | Description | | ---------------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | | addLayer | Layer | void | 在地图上添加 layer | | removeLayer | Layer | void | 地图移除掉 layer | | createPane | Pane | void | 创建Pane并设置其 z-index | | enableDraw | String,Boolean | void | 参数1:开启绘制并在绘制结束调用drawResult,参数类型为'Marker','Line', 'Polygon', 'Rectangle', 'Circle'与事件 drawResult里的 type 对应, 参数2:是否清除上一次绘制结果,默认true | | clearDraw | | void | 关闭绘制,清除绘制结果 | | setTiandituMap | String | void | 添加一个天地图底图,参数为天地图的tk | | enableSideBySide | Tilelayer,Tilelayer | void | 启用左右卷帘功能,参数为左图和右图 | | setSideLeftLayer | Tilelayer | void | void | 替换左图图层 | | setSideRightLayer | Tilelayer | void | void | 替换右图图层 | | disableSideBySide | | void | void | 禁用左右卷帘功能 | | enableMeasure | String | void | 开启测量功能并在结束调用measureResult,参数类型为'distance', 'area', 'coord' | | disableMeasure | | void | 禁用测量功能并清除绘制的内容 | | resetMap | | void | 重置地图边界 | | fitBounds | Bounds,Option | void | 地图根据传入的图形居中 | | setView | Latlng,Option | void | 设置地图中心点 | | getMap | | Map | 获取地图对象 |

使用

main.js 里 import

import TianhengMap from 'tianheng-map'
import 'tianheng-map/index.css'

License

MIT