| | |
| | | var map = new AMap.Map('container',{ |
| | | resizeEnable: true, |
| | | zoom:10 |
| | | }); |
| | | // 初始化地图 |
| | | var map = new BMap.Map('container'); |
| | | var point = new BMap.Point(114.329123,29.847218); |
| | | map.centerAndZoom(point, 10); |
| | | map.enableScrollWheelZoom(); |
| | | |
| | | |
| | | var value = ""; |
| | | map.getCity( |
| | | callback=function (result) { |
| | | value = result.city; |
| | | drawBounds(); |
| | | } |
| | | ); |
| | | |
| | | |
| | | var mouseTool = new AMap.MouseTool(map); |
| | | //监听draw事件可获取画好的覆盖物 |
| | | // 全局变量 |
| | | var coordinate = ''; |
| | | var overlays = []; |
| | | var name = null; |
| | | var coordinate = '';//存储坐标 |
| | | var objs = {//存储各种类型的覆盖物对象 |
| | | "polyline":[], |
| | | "polygon":[], |
| | | "rectangle":[], |
| | | "circle":[] |
| | | var objs = { |
| | | "polyline": [], |
| | | "polygon": [], |
| | | "rectangle": [], |
| | | "circle": [] |
| | | }; |
| | | var editors = []; |
| | | mouseTool.on('draw',function(e){ |
| | | overlays.push(e.obj); |
| | | console.log(e.obj.getPath()); |
| | | |
| | | switch (name) { |
| | | case 'polyline':{//折线图 |
| | | var polyline = e.obj.getPath(); |
| | | getCoordinate(polyline); |
| | | objs.polyline.push(e.obj); |
| | | break; |
| | | } |
| | | case 'polygon':{//多边形 |
| | | var polygon = e.obj.getPath(); |
| | | getCoordinate(polygon); |
| | | objs.polygon.push(e.obj); |
| | | break; |
| | | } |
| | | case 'rectangle':{//矩形 |
| | | var rectangle = e.obj.getPath(); |
| | | getCoordinate(rectangle); |
| | | objs.rectangle.push(e.obj); |
| | | break; |
| | | } |
| | | case 'circle':{//圆形 |
| | | var center = e.obj.getCenter(); |
| | | var radius = e.obj.getRadius(); |
| | | if(radius > 5000){ |
| | | Feng.error("创建电子围栏失败,圆半径不能大于5000米"); |
| | | return; |
| | | // 初始化绘图工具 |
| | | var drawingManager = new BMapLib.DrawingManager(map, { |
| | | isOpen: false, |
| | | enableDrawingTool: true, |
| | | drawingToolOptions: { |
| | | anchor: BMAP_ANCHOR_TOP_RIGHT, |
| | | offset: new BMap.Size(5, 5), |
| | | drawingModes: [ |
| | | 'polygon', // 修改这里 |
| | | 'circle' // 修改这里 |
| | | ] |
| | | }, |
| | | polygonOptions: { |
| | | strokeColor: "#80d8ff", |
| | | fillColor: "#00b0ff", |
| | | strokeWeight: 2, |
| | | strokeOpacity: 0.8 |
| | | }, |
| | | circleOptions: { |
| | | strokeColor: "#80d8ff", |
| | | fillColor: "#00b0ff", |
| | | strokeWeight: 2, |
| | | strokeOpacity: 0.8 |
| | | } |
| | | }); |
| | | |
| | | // 添加提示信息 |
| | | function showDrawingTips() { |
| | | var tips = document.createElement('div'); |
| | | tips.className = 'drawing-tips'; |
| | | tips.style.cssText = 'position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 4px; z-index: 1000;'; |
| | | tips.innerHTML = '提示:双击左键结束绘制'; |
| | | document.getElementById('container').appendChild(tips); |
| | | |
| | | // 3秒后自动消失 |
| | | setTimeout(function() { |
| | | tips.style.display = 'none'; |
| | | }, 3000); |
| | | } |
| | | |
| | | // 监听绘制完成事件 |
| | | drawingManager.addEventListener('overlaycomplete', function(e) { |
| | | console.log("绘制完成事件触发,类型:", e.type); |
| | | var overlay = e.overlay; |
| | | overlays.push(overlay); |
| | | |
| | | try { |
| | | // 修改判断条件,使用字符串比较 |
| | | if (e.type === 'polygon') { |
| | | var path = overlay.getPath(); |
| | | console.log("多边形路径点:", path); |
| | | |
| | | if (path && path.length > 0) { |
| | | var str = ''; |
| | | for (var i = 0; i < path.length; i++) { |
| | | str += path[i].lat + ',' + path[i].lng + ';'; |
| | | } |
| | | coordinate = str.substring(0, str.length - 1); |
| | | objs.polygon.push(overlay); |
| | | console.log("多边形绘制完成,当前坐标:", coordinate); |
| | | } else { |
| | | console.error("多边形路径点为空"); |
| | | } |
| | | coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; |
| | | objs.circle.push(e.obj); |
| | | break; |
| | | } |
| | | } |
| | | console.log(coordinate); |
| | | }) |
| | | } else if (e.type === 'circle') { |
| | | var center = overlay.getCenter(); |
| | | var radius = overlay.getRadius(); |
| | | console.log("圆形中心点:", center, "半径:", radius); |
| | | |
| | | |
| | | var district = null; |
| | | var polygons=[]; |
| | | function drawBounds() { |
| | | if(value == ''){ |
| | | value = '北京市'; |
| | | } |
| | | |
| | | //加载行政区划插件 |
| | | if(!district){ |
| | | //实例化DistrictSearch |
| | | var opts = { |
| | | subdistrict: 0, //获取边界不需要返回下级行政区 |
| | | extensions: 'all', //返回行政区边界坐标组等具体信息 |
| | | level: 'district' //查询行政级别为 市 |
| | | }; |
| | | district = new AMap.DistrictSearch(opts); |
| | | } |
| | | //行政区查询 |
| | | district.setLevel(document.getElementById('level').value) |
| | | district.search(value, function(status, result) { |
| | | map.remove(polygons)//清除上次结果 |
| | | polygons = []; |
| | | var bounds = result.districtList[0].boundaries; |
| | | if (bounds) { |
| | | for (var i = 0, l = bounds.length; i < l; i++) { |
| | | //生成行政区划polygon |
| | | var polygon = new AMap.Polygon({ |
| | | strokeWeight: 1, |
| | | path: bounds[i], |
| | | fillOpacity: 0.4, |
| | | fillColor: '#80d8ff', |
| | | strokeColor: '#0091ea' |
| | | }); |
| | | polygons.push(polygon); |
| | | if (center && radius) { |
| | | if (radius > 5000) { |
| | | Feng.error("创建电子围栏失败,圆半径不能大于5000米"); |
| | | map.removeOverlay(overlay); |
| | | return; |
| | | } |
| | | coordinate = center.lat + ',' + center.lng + ';' + radius; |
| | | objs.circle.push(overlay); |
| | | console.log("圆形绘制完成,当前坐标:", coordinate); |
| | | } else { |
| | | console.error("圆形参数不完整"); |
| | | } |
| | | } |
| | | map.add(polygons) |
| | | map.setFitView(polygons);//视口自适应 |
| | | }); |
| | | } |
| | | |
| | | document.getElementById('find').onclick = function () { |
| | | value = document.getElementById('district').value; |
| | | if(value == ''){ |
| | | value = "北京市"; |
| | | } catch (error) { |
| | | console.error("处理绘制完成事件时出错:", error); |
| | | } |
| | | drawBounds() |
| | | }; |
| | | document.getElementById('district').onkeydown = function(e) { |
| | | if (e.keyCode === 13) { |
| | | value = document.getElementById('district').value; |
| | | if(value == ''){ |
| | | value = "北京市"; |
| | | } |
| | | drawBounds(); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | }); |
| | | |
| | | // 绘制功能 |
| | | function draw(type) { |
| | | console.log("开始绘制,类型:", type); |
| | | // 清除之前的坐标 |
| | | coordinate = ''; |
| | | |
| | | |
| | | |
| | | //处理坐标结果 |
| | | function getCoordinate(arr){ |
| | | var str = ''; |
| | | for(var i = 0; i < arr.length; i++){ |
| | | var lng = arr[i].lng; |
| | | var lat = arr[i].lat; |
| | | str += lng + ',' + lat + ';'; |
| | | } |
| | | coordinate += str.substring(0, str.length - 1) + "_"; |
| | | } |
| | | |
| | | |
| | | function draw(type){ |
| | | switch(type){ |
| | | case 'marker':{ |
| | | mouseTool.marker({ |
| | | //同Marker的Option设置 |
| | | }); |
| | | break; |
| | | try { |
| | | switch (type) { |
| | | case 'polygon': { |
| | | drawingManager.setDrawingMode('polygon'); // 修改这里 |
| | | drawingManager.open(); |
| | | showDrawingTips(); |
| | | break; |
| | | } |
| | | case 'circle': { |
| | | drawingManager.setDrawingMode('circle'); // 修改这里 |
| | | drawingManager.open(); |
| | | break; |
| | | } |
| | | } |
| | | case 'polyline':{ |
| | | mouseTool.polyline({ |
| | | strokeColor:'#80d8ff' |
| | | //同Polyline的Option设置 |
| | | }); |
| | | break; |
| | | } |
| | | case 'polygon':{ |
| | | mouseTool.polygon({ |
| | | fillColor:'#00b0ff', |
| | | strokeColor:'#80d8ff' |
| | | //同Polygon的Option设置 |
| | | }); |
| | | break; |
| | | } |
| | | case 'rectangle':{ |
| | | mouseTool.rectangle({ |
| | | fillColor:'#00b0ff', |
| | | strokeColor:'#80d8ff' |
| | | //同Polygon的Option设置 |
| | | }); |
| | | break; |
| | | } |
| | | case 'circle':{ |
| | | mouseTool.circle({ |
| | | fillColor:'#00b0ff', |
| | | strokeColor:'#80d8ff' |
| | | //同Circle的Option设置 |
| | | }); |
| | | break; |
| | | } |
| | | } catch (error) { |
| | | console.error("设置绘制模式时出错:", error); |
| | | } |
| | | } |
| | | var radios = document.getElementsByName('func'); |
| | | for(var i=0;i<radios.length;i+=1){ |
| | | radios[i].onchange = function(e){ |
| | | draw(e.target.value) |
| | | name = e.target.value; |
| | | } |
| | | } |
| | | // draw('marker') |
| | | |
| | | document.getElementById('clear').onclick = function(){ |
| | | map.remove(overlays) |
| | | |
| | | // 添加一个直接获取坐标的函数 |
| | | function getOverlayCoordinate(overlay) { |
| | | try { |
| | | if (overlay instanceof BMap.Polygon) { |
| | | var path = overlay.getPath(); |
| | | if (path && path.length > 0) { |
| | | var str = ''; |
| | | for (var i = 0; i < path.length; i++) { |
| | | str += path[i].lat + ',' + path[i].lng + ';'; |
| | | } |
| | | return str.substring(0, str.length - 1); |
| | | } |
| | | } else if (overlay instanceof BMap.Circle) { |
| | | var center = overlay.getCenter(); |
| | | var radius = overlay.getRadius(); |
| | | if (center && radius) { |
| | | return center.lat + ',' + center.lng + ';' + radius; |
| | | } |
| | | } |
| | | } catch (error) { |
| | | console.error("获取坐标时出错:", error); |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | // 清除按钮事件 |
| | | document.getElementById('clear').onclick = function() { |
| | | map.clearOverlays(); |
| | | overlays = []; |
| | | coordinate = ''; |
| | | objs.circle = []; |
| | |
| | | objs.polygon = []; |
| | | objs.polyline = []; |
| | | closeEdit(); |
| | | console.log("清除后的坐标:", coordinate); |
| | | } |
| | | document.getElementById('close').onclick = function(){ |
| | | mouseTool.close()//关闭,并清除覆盖物 |
| | | for(var i=0;i<radios.length;i+=1){ |
| | | |
| | | // 关闭绘图按钮事件 |
| | | document.getElementById('close').onclick = function() { |
| | | drawingManager.close(); |
| | | for (var i = 0; i < radios.length; i++) { |
| | | radios[i].checked = false; |
| | | } |
| | | closeEdit(); |
| | | console.log("关闭后的坐标:", coordinate); |
| | | } |
| | | |
| | | |
| | | //点击提交处理函数 |
| | | function submitCoordinate(){ |
| | | var name = $('#addressName').val(); |
| | | if('' == name){ |
| | | Feng.error('请填写地址名称'); |
| | | return; |
| | | } |
| | | if('' == coordinate){ |
| | | Feng.error('请在地图上规划区域'); |
| | | return; |
| | | } |
| | | coordinate = coordinate.substring(0, coordinate.length - 1); |
| | | |
| | | } |
| | | |
| | | // 编辑所有覆盖物 |
| | | function editAll() { |
| | | coordinate = ''; |
| | | editors = []; |
| | | //折线 |
| | | for(var i in objs.polyline){ |
| | | var polyline = objs.polyline[i]; |
| | | var polyEditor = new AMap.PolyEditor(map, polyline) |
| | | polyEditor.on('addnode', function(event) { |
| | | // log.info('触发事件:addnode') |
| | | }) |
| | | |
| | | polyEditor.on('adjust', function(event) { |
| | | // log.info('触发事件:adjust') |
| | | }) |
| | | |
| | | polyEditor.on('removenode', function(event) { |
| | | // log.info('触发事件:removenode') |
| | | }) |
| | | |
| | | polyEditor.on('end', function(e) { |
| | | var polyline = e.target.getPath(); |
| | | getCoordinate(polyline); |
| | | }) |
| | | editors.push(polyEditor); |
| | | polyEditor.open(); |
| | | } |
| | | |
| | | //多边形 |
| | | for(var i in objs.polygon){ |
| | | // 多边形编辑 |
| | | for (var i in objs.polygon) { |
| | | var polygon = objs.polygon[i]; |
| | | var polyEditor = new AMap.PolyEditor(map, polygon) |
| | | |
| | | polyEditor.on('addnode', function(event) { |
| | | // log.info('触发事件:addnode') |
| | | }) |
| | | |
| | | polyEditor.on('adjust', function(event) { |
| | | // log.info('触发事件:adjust') |
| | | }) |
| | | |
| | | polyEditor.on('removenode', function(event) { |
| | | // log.info('触发事件:removenode') |
| | | }) |
| | | |
| | | polyEditor.on('end', function(e) { |
| | | var polygon = e.target.getPath(); |
| | | getCoordinate(polygon); |
| | | }) |
| | | editors.push(polyEditor); |
| | | polyEditor.open(); |
| | | var polygonEditor = new BMapLib.PolygonEditor(map, polygon); |
| | | polygonEditor.addEventListener('drawend', function(e) { |
| | | var path = e.overlay.getPath(); |
| | | var str = ''; |
| | | for (var i = 0; i < path.length; i++) { |
| | | str += path[i].lat + ',' + path[i].lng + ';'; |
| | | } |
| | | coordinate = str.substring(0, str.length - 1); |
| | | console.log("编辑后的坐标:", coordinate); |
| | | }); |
| | | editors.push(polygonEditor); |
| | | polygonEditor.open(); |
| | | } |
| | | |
| | | |
| | | //矩形 |
| | | for(var i in objs.rectangle){ |
| | | var rectangle = objs.rectangle[i]; |
| | | var rectangleEditor = new AMap.RectangleEditor(map, rectangle) |
| | | |
| | | rectangleEditor.on('adjust', function(event) { |
| | | // log.info('触发事件:adjust') |
| | | }) |
| | | |
| | | rectangleEditor.on('end', function(e) { |
| | | var polygon = e.target.getPath(); |
| | | getCoordinate(polygon); |
| | | }) |
| | | editors.push(rectangleEditor); |
| | | rectangleEditor.open(); |
| | | } |
| | | |
| | | //圆形 |
| | | for(var i in objs.circle){ |
| | | // 圆形编辑 |
| | | for (var i in objs.circle) { |
| | | var circle = objs.circle[i]; |
| | | var circleEditor = new AMap.CircleEditor(map, circle) |
| | | |
| | | circleEditor.on('move', function(event) { |
| | | // log.info('触发事件:move') |
| | | }) |
| | | |
| | | circleEditor.on('adjust', function(e) { |
| | | var radius = e.target.getRadius(); |
| | | if(radius > 5000){ |
| | | var circleEditor = new BMapLib.CircleEditor(map, circle); |
| | | circleEditor.addEventListener('drawend', function(e) { |
| | | var center = e.overlay.getCenter(); |
| | | var radius = e.overlay.getRadius(); |
| | | if (radius > 5000) { |
| | | Feng.error("创建电子围栏失败,圆半径不能大于5000米"); |
| | | return; |
| | | } |
| | | }) |
| | | |
| | | circleEditor.on('end', function(e) { |
| | | var center = e.target.getCenter(); |
| | | var radius = e.target.getRadius(); |
| | | coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; |
| | | }) |
| | | coordinate = center.lat + ',' + center.lng + ';' + radius; |
| | | console.log("编辑后的坐标:", coordinate); |
| | | }); |
| | | editors.push(circleEditor); |
| | | circleEditor.open(); |
| | | } |
| | | } |
| | | |
| | | |
| | | // 关闭编辑 |
| | | function closeEdit() { |
| | | for(var i in editors){ |
| | | var editor = editors[i]; |
| | | editor.close(); |
| | | for (var i = 0; i < editors.length; i++) { |
| | | editors[i].close(); |
| | | } |
| | | editors = []; |
| | | } |
| | | |
| | | // 添加提交函数 |
| | | function submitCoordinate() { |
| | | console.log("提交时的坐标:", coordinate); |
| | | if (!coordinate || coordinate.trim() === '') { |
| | | Feng.error('请在地图上规划区域'); |
| | | return false; |
| | | } |
| | | return coordinate; |
| | | } |
| | | |
| | | // 测试函数 |
| | | // 修改测试函数 |
| | | function testCoordinate() { |
| | | console.log("当前坐标值:", coordinate); |
| | | console.log("当前覆盖物数量:", overlays.length); |
| | | console.log("多边形数量:", objs.polygon.length); |
| | | console.log("圆形数量:", objs.circle.length); |
| | | |
| | | // 尝试从最后一个覆盖物获取坐标 |
| | | if (overlays.length > 0) { |
| | | var lastOverlay = overlays[overlays.length - 1]; |
| | | var newCoordinate = getOverlayCoordinate(lastOverlay); |
| | | console.log("从最后一个覆盖物获取的坐标:", newCoordinate); |
| | | if (newCoordinate) { |
| | | coordinate = newCoordinate; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 绑定单选按钮事件 |
| | | var radios = document.getElementsByName('func'); |
| | | for (var i = 0; i < radios.length; i++) { |
| | | radios[i].onchange = function(e) { |
| | | draw(e.target.value); |
| | | } |
| | | } |
| | | |
| | | // 在绘制完成后自动测试 |
| | | drawingManager.addEventListener('overlaycomplete', function(e) { |
| | | setTimeout(testCoordinate, 10); // 延迟1秒后测试 |
| | | }); |
| | | |
| | | // 页面加载完成后初始化 |
| | | $(document).ready(function() { |
| | | // 初始化地图 |
| | | initMap(); |
| | | |
| | | // 监听市区选择变化 |
| | | $("#areaCode").change(function() { |
| | | console.log("市区选择变化,重新获取地图数据"); |
| | | getMapData(); |
| | | }); |
| | | }); |
| | | |
| | | // 初始化地图 |
| | | function initMap() { |
| | | // 设置地图中心点和缩放级别 |
| | | var point = new BMap.Point(114.329123,29.847218); |
| | | map.centerAndZoom(point, 15); |
| | | map.enableScrollWheelZoom(); |
| | | } |