高质量编码-在地图上调整Excel位置经纬度（前端开发）
原创高质量编码-在地图上调整Excel位置经纬度（前端开发）
原创
MiaoGIS
修改于 2021-07-14 16:42:25
修改于 2021-07-14 16:42:25
文章被收录于专栏：Python in AI-IOT
省略说明html和css，下面介绍一下js中各部分函数负责的功能。
初始化地图
根据行政区划查询某地名，地图上叠加其地界轮廓多边形
根据json数据在地图上添加点位图标，同时绑定弹窗内容
根据json生成右边点位信息列表
检查上传的文件格式（xlsx）和列名（经度，纬度，编号），通过验证后地图加载点图标，右侧点位列表刷新
根据ak直接加载数据
右侧列表点击输入坐标后，地图点位位置更新，同时更新listPoints JS对象
通过地图拖动点位图标更新listPoints JS对象
模糊搜索，右侧列表和地图上的点位图标同时过滤
listPoints JS对象保存到后台Excel，以及下载保存后的Excel
定时备份listPoints对象，它保存着调整坐标后的点位信息
前端html和js代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body,
#allmap {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#result {
padding: 7px 10px;
position: fixed;
top: 10px;
left: 20px;
width: 300px;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
border-radius: 7px;
z-index: 99;
}
#cityName,
#searchText {
width: 170px;
margin-right: 10px;
height: 25px;
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
}
#result button {
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
background: rgba(27, 142, 236, 0.5);
color: #fff
}
#result2 {
position: fixed;
top: 10px;
right: 10px;
width: 450px;
max-height: 580px;
line-height: 30px;
text-align: center;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
border-radius: 7px;
z-index: 99;
}
#result2>div:first-child {
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
background: #00BFFF;
border-radius: 7px 7px 0px 0px;
color: #fff;
}
#result2 ul {
list-style-type: none;
margin: 0;
padding: 0;
max-height: 480px;
overflow: scroll;
}
#result2 ul li {
color: #000;
padding: 7px;
font-size: 14px;
text-align: justify;
border-bottom: 1px solid #D3D3D3
}
#result2 ul li a:first-child {
color: green;
padding: 7px;
font-size: 14px;
text-align: justify;
border-bottom: 1px solid #D3D3D3
}
#result2 ul li a:last-child {
color: orange;
padding: 7px;
font-size: 14px;
text-align: justify;
border-bottom: 1px solid #D3D3D3
}
#result2 ul li {
color: #000;
padding: 7px;
font-size: 14px;
text-align: justify;
border-bottom: 1px solid #D3D3D3
}
#result2>div:last-child {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 10px;
}
.btn {
width: 100px;
height: 35px;
color: #fff;
font-size: 14px;
border-radius: 5px;
background: #00BFFF;
box-shadow: none;
}
.btn:hover {
cursor: pointer;
}
.btn-wrap {
z-index: 999;
position: fixed;
top: 0.2rem;
margin-left: 26rem;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
#result4 {
max-width: 600px;
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 3rem;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn2 {
width: 75px;
height: 30px;
float: left;
background-color: #fff;
color: rgba(27, 142, 236, 1);
font-size: 14px;
border: 1px solid rgba(27, 142, 236, 1);
border-radius: 5px;
margin: 0 5px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.btn2:hover {
background-color: rgba(27, 142, 236, 0.8);
color: #fff;
}
.btn-wrap li {
list-style: none;
}
.red {
color: red;
}
</style>
<script type="text/javascript" src="https://underscorejs.net/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://underscorejs.net/js/underscore.js"></script>
<script src="static/lib/ajaxfileupload.js" crossorigin="anonymous"></script>
<script src="static/lib/ajaxfile.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script>
<title>地图数据管理</title>
</head>
<body>
<div id="allmap"></div>
<div id='result'>
城市名: <input id="cityName" type="text" />
<button onclick="theLocation()">查询</button>
</div>
<div id='result2'>
<div class="title">批量地址解析</div>
<ul>
</ul>
<div>
<input id="searchText" type="text" />
<button onclick='search()' class='btn'>查询</button>
<a href='https://api.map.baidu.com/lbsapi/getpoint/index.html' target="_blank">地图坐标拾取</a>
</div>
</div>
<ul class="btn-wrap" style="z-index: 99;">
<li class="light btn2" onclick='saveXlsx()'>保存</li>
<li class="night btn2" onclick="downloadXlsx()">下载xlsx</li>
</ul>
<div id='result4'>
<p style="color: red;">表格中必须有编号,经度,纬度三列,而且编号必须唯一,经度和纬度必须不为空而且为数字.为使体验流畅,建议表格行数少于500(可将大表切分为多个小表).</p>
<label for="xlsx">上传你的.xlsx文件</label>
<input type="file" name="xlsx" id="xlsx" required data-type="xlsx" onchange="javascript:ajaxFileUpload(this)" accept="application/msexcel">
<button onclick='parseXlsx()' class='btn'>解析xlsx</button>
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.enableScrollWheelZoom();
plys = [];
function getBoundary(city) {
var bdary = new BMap.Boundary();
bdary.get(city, function(rs) { //获取行政区域
$.each(plys, (i, x) => {
map.removeOverlay(x);
})
plys = [];
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "#ff0000"
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
plys.push(ply);
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
});
}
dictMarker = {};
listPoints = [];
function loadMarkers(points) {
map.clearOverlays();
$.each(points, (i, x) => {
//console.log(x);
var position = new BMap.Point(x['经度'], x['纬度']);
var marker1 = new BMap.Marker(position);
dictMarker[x['编号']] = marker1;
map.addOverlay(marker1);
marker1.addEventListener("click", function() {
var attrs = _.omit(x, ['编号', '经度', '纬度']);
var content = _.map(attrs, (x, i) => `${i}:${x}`).join('<br>');
var infoWindow = new BMap.InfoWindow(content);
$(`#result2 ul li[data-num=${x['编号']}]`).prependTo('#result2 ul');
marker1.openInfoWindow(infoWindow);
});
})
}
function theLocation() {
var city = document.getElementById("cityName").value;
if (city != "") {
map.centerAndZoom(city, 11); // 用城市名设置地图中心点
}
getBoundary(city);
}
function refreshUl(points) {
if (points.length > 0) {
fields = Object.keys(_.omit(listPoints[0], ['编号', '经度', '纬度']));
formatStr = fields.map((x, i) => '${' + `x['${x}']` + '}').join('---');
listHtml = points.map((x, i) => eval('`<li data-num="' + x['编号'] + '">' + formatStr + '<a href="javascript:void(0);" class="locate">地图定位</a><a href="javascript:void(0);" class="input">输入坐标</a><a href="javascript:void(0);" class="drag">地图拖动</a></li>`')).join('');
console.log(listHtml);
$('#result2 ul').html(listHtml);
}
}
var mustFields = ["编号", "经度", "纬度"];
function parseXlsx() {
ak = $('input#xlsx').data('value');
if(!ak)
{
if(!$('#xlsx').val().endsWith('.xlsx')){
alert('必须上传正确的格式为xlsx的Excel文件');
return
}
}
if (!!ak) {
$.post('/pointsManage', {
ak: ak
}, function(data) {
console.log(data);
if (data['result'] != 0) {
$('#result4').hide();
}
listPoints = $.parseJSON(data['result']);
if (listPoints.length > 0) {
fields = Object.keys(listPoints[0]);
var wrong = mustFields.some((x, i) => {
return fields.indexOf(x) < 0;
})
if (wrong) {
alert('格式有误,请检查要上传的xlsx文件');
location.reload();
}
}
$('#result2 .title').text(`你的ak:${ak}`);
loadMarkers(listPoints);
refreshUl(listPoints);
})
} else {
alert('格式有误,请检查要上传的xlsx文件');
}
}
ak = location.search.match(/ak=(.*)/i);
if (!!ak) {
ak = ak[1];
console.log(ak);
$('input#xlsx').data('value', ak);
parseXlsx();
} else {
var yourAK = prompt('如果你有ak,请输入你的ak，点击确定.如果第一次使用点击取消.')
if (!!yourAK) {
location.href=`${location.href}?ak=${yourAK}`
}
}
$('#result2 ul').delegate('li a.input', 'click', function(e) {
console.log(e);
var num = $(this).parent().data('num');
var latlngStr = prompt("输入坐标,英文逗号隔开(例如:116.505454,39.938174)");
if (!!latlngStr) {
var lng = latlngStr.split(',')[0];
var lat = latlngStr.split(',')[1];
console.log(lng, lat);
dictMarker[num].setPosition(new BMap.Point(lng, lat));
var point = listPoints.find(x => x['编号'] == num);
if (!!point) {
point['经度'] = +lng;
point['纬度'] = +lat;
} else {
alert('保存出错!');
}
}
});
$('#result2 ul').delegate('li a.drag', 'click', function(e) {
console.log(e);
var num = $(this).parent().data('num');
if ($(this).text() == "地图拖动") {
dictMarker[num].enableDragging();
$(this).text("确定拖动").css('color', 'red');
} else {
dictMarker[num].disableDragging();
$(this).text("地图拖动").css('color', 'orange');
var point = listPoints.find(x => x['编号'] == num);
var position = dictMarker[num].getPosition();
if (!!point) {
point['经度'] = +position['lng'];
point['纬度'] = +position['lat'];
} else {
alert('保存出错!');
}
}
});
function search() {
var keyword = $('#searchText').val().trim();
if ("" != keyword) {
points = _.filter(listPoints, (xx, ii) => {
return _.any(xx, (x, i) => {
if(!!x){
return x.toString().match(keyword)
}
return false;
});
})
loadMarkers(points);
refreshUl(points);
} else {
loadMarkers(listPoints);
refreshUl(listPoints);
}
}
function saveXlsx() {
if (!ak) {
alert('现在还没有数据,不能保存和下载!');
return
}
$.post('/pointsExcel', {
ak: ak,
rows: JSON.stringify(listPoints)
}, function(data) {
if (data['result'] != 1) {
alert('出错,为了不丢失当前地图上位置的修改,请联系开发者!');
} else {
alert('保存成功,你现在可以下载查看!');
}
})
}
function downloadXlsx() {
if (!ak) {
alert('现在还没有数据,不能保存和下载!');
return
}
window.open('static/files/xlsx/' + ak + '.xlsx')
}
$('#result2 ul').delegate('li a.locate', 'click', function(e) {
console.log(e);
var num = $(this).parent().data('num');
map.centerAndZoom(dictMarker[num].getPosition(), 16);
});
setInterval(function() {
localStorage['backup' + (!!ak ? '_' + ak : '')] = JSON.stringify(listPoints);
console.log('backup successed');
}, 1000 * 60);
</script>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
