自定义区划管理,不需再受限于行政规划,可根据业务特点(如网点覆盖范围、消费者分布、内部人员分工等)自由划分区域块,实现企业信息的精细化格网管理。
视频演示:
百度地图自定义区划管理视频教程
- 基于百度地图API开放接口;
- 获取边界数据后,PHP后台数据管理;
- 降低专业GIS软件门槛,将GIS优化为大众画图工具,让画区不再繁琐;
- 支持多人在线协同编辑区域及业务数据,提升工作效率;
JS文件引入
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="//api.map.baidu.com/api?v=2.0&ak=11Z8uiP8kIz6AG0Vjiwzbc5f9Ii0cdHd"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript"
src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
<!--核心函数库-->
<script src="js/functions.js"></script>
<!--layui2.57框架-->
<script src="js/layui/layui.js"></script>
<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/common.css" media="all">
HTML容器构建
<div id="allmap">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<div class="pannel">
<div class="itemChild">
<div id="result">
<p><input type="text" placeholder="区划名称" id="name" lay-verify="required" class="layui-input"></p>
<p><textarea rows="10" cols="80" id="res" class="layui-textarea" placeholder="自动获取经纬" readonly></textarea></p>
<p>
<!--<input class="layui-btn" type="button" value="获取绘制的覆盖物个数" οnclick="alert(overlays.length)"/>-->
<input class="layui-btn" type="button" value="清除所有覆盖物" onclick="clearAll()"/>
<button id="btn" class="layui-btn">提交区划经纬度数据</button>
</p>
</div>
</div>
<div class="itemChild">
<table class="layui-hide" id="test"></table>
</div>
</div>
提交自定义区划
/*提交自定义区划*/
$(function () {
$("#btn").click(function () {
var name = $("#name").val();
var lnglat = $("#res").val();
if (name == "") {
alert("区划名称不能为空!");
$("#name").focus();
return false;
}
if (lnglat == "") {
alert("经纬度不能为空!");
$("#res").focus();
return false;
}
//提交数据入库;
addDistrict(name, lnglat.substr(0, lnglat.length - 1))
})
})
获取行政区划的边界轮廓
/*获取行政区划的边界轮廓*/
function getArea() {
$.ajax({
type: 'post',
async: true,
data: {},
url: 'api/api.php?act=getDistrict&token=3cab7ce4142608c0f40c785b5ab5ca24',
dataType: "json",
success: function (res) {
//console.log(res.data);
var arr = [];
for (var m = 0; m < res.data.length; m++) {
arr.push(res.data[m].lnglat);
}
//绘制多边形;
drawPolygon(arr);
},
error: function (err) {
console.log(err + "请求数据失败!");
}
});
//绘制多边形;
function drawPolygon(arr) {
var ops = {
strokeColor: "rgba(0,0,0,1)",
fillColor: "rgba(0,0,0,1)",
fillOpacity: 0.4,
strokeOpacity: 0.1
};
for (var j = 0; j < arr.length; j++) {
//console.log(eval(arr[j]));
var plPoint = [];
for (var i = 0; i < eval(arr[j]).length; i++) {
//console.log(eval(arr[j])[i][0]);
plPoint.push(new BMap.Point(eval(arr[j])[i][0], eval(arr[j])[i][1]));
}
var ply = new BMap.Polygon(plPoint, ops);
map.addOverlay(ply);
//ply.enableEditing();
}
}
}
Done!