jqueryui+leaflet实现可拖动图片标注位置效果代码
代码语言:html
所属分类:拖放
代码描述:jqueryui+leaflet实现可拖动图片标注位置效果代码,拖动后可生成标注位置json数据,还可以导入标注位置数据。
代码标签: jqueryui leaflet 可拖动 图片 标注 位置
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/leaflet.1.3.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leaflet.1.3.1.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <style> #sidebar { width: 20%; float: left; } #main { width: 80%; float: left; } #map { width: 100%; height: 600px; } .drag { cursor: pointer; } #data { width: 90%; height: 200px; } </style> </head> <body> <div id="sidebar"> <p>Drag items into the map</p> <ul> <li><span class="drag">Item 1</span></li> <li><span class="drag">Item 2</span></li> <li><span class="drag">Item 3</span></li> <li><span class="drag">Item 4</span></li> <li><span class="drag">Item 5</span></li> </ul> <p><button type="button" class="import">Import</button></p> <p><button type="button" class="export">Export</button></p> <textarea id="data"></textarea> </div> <div id="main"> <div id="map"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script> <script> var imageUrl = '//repo.bfw.wiki/bfwrepo/image/5e44fafbdc615.png'; var imageWidth = 654; var imageHeight = 435; var map = setupMap(); var markers = setupImport(map); var polylineLatlngs = []; var activeItemName = ""; var hasActiveLine = false; setupItems(map, markers); setupExport(markers); map.on('click', function(e) { if (hasActiveLine) { polylineLatlngs.push(e.latlng); L.polyline(polylineLatlngs, { color: 'red' }).addTo(map); } }); function setupMap() { var map = L.map('map', { minZoom: 1, maxZoom: 5, center: [0, 0], zoom: 5, crs: L.CRS.Simple }); var southWest = map.unproject([0, imageHeight]); var northEast = map.unproject([imageWidth, 0]); var bounds = new L.LatLngBounds(southWest, northEast); L.imageOverlay(imageUrl, bounds).addTo(map); map.setMaxBounds(bounds); return map; } function addItem(map, markers, item) { if (!item.markerCnt || item.markerCnt <= 2) { var options = { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0