百度地图绘制多边形几何图形并保存坐标转成覆盖物

共111个文件

gif：75个

js：23个

css：6个

百度地图

几何图形

2星需积分: 16 156 浏览量 2019-04-12 08:27:51 上传评论 2 收藏 622KB RAR 举报

在IT行业中，尤其是在地理信息系统（GIS）开发领域，利用地图API进行交互式地图绘制是常见的需求。本话题聚焦于如何使用百度地图API来绘制多边形几何图形，并将这些图形的坐标保存，以便后续转化为地图上的覆盖物。下面将详细阐述这一过程。我们要了解百度地图API的核心功能。百度地图API提供了丰富的地图展示、定位、路线规划等服务，同时也支持自定义覆盖物，这其中包括了绘制几何图形的能力。开发者可以通过JavaScript调用API接口，实现在地图上绘制点、线、面等元素。绘制多边形的基本步骤如下： 1. 引入百度地图API：在HTML文件中，通过`<script>`标签引入百度地图的JS库，通常包括地图初始化、事件处理等功能。 2. 初始化地图：使用`BMap.Map`类创建一个地图实例，并设置地图中心点、缩放级别等参数。例如： ```javascript var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); ``` 3. 创建绘制工具：利用`BMap.PolyEditor`或`BMap.DrawingManager`类，可以创建绘制工具。用户可以通过鼠标在地图上自由绘制多边形。例如： ```javascript var drawingManager = new BMap.DrawingManager({ open: true, // 默认开启绘制模式 enableDrawingTool: true, // 开启工具栏 drawingMode: BMAP_DRAWING_POLYGON // 设置默认绘制模式为多边形 }); map.addOverlay(drawingManager); ``` 4. 监听绘制事件：当用户完成绘制后，我们需要捕获这个事件，获取到绘制的多边形坐标。可以通过`drawingManager`的事件监听实现，如： ```javascript drawingManager.addEventListener('polygoncomplete', function(polygon) { var points = polygon.getPath(); // 获取多边形的顶点数组 console.log(points); }); ``` 5. 保存和转化坐标：将获取到的`points`数组保存下来，这通常涉及到JSON序列化或者数据库存储。在需要时，可以将这些坐标重新转化为地图上的覆盖物。 6. 显示覆盖物：创建`BMap.Polygon`对象，将保存的坐标传入，然后添加到地图上。例如： ```javascript var polygon = new BMap.Polygon(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); map.addOverlay(polygon); ``` 以上就是使用百度地图API绘制多边形几何图形并保存坐标转成覆盖物的基本流程。在实际应用中，可能还需要考虑更多细节，如用户交互、样式定制、地图事件处理等。同时，为了提高用户体验，还可以添加撤销/重做功能，或者提供图形编辑功能，让用户可以调整已绘制的多边形。在提供的压缩包文件中，"百度地图绘制多边形"很可能包含了示例代码或完整的项目文件，用于演示如何实现上述功能。通过查看和学习这些代码，你可以更深入地理解百度地图API的用法，以及如何将理论知识应用到实际项目中。

资源推荐

资源详情

资源评论

收起资源包目录

百度地图绘制多边形几何图形并保存坐标转成覆盖物（111个子文件）

layui.css 68KB

layer.css 14KB

layui.mobile.css 10KB

laydate.css 7KB

code.css 1KB

css.css 851B

iconfont.eot 40KB

59.gif 10KB

22.gif 10KB

24.gif 8KB

13.gif 7KB

16.gif 7KB

39.gif 6KB

64.gif 6KB

63.gif 6KB

50.gif 6KB

loading-0.gif 6KB

4.gif 6KB

1.gif 5KB

42.gif 5KB

71.gif 5KB

21.gif 5KB

20.gif 5KB

29.gif 5KB

70.gif 4KB

5.gif 4KB

17.gif 4KB

27.gif 4KB

9.gif 4KB

44.gif 4KB

11.gif 4KB

8.gif 4KB

3.gif 4KB

23.gif 4KB

34.gif 4KB

41.gif 4KB

38.gif 4KB

65.gif 3KB

32.gif 3KB

45.gif 3KB

7.gif 3KB

12.gif 3KB

26.gif 3KB

60.gif 3KB

2.gif 3KB

40.gif 3KB

25.gif 3KB

19.gif 3KB

66.gif 3KB

18.gif 3KB

46.gif 3KB

10.gif 3KB

28.gif 3KB

51.gif 3KB

57.gif 3KB

67.gif 3KB

48.gif 3KB

0.gif 3KB

43.gif 3KB

30.gif 2KB

61.gif 2KB

33.gif 2KB

69.gif 2KB

14.gif 2KB

47.gif 2KB

36.gif 2KB

49.gif 2KB

58.gif 2KB

6.gif 2KB

54.gif 2KB

53.gif 2KB

56.gif 2KB

62.gif 2KB

31.gif 2KB

55.gif 2KB

35.gif 2KB

15.gif 2KB

loading-2.gif 2KB

37.gif 1KB

68.gif 1KB

52.gif 777B

loading-1.gif 701B

index.html 3KB

layui.all.js 255KB

jquery.js 95KB

jquery-1.12.4.min.js 95KB

mobile.js 33KB

table.js 30KB

laydate.js 27KB

layer.js 22KB

layedit.js 12KB

colorpicker.js 11KB

form.js 9KB

element.js 7KB

slider.js 7KB

upload.js 7KB

layui.js 7KB

laypage.js 4KB

map.js 4KB

carousel.js 4KB

共 111 条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"> <title>绘制几何图形</title> <link type="text/css" rel="stylesheet" href="layui/css/layui.css"> <link type="text/css" rel="stylesheet" href="css/css.css"> </head> <body> <div class="irrigation"> <div class="irr-map"> <div class="map" id="map"></div> <div class="layui-btn-group layui-hide"> <button class="layui-btn layui-btn-sm" id="cancelAddRegion">取消添加</button> </div> </div> <div class="irr-aside"> <div class="layui-card irr-item"> <div class="layui-card-header">区域列表</div> <div class="layui-card-body"> <p class="default-txt">暂无区域，请先添加区域。</p> <table class="layui-table layui-hide" lay-size="sm" id="regionTable"> <thead> <tr> <th>名称</th> <th>操作</th> </tr> </thead> <tbody>  </tbody> </table> <button class="layui-btn layui-btn-sm layui-btn-normal btn-add-region" id="addRegion">添加区域</button> </div> </div> <div class="layui-card irr-item"> <div class="layui-card-header">设备列表</div> <div class="layui-card-body"> <p class="default-txt">暂无区域，请先<a href="#">添加</a>设备。</p> <table class="layui-table layui-hide" lay-size="sm"> <thead> <tr> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>0</td> </tr> </tbody> </table> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="layui/layui.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <script type="text/javascript" src="js/map.js"></script> </body> </html>

评论收藏

内容反馈