圖片標注插件
背景
在生產(chǎn)制造行業(yè)，電子圖紙是不可缺少傳遞媒介蜀涨，本插件主要解決電子圖紙溝通過程中問題點的標注闻镶，方便工程師便于查看圖紙甚脉，提高溝通、問題解決效率
功能
實現(xiàn)圖紙的標注铆农、查詢、位置校準狡耻、位置導出等功能
調試頁面
測試例圖.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參數(shù)說明
| 參數(shù) | 描述 | 必輸項 | 默認 |
|---|---|---|---|
| mapId | 圖像控件 | 是 | |
| imgURL | 圖像url | 是 | |
| drawingwords | 標注初始化數(shù)據(jù) | 否 | [] |
| 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}
}
]
-
常用函數(shù)說明
//隱藏所有標注
sykjmark.clearmark();
//顯示所有標注
sykjmark.addAllMarks();
//精準查詢單個查找
sykjmark.findMarks(word);
//模糊查詢單個查找
sykjmark.findMarks(word, false);
//精準多個查詢
sykjmark.findManyMarks(word);
//模糊多個查詢
sykjmark.findManyMarks(word, false);
//數(shù)據(jù)導出-坐標文件導出,導出格式如drawingwords格式
sykjmark.exportData(回調函數(shù));
//回調函數(shù)
function 回調函數(shù)(val) {
alert(JSON.stringify(val));
}
//數(shù)據(jù)校正-客戶選擇一個正確的位號爷绘，
//系統(tǒng)根據(jù)正確的位號（如C22），把其他的全部校正进倍。
sykjmark.correctionData(正確的位號);
-
標注說明
通過初始化傳入數(shù)據(jù)或者在頁面雙擊圖上某個點土至，會彈出對話框進行手工標注
標注對話框.png
-
數(shù)據(jù)校正說明
1、首先導入初始化數(shù)據(jù)猾昆，調用顯示所有標注函數(shù)sykjmark.addAllMarks()陶因，
2、然后用戶選定一個位號進行查找屡萤，查找到對應的標注先進行刪除回梧，
3、重新選擇正確的位置進行標注窘拯。
4烘苹、然后調用數(shù)據(jù)校正函數(shù) sykjmark.correctionData()校正其余的位號躲株。
如有需要請與我聯(lián)系，郵箱：jarek.du@99sykj.com
