百度地图 - 自定义划分区域并获取区域内的坐标点

最近在做一个大数据人员分布的系统，需要能够在地图上自定义划分区域，并能够获取该区域内的坐标点信息，也是搞了很久才做出来，特此记录一下

1、百度地图API

首先我们需要去百度地图申请一个应用，得到密钥

http://lbsyun.baidu.com/

2、自定义区域

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>获取自定义区域内的坐标点 - 百度地图</title><!-- 加载鼠标绘制样式 --><link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"><style>html,body {width: 100%;height: 100vh;padding: 0;margin: 0;overflow: hidden;}/* 隐藏百度地图logo */.anchorBL {display: none;}.btn-contrail button {margin-bottom: 30px;margin-left: 0px!important;background-color: #FFFFFF;color: rgba(0, 0, 0, .5);padding: 10px;}.layui-btn:hover {background-color: #1890ff!important;color: #FFFFFF!important;}.btn-click {background-color: #1890ff!important;color: #FFFFFF!important;}.BMapLib_Drawing {position: absolute!important;right: 150px!important;display: none;}/* 隐藏工具栏 */.BMapLib_marker {display: none;}</style></head><body><div style="position: fixed;top: 0;right: 0;height: 100vh;background: rgba(0,0,0,0);width: 125px;z-index: 9999999;display: flex;justify-content: center;align-items: center;"><div class="tools" style="width: 100%;height: 100%"><div class="btn-contrail" style="height: 100%;background: rgba(0,0,0,.5);width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><button type="button" class="layui-btn btn-click" data-model="0">查看点</button><button type="button" class="layui-btn" data-model="1">标新点</button><button type="button" class="layui-btn" data-model="2">删除点</button><button type="button" class="layui-btn" data-model="3">画区域</button><button type="button" class="layui-btn" data-model="4">清除域</button><button type="button" class="layui-btn" data-model="5">计算点</button></div></div></div><!-- 地图容器 --><div id="container" style="height: 100vh;width: 100%"></div><!-- jquery --><script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script><!-- 百度地图api --><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script><!-- 点聚合工具 --><script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><!-- 点聚合工具 --><script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script><!--加载鼠标绘制工具--><script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script><script type="text/javascript">// 工具栏模式：0-查看点1-标新点2-删除点3-画区域4-清除域5-计算点var model = 0;// 地图上所有的点var points = [];// 区域内的点var areaPoint = [];// 切换模式$('body').on('click', '.layui-btn', function() {// 样式改变$('.btn-contrail').find('.layui-btn').removeClass('btn-click');$(this).addClass('btn-click');// 事件监听model = $(this).data('model');if(3 == model) {$('.BMapLib_Drawing').show();} else {$('.BMapLib_Drawing').hide();}// 清除域if(4 == model) {clearAll();}// 计算点if(5 == model) {alert('所选区域点数：' + areaPoint.length);}});// 定义地图var mp = new BMap.Map("container");// 鼠标滚动缩放mp.enableScrollWheelZoom(true);// 地图中心点，并设置级别mp.centerAndZoom(new BMap.Point(106.908, 28.1744), 10);// 地图类型，卫星地图mp.setMapType(BMAP_HYBRID_MAP);// 地图缩放级别mp.setZoom(10)// 请求数据，并渲染地图init();function init() {// 获取数据$.get("json/data.json", function(res) {points = res.data;renderMap();});}// 渲染地图坐标点function renderMap() {var markers = [];points.forEach(v => {// 创建新的坐标点const marker = new BMap.Marker(new BMap.Point(v['lng'], v['lat']), {icon: ''})// 为每一个点添加点击事件marker.addEventListener('click', function() {showPoint(v, marker);});markers.push(marker)})// 点聚合new BMapLib.MarkerClusterer(mp, {markers: markers});}// 监听地图点击事件mp.addEventListener("click", function(e) {var point = e.point;// 标新点if(1 == model) {// 创建新的坐标点const marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));// 添加点击事件marker.addEventListener('click', function() {showPoint(point, marker);});// 添加坐标点到地图中mp.addOverlay(marker);// 将坐标点添加到我们的坐标带你集合中points.push(point);}});// 坐标点的点击事件监听function showPoint(point, marker) {// 查看点if(0 == model) {var lng = parseFloat(point.lng).toFixed(5);var lat = parseFloat(point.lat).toFixed(5);alert('经度：' + lng + '，纬度：' + lat);}// 删除点if(2 == model) {mp.removeOverlay(marker);}}// 区域坐标点范围var overlays = [];// 区域划分后触发事件var overlaycomplete = function(e) {var position = [];overlays.push(e.overlay);// 获取多边形端点坐标for(var i = 0; i < e.overlay.getPath().length; i++) {let coordinate = new Object();coordinate.lng = e.overlay.getPath()[i].lng;coordinate.lat = e.overlay.getPath()[i].lat;position.push(coordinate);}// 清空上一区域内的点areaPoint.length = 0;// 重新添加区域内的点points.forEach(v => {// 计算点是否在区域内if(isInsidePolygon(v, position)) {areaPoint.push(v)}})// 关闭绘制模式drawingManager.close();};// 绘制样式var styleOptions = {strokeColor: "red", //边线颜色。fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, //边线的宽度，以像素为单位。strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。};// 实例化鼠标绘制工具var drawingManager = new BMapLib.DrawingManager(mp, {// 是否开启绘制模式isOpen: false,// 是否显示工具栏enableDrawingTool: true,drawingToolOptions: {// 位置anchor: BMAP_ANCHOR_TOP_RIGHT,// 偏离值offset: new BMap.Size(5, 5),// 画覆盖物工具栏上显示的可选项drawingModes: [BMAP_DRAWING_MARKER,BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE]},// 圆的样式circleOptions: styleOptions,// 线的样式polylineOptions: styleOptions,// 多边形的样式polygonOptions: styleOptions,// 矩形的样式rectangleOptions: styleOptions});// 添加鼠标绘制工具监听事件，用于获取绘制结果drawingManager.addEventListener('overlaycomplete', overlaycomplete);/// 清除区域function clearAll() {for(var i = 0; i < overlays.length; i++) {mp.removeOverlay(overlays[i]);}// 区域坐标置空overlays.length = 0}// 计算点是否在坐标内function isInsidePolygon(point, pts) {const N = pts.lengthlet intersectCount = 0let precision = 2e-10// 邻界顶点let p1, p2let p = point// 左顶点p1 = pts[0]// 检查所有射线for(let i = 1; i <= N; ++i) {// p是一个边上的点if(p.lat === p1.lat && p.lng === p1.lng){return true}// 右顶点p2 = pts[i % N]// 射线与我们无关if(p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {p1 = p2;// 下一个射线左点continue;}if(p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {if(p.lng <= Math.max(p1.lng, p2.lng)) {if(p1.lat === p2.lat && p.lng >= Math.min(p1.lng, p2.lng))return trueif(p1.lng === p2.lng) {if(p1.lng === p.lng) {return true} else {++intersectCount}} else {let xInters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;if(Math.abs(p.lng - xInters) < precision)return trueif(p.lng < xInters)++intersectCount}}} else {if(p.lat === p2.lat && p.lng <= p2.lng) {// 下一个顶点let p3 = pts[(i + 1) % N];if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat))++intersectCountelseintersectCount += 2}}// 下一个射线左点p1 = p2}// 偶数在多边形外, 奇数在多边形内return 0 !== intersectCount % 2}</script></body></html>

3、JSON 数据格式

{"code": 200,"msg": "操作成功","data": [{"lng": "109.19151","lat": "27.73559"},{"lng": "106.67668","lat": "26.559734"}]
}

如您在阅读中发现不足，欢迎留言！！！

百度地图 - 自定义划分区域并获取区域内的坐标点相关推荐

【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
百度地图瓦片 android,百度地图自定义瓦片图获取
nodejs代码 const request = require('request'); const fs = require('fs'); const bagpipe = require('bagp ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
【百度地图API】如何获取行政区域的边界？
[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值. - ...
如何利用自己的数据制作社交地图？只显示可视区域内的标注
地址:http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html [百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的 ...
百度地图自定义结果面板+分页+图层标注(标注点+搜索)
百度地图自定义结果面板+分页+图层标注(标注点+搜索) 示例一: <html> <head><meta http-equiv="Content-Type&qu ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
android百度地图画圆,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): 1 ...

百度地图 - 自定义划分区域并获取区域内的坐标点

1、百度地图API

2、自定义区域

3、JSON 数据格式

百度地图 - 自定义划分区域并获取区域内的坐标点相关推荐

最新文章

热门文章