CAD位置标注插件

图片标注插件

背景

在生产制造行业，电子图纸是不可缺少传递媒介，本插件主要解决电子图纸沟通过程中问题点的标注，方便工程师便于查看图纸，提高沟通、问题解决效率

功能

实现图纸的标注、查询、位置校准、位置导出等功能

调试页面

测试例图.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