图片标注插件
背景
在生产制造行业，电子图纸是不可缺少传递媒介，本插件主要解决电子图纸沟通过程中问题点的标注，方便工程师便于查看图纸，提高沟通、问题解决效率
功能
实现图纸的标注、查询、位置校准、位置导出等功能
调试页面
测试例图.png
本页面只是展示标注、编辑的一个调试页面，真正使用比这简单，使用的模式大致分为两类：
一类是有编辑权限
一类是只有查看权限
使用说明
该插件对接比较简单，
第一步引入资源文件：
<link rel="stylesheet" href="/dist/leaflet.css"/>
<script src="/dist/leaflet.js"></script>
<script src="/dist/jquery.min.js"></script>
<!--引入插件文件，重点在这里-->
<script src="/dist/sykj-markers.js"></script>
第二步定义标注控件：
<!--显示图的窗口-->
<div class="testMap" id="testMap"></div>
第三步是初始化插件：
//插件实例，也可以说是插件的具柄
var sykjmark;
$(document).ready(function () {
<!--窗口宽度-->
$("#testMap").width($(document).width() - 300);
<!--窗口高度-->
$("#testMap").height($(document).height());
//插件实例赋值
sykjmark = L.sykjmark("testMap", "/examples/img/test.png", markWords, true);
})
-
sykjmark参数说明
| 参数 | 描述 | 必输项 | 默认 |
|---|---|---|---|
| mapId | 图像控件 | 是 | |
| imgURL | 图像url | 是 | |
| drawingwords | 标注初始化数据 | 否 | [] |
| isEdit | 是否可编辑 | 否 | false |
drawingwords格式
[
{
"words": "119", "location": {"left": 858, "top": 263}
},
{
"words": "116",
"location": {"left": 910, "top": 1177}
},
{
"words": "wqe", "location": {"left": 492, "top": 255}
},
{
"words": "wqewq",
"location": {"left": 1794, "top": 719}
},
{
"words": "wqe", "location": {"left": 2184, "top": 1131}
},
{
"words": "qwewq",
"location": {"left": 236, "top": 757}
},
{
"words": "161", "location": {"left": 1566, "top": 1395}
}
]
-
常用函数说明
//隐藏所有标注
sykjmark.clearmark();
//显示所有标注
sykjmark.addAllMarks();
//精准查询单个查找
sykjmark.findMarks(word);
//模糊查询单个查找
sykjmark.findMarks(word, false);
//精准多个查询
sykjmark.findManyMarks(word);
//模糊多个查询
sykjmark.findManyMarks(word, false);
//数据导出-坐标文件导出,导出格式如drawingwords格式
sykjmark.exportData(回调函数);
//回调函数
function 回调函数(val) {
alert(JSON.stringify(val));
}
//数据校正-客户选择一个正确的位号，
//系统根据正确的位号（如C22），把其他的全部校正。
sykjmark.correctionData(正确的位号);
-
标注说明
通过初始化传入数据或者在页面双击图上某个点，会弹出对话框进行手工标注
标注对话框.png
-
数据校正说明
1、首先导入初始化数据，调用显示所有标注函数sykjmark.addAllMarks()，
2、然后用户选定一个位号进行查找，查找到对应的标注先进行删除，
3、重新选择正确的位置进行标注。
4、然后调用数据校正函数 sykjmark.correctionData()校正其余的位号。
如有需要请与我联系，邮箱：jarek.du@99sykj.com
