{"id":15366574,"url":"https://github.com/sakitam-fdd/ol-plot","last_synced_at":"2025-04-05T07:08:18.830Z","repository":{"id":43061707,"uuid":"100566940","full_name":"sakitam-fdd/ol-plot","owner":"sakitam-fdd","description":":art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘","archived":false,"fork":false,"pushed_at":"2024-07-05T10:45:18.000Z","size":13713,"stargazers_count":160,"open_issues_count":4,"forks_count":82,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-29T18:08:29.864Z","etag":null,"topics":["canvas","gis","map","ol","openlayers","plot"],"latest_commit_sha":null,"homepage":"https://blog.sakitam.com/ol-plot/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sakitam-fdd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-17T05:58:06.000Z","updated_at":"2024-09-11T14:23:29.000Z","dependencies_parsed_at":"2024-06-18T19:50:35.029Z","dependency_job_id":"ca88fcef-1bc8-4a0e-aa98-1f7ecb1f613a","html_url":"https://github.com/sakitam-fdd/ol-plot","commit_stats":{"total_commits":104,"total_committers":5,"mean_commits":20.8,"dds":0.4903846153846154,"last_synced_commit":"0cee12557a23c28750e095c076b57dcdb0631590"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fol-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fol-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fol-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fol-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakitam-fdd","download_url":"https://codeload.github.com/sakitam-fdd/ol-plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299833,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","gis","map","ol","openlayers","plot"],"created_at":"2024-10-01T13:19:10.617Z","updated_at":"2025-04-05T07:08:18.812Z","avatar_url":"https://github.com/sakitam-fdd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# openlayers 扩展标绘\n\n[![CI](https://github.com/sakitam-fdd/ol-plot/actions/workflows/ci.yml/badge.svg)](https://github.com/sakitam-fdd/ol-plot/actions/workflows/ci.yml)\n[![npm version](https://badgen.net/npm/v/ol-plot)](https://npm.im/ol-plot)\n[![npm downloads](https://badgen.net/npm/dm/ol-plot)](https://npm.im/ol-plot)\n![JS gzip size](http://img.badgesize.io/https://unpkg.com/ol-plot/dist/ol-plot.js?compression=gzip\u0026label=gzip%20size:%20JS)\n[![GitHub stars](https://img.shields.io/github/stars/sakitam-fdd/ol-plot.svg)](https://github.com/sakitam-fdd/ol-plot/stargazers)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/sakitam-fdd/ol-plot/master/LICENSE)\n\n标绘功能，支持openlayers5 / 6 / 7；同时也实现了一个简单的 Vue 组件，请查看 `playground/vue3` 使用，npm 发布的包为 [![npm version](https://badgen.net/npm/v/ol-plot-vue)](https://npm.im/ol-plot-vue)\n\n## build\n\n\u003e 重要: 如果想要使用 Github 上最新的源码，你需要自己构建。\n\n---\n\n```bash\ngit clone https://github.com/sakitam-fdd/ol-plot.git\npnpm run dev\npnpm run build\n```\n\n## Use\n\n\u003e `new olPlot.(map) 初始化标绘绘制工具`\n\n### CDN\n\n```bash\nhttps://unpkg.com/ol-plot/dist/ol-plot.js\nhttps://unpkg.com/ol-plot/dist/ol-plot.css\n```\n\n### NPM\n\n```bash\nnpm install ol-plot --save\nimport 'ol-plot/dist/ol-plot.css'\nimport Plot form 'ol-plot'\n```\n\n## Examples\n\n[![site](https://github.com/sakitam-fdd/ol-plot/blob/master/playground/vue3/public/image/plot.png?raw=true)](https://sakitam-fdd.github.io/ol-plot)\n\n[![demo](https://raw.githubusercontent.com/sakitam-fdd/ol-plot/V1.0.0/examples/images/demo.png)](https://codepen.io/sakitam-fdd/pen/QMQydz)\n\n其他示例请参看 playground 文件夹\n\n## 实例方法\n\n### plotDraw Methods\n\n#### `activate(type, params)`\n\n\u003e 激活标绘工具\n\n| key      | type     | desc   |\n|:---------|:---------|:-------|\n| `type`   | `string` | 标绘符号类型 |\n| `params` | `Object` | 标绘符号参数 |\n\n##### `type`\n\n\u003e 标绘类型\n\n###### type:\n\n| key                                    | type | desc      |\n|:---------------------------------------| :--- |:----------|\n| `olPlot.PlotTypes.ARC`                 | `string` | 弓形        |\n| `olPlot.PlotTypes.ELLIPSE`             | `string` | 椭圆        |\n| `olPlot.PlotTypes.CURVE`               | `string` | 曲线        |\n| `olPlot.PlotTypes.CLOSED_CURVE`        | `string` | 闭合曲面      |\n| `olPlot.PlotTypes.LUNE`                | `string` | 弓形        |\n| `olPlot.PlotTypes.SECTOR`              | `string` | 扇形        |\n| `olPlot.PlotTypes.GATHERING_PLACE`     | `string` | 集结地       |\n| `olPlot.PlotTypes.STRAIGHT_ARROW`      | `string` | 细直箭头      |\n| `olPlot.PlotTypes.ASSAULT_DIRECTION`   | `string` | 粗单直箭头     |\n| `olPlot.PlotTypes.ATTACK_ARROW`        | `string` | 进攻方向      |\n| `olPlot.PlotTypes.TAILED_ATTACK_ARROW` | `string` | 进攻方向（尾）   |\n| `olPlot.PlotTypes.SQUAD_COMBAT`        | `string` | 战斗行动      |\n| `olPlot.PlotTypes.TAILED_SQUAD_COMBAT` | `string` | 分队战斗行动（尾） |\n| `olPlot.PlotTypes.FINE_ARROW`          | `string` | 粗单尖头箭头    |\n| `olPlot.PlotTypes.CIRCLE`              | `string` | 圆         |\n| `olPlot.PlotTypes.DOUBLE_ARROW`        | `string` | 双箭头       |\n| `olPlot.PlotTypes.POLYLINE`            | `string` | 线         |\n| `olPlot.PlotTypes.FREEHAND_LINE`       | `string` | 自由线       |\n| `olPlot.PlotTypes.POLYGON`             | `string` | 面         |\n| `olPlot.PlotTypes.FREEHAND_POLYGON`    | `string` | 自由面       |\n| `olPlot.PlotTypes.RECTANGLE`           | `string` | 矩形        |\n| `olPlot.PlotTypes.RectInclined1`       | `string` | 斜矩形1      |\n| `olPlot.PlotTypes.RectInclined2`       | `string` | 斜矩形2      |\n| `olPlot.PlotTypes.MARKER`              | `string` | 点         |\n| `olPlot.PlotTypes.TEXTAREA`            | `string` | 文本框       |\n\n#### `deactivate()`\n\n取消绘制工具的激活状态\n\n### plotEdit Methods\n\n#### `activate(feature)`\n\n| key | type | desc |\n| :--- | :--- | :---------- |\n| `feature` | `ol.Feature` | 要激活的标绘符号 |\n\n激活符号要素编辑\n\n#### `deactivate()`\n\n取消符号要素编辑状态\n\n### PlotUtils Methods\n\n| 方法 | 说明 | 参数 |\n| :--- | :--- | :---------- |\n| `getFeatures` | 序列化地图上所有符号 | -- |\n| `addFeatures` | 反序列化保存的符号 | `features : Array` |\n| `removeAllFeatures` | 删除所有符号 | -- |\n\n\n## 事件\n\n### plotDraw\n\n```js\nplot.plotDraw.on('drawStart', (e) =\u003e {\n  console.log(e);\n});\n\nplot.plotDraw.on('drawEnd', onDrawEnd);\n```\n\n#### drawStart\n\n监听符号开始绘制，通过事件类型 ``plotType`` 判断是哪种标绘类型\n\n#### drawEnd\n\n监听符号结束绘制，通过事件类型 ``plotType`` 判断是哪种标绘类型\n\n### plotEdit\n\n```js\nplot.plotEdit.on('activePlotChange', (e) =\u003e {\n  console.log(e);\n});\n\nplot.plotEdit.on('deactivatePlot', (e) =\u003e {\n  console.log(e);\n});\n```\n\n#### activePlotChange\n\n激活编辑状态的要素变化事件\n\n#### deactivatePlot\n\n监听要素结束编辑状态\n\n### plot 实例事件\n\n比较特殊，3.0 版本是绑定在 map 实例上的，从 4.0 版本起需要绑定在 plot 实例上。\n\n```js\nplot.on('activeTextArea', (e) =\u003e {\n  console.log(e);\n});\n\nplot.on('deactivateTextArea', (e) =\u003e {\n  console.log(e);\n});\n```\n\n#### activeTextArea\n\n激活文本框编辑事件\n\n#### deactivateTextArea\n\n取消激活文本框编辑事件\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Fol-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakitam-fdd%2Fol-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Fol-plot/lists"}