百度地图开发：根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案

项目需求

指定某区域&＃xff08;非省市区县乡镇标准行政区划&＃xff09;&＃xff0c;做功能边界分区&＃xff0c;实现Echarts地理坐标数据可视化展示。

提供信息

项目分析

• 要在Echarts上实现地理坐标可视化&＃xff0c;必须使用geoJSON格式文件&＃xff1b;
• 项目只能提供手绘图纸&＃xff0c;需要将手绘图纸转换为可以识别的经纬度坐标信息&＃xff1b;
• 如何将图纸绑定在百度地图上&＃xff0c;使图纸和百度地图区域相重合&＃xff0c;按照提供的区域边界&＃xff0c;拾取对应的经纬度坐标&＃xff1b;
• 将拾取的经纬度坐标做换为geoJSON&＃xff1b;
• 引入Echarts&＃xff0c;进行开发&＃xff1b;

操作步骤

为简化流程和项目信息外漏&＃xff0c;以随意某地作为案例实施步骤演示。

固定地图

在百度地图上找到对应的区域&＃xff0c;并设置对应的地图显示级别&＃xff0c;map.centerAndZoom(new BMap.Point(112.761393, 28.101516), 18)方便后面图片和区域相重合&＃xff1b;截图固定地图级别的图片&＃xff1a;map1.jpg

图片处理

在PSD中打开map1.jpg文件&＃xff0c;将功能区划在PSD中进行处理&＃xff0c;扣除多余的部分&＃xff0c;只要行政划分的区域&＃xff0c;且图片的大小依据步骤1中截图的大小&＃xff0c;一一对应。

3.隐藏地图&＃xff0c;只留行政区划部分区域&＃xff0c;保存新的文件为&＃xff1a;newmap.png

代码开发

使用的技能&＃xff1a;

1. 百度地图API的引入&＃xff1b;
2. 百度地图绘制多边形并获取所有点的坐标&＃xff1b;
3. HTML&CSS相对定位和绝对定位&＃xff0c;实现图片和地图的重合&＃xff1b;
4. 将拾取的坐标转化为标准的geoJOSN&＃xff1b;

引入百度地图api

<script type&＃61;"text/Javascript"src&＃61;"http://api.map.baidu.com/api?v&＃61;3.0&ak&＃61;你的AK"></script>


创建容器

<div id&＃61;"main"><div id&＃61;"img"><img src&＃61;"images/lll.png" alt&＃61;"">div><div id&＃61;"container">div>
div>
<div id&＃61;"text"><input id&＃61;"startBtn" type&＃61;"button" onclick&＃61;"startTool();" value&＃61;"开启取点"/><input type&＃61;"button" onclick&＃61;"map.clearOverlays();document.getElementById(&＃39;info&＃39;).innerHTML &＃61; &＃39;&＃39;;points&＃61;[];"value&＃61;"清除"/>
div><div id&＃61;"info">坐标&＃xff1a;div>


CSS样式表

body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}#main {position: relative;}#img {position: absolute;opacity: 0.5;left: 500px;top: 200px;z-index: -999;}#container {width: 100%;height: 80vh;border: 1px solid gray;position: absolute;opacity: 0.7;z-index: 9999;}#text {position: absolute;z-index: 9999;left: 50px;bottom: 120px;}#info {position: absolute;z-index: 999999;left: 50px;bottom: 80px;}


实现的布局如图&＃xff1a;

1. 图片置于最底层&＃xff0c;方便按照边界拾取经纬度&＃xff1b;
2. 地图设置一定的透明度&＃xff0c;方便开发图片&＃xff1b;
3. 移动地图和图片相重合&＃xff0c;绘制多边形并获取所有点的坐标&＃xff1b;

绘制多边形并获取所有点的坐标

var map &＃61; new BMap.Map("container", {enableMapClick: false});map.centerAndZoom(new BMap.Point(112.761393, 28.101516), 18);map.enableScrollWheelZoom();/*设置版权控件位置 -Begin*/var cr &＃61; new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});map.addControl(cr); //添加版权控件var bs &＃61; map.getBounds(); //返回地图可视区域cr.addCopyright({id: 1,content: "

[112.7584914732037,28.10156777873837],[112.759075371785,28.1008667598055],[112.76014435534152,28.10005420934206],[112.76070130475752,28.10014183763234],[112.76055757587598,28.10128099882524],[112.76028808422306,28.101519982139973],[112.7585094393139,28.101599643125347]


生成geoJSON

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"type": "LineString","coordinates": [[112.7584914732037,28.10156777873837],[112.759075371785,28.1008667598055],[112.76014435534152,28.10005420934206],[112.76070130475752,28.10014183763234],[112.76055757587598,28.10128099882524],[112.76028808422306,28.101519982139973],[112.7585094393139,28.101599643125347]]}}]
}


后续总结

1. 第一种尝试&＃xff0c;是使用百度标注&＃xff0c;将图片作为一个maker使用&＃xff0c;好在maker可以自由移动&＃xff0c;方便对齐区域&＃xff1b;而实际上&＃xff0c;将图片引入百度地图API后&＃xff0c;是无法缩放的&＃xff0c;实现不了图片和地图的重合&＃xff1b;
2. 第二种尝试&＃xff0c;使用GroundOverlay&＃xff0c;地面图层的叠加&＃xff0c;难点在于无法确定可视范围的西南角SW和东北角NE&＃xff0c;就无法精准位置&＃xff1b;同时该功能无法调整图片大小&＃xff0c;无法移动和缩放图片&＃xff0c;也实现不了图片和地图的重合&＃xff1b;
3. 返璞归真&＃xff0c;利用CSS层叠的概念&＃xff0c;实现图片和地图自由移动的特性&＃xff0c;实现图片和地图的重合。
4. 完成项目&＃xff0c;希望有时间将该功能整理成一个插件&＃xff0c;以便解决乡镇边界&＃xff0c;村级边界、经济开发区边界等等自定义项目的开发。

LOCKDATAV DONE&＃xff01;