leaflet绘制区域(仿高德地图效果)丨技术开发分享录

leaflet绘制区域(仿高德地图效果)

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"leaflet官网:http://leafletjs.com/\n\n效果\n\n![](https://segmentfault.com/img/bVOmeX)\n\n代码\n\n```\nvar map = L.map('map', {\n    center: [25.1026993454,102.9312515259], // 地图中心点(昆明)\n    zoom: 16, // 地图缩放层级\n    zoomControl: false, // 缩放\n    doubleClickZoom: false, // 禁止双击放大\n    attributionControl: false // 版权\n});\nvar kmgLayer = L.tileLayer.wms('wms切片图层地址', {\n    layers: 'airport:kmg',\n    format: 'image/jpeg',\n    transparent: false\n});\nmap.addLayer(kmgLayer);\n\n// 绘制区域\nvar layerObj = {};\nfunction drawPolygon() {\n    var points = [],\n        points_length = 0,\n        polyline,\n        polygon;\n    // 单击\n    var clickFlag,\n        clickTimes = 1,\n        isDrag = false;\n    map.on('mousedown', function(e) {\n        map.off('mousemove');\n        if(clickFlag) clearTimeout(clickFlag);\n        clickFlag = setTimeout(function() {\n            if(clickTimes==1 && !isDrag) {\n                points.push([e.latlng.lat, e.latlng.lng]);\n                points_length = points.length;\n                // 移动\n                map.on('mousemove', function(e) {\n                    // 清除\n                    if(polyline) map.removeLayer(polyline);\n                    if(polygon) map.removeLayer(polygon);\n                    // polyline\n                    points[points_length] = [e.latlng.lat, e.latlng.lng];\n                    polyline = new L.Polyline(points);\n                    map.addLayer(polyline);\n                    // polygon\n                    polygon = new L.Polygon(points);\n                    map.addLayer(polygon);\n                });\n            }\n        }, 300);\n    });\n    // 双击\n    map.on('dblclick', function() {\n        if(points.length) {\n            clickTimes = 2;\n            // polyline\n            polyline = new L.Polyline(points);\n            map.addLayer(polyline);\n            // polygon\n            polygon = new L.Polygon(points);\n            map.addLayer(polygon);\n            // 移除事件\n            map.off('mousemove');\n            setTimeout(function() {\n                clickTimes = 1;\n                // 保存layer(方便后面删除)\n                var layerName = prompt('请入名称');\n                if(layerName) {\n                    layerObj[layerName] = [polyline, polygon];\n                    console.log(layerObj);\n                }\n                points = [];\n            }, 300);\n        }\n    });\n    // 键盘事件\n    $(document).keyup(function(e) {\n        if(e.keyCode == 27) {// esc键\n            if(points.length) {\n                map.off('mousemove');\n                clickTimes = 1;\n                map.removeLayer(polyline);\n                map.removeLayer(polygon);\n                points = [];\n            }\n        }\n    });\n    // 拖动\n    map.on('movestart', function() {\n        isDrag = true;\n    });\n    map.on('moveend', function() {\n        isDrag = false;\n    });\n}\ndrawPolygon();\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看