百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
项目需求
指定某区域(非省市区县乡镇标准行政区划),做功能边界分区,实现Echarts地理坐标数据可视化展示。
提供信息
项目分析
- 要在Echarts上实现地理坐标可视化,必须使用geoJSON格式文件;
- 项目只能提供手绘图纸,需要将手绘图纸转换为可以识别的经纬度坐标信息;
- 如何将图纸绑定在百度地图上,使图纸和百度地图区域相重合,按照提供的区域边界,拾取对应的经纬度坐标;
- 将拾取的经纬度坐标做换为geoJSON;
- 引入Echarts,进行开发;
操作步骤
为简化流程和项目信息外漏,以随意某地作为案例实施步骤演示。
固定地图
在百度地图上找到对应的区域,并设置对应的地图显示级别,map.centerAndZoom(new BMap.Point(112.761393, 28.101516), 18)
方便后面图片和区域相重合;截图固定地图级别的图片:map1.jpg
图片处理
在PSD中打开map1.jpg文件,将功能区划在PSD中进行处理,扣除多余的部分,只要行政划分的区域,且图片的大小依据步骤1中截图的大小,一一对应。
3.隐藏地图,只留行政区划部分区域,保存新的文件为:newmap.png
代码开发
使用的技能:
- 百度地图API的引入;
- 百度地图绘制多边形并获取所有点的坐标;
- HTML&CSS相对定位和绝对定位,实现图片和地图的重合;
- 将拾取的坐标转化为标准的geoJOSN;
引入百度地图api
<script type="text/javascript"src="http://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
创建容器
<div id="main"><div id="img"><img src="data:images/lll.png" alt=""></div><div id="container"></div>
</div>
<div id="text"><input id="startBtn" type="button" onclick="startTool();" value="开启取点"/><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];"value="清除"/>
</div><div id="info">坐标:</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;}
实现的布局如图:
- 图片置于最底层,方便按照边界拾取经纬度;
- 地图设置一定的透明度,方便开发图片;
- 移动地图和图片相重合,绘制多边形并获取所有点的坐标;
绘制多边形并获取所有点的坐标
var map = new BMap.Map("container", {enableMapClick: false});map.centerAndZoom(new BMap.Point(112.761393, 28.101516), 18);map.enableScrollWheelZoom();/*设置版权控件位置 -Begin*/var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});map.addControl(cr); //添加版权控件var bs = map.getBounds(); //返回地图可视区域cr.addCopyright({id: 1,content: "<div style='font-size:12px;margin: 10px;padding:5px;background: rgba(255,255,255,.8);'>Copyright © 漏刻有时百度地图API开发</div>",bounds: bs});/*设置版权控件位置 -End*/var key = 1; //开关var newpoint; //一个经纬度var points = []; //数组,放经纬度信息var polyline = new BMap.Polyline(); //折线覆盖物function startTool() { //开关函数if (key == 1) {document.getElementById("startBtn").style.background = "green";document.getElementById("startBtn").style.color = "white";document.getElementById("startBtn").value = "开启状态";key = 0;}else {document.getElementById("startBtn").style.background = "red";document.getElementById("startBtn").value = "关闭状态";key = 1;}}//单击地图,形成折线覆盖物map.addEventListener("click", function (e) {newpoint = new BMap.Point(e.point.lng, e.point.lat);if (key == 0) {// if(points[points.length].lng==points[points.length-1].lng){alert(111);}points.push(newpoint); //将新增的点放到数组中polyline.setPath(points); //设置折线的点数组map.addOverlay(polyline); //将折线添加到地图上/*02.数据集格式*/document.getElementById("info").innerHTML += "[" + e.point.lng + "," + e.point.lat + "],";}});//双击地图,形成多边形覆盖物map.addEventListener("dblclick", function (e) {if (key == 0) {map.disableDoubleClickZoom(); //关闭双击放大var polygon = new BMap.Polygon(points);map.addOverlay(polygon); //将折线添加到地图上}});
[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]]}}]
}
后续总结
- 第一种尝试,是使用百度标注,将图片作为一个maker使用,好在maker可以自由移动,方便对齐区域;而实际上,将图片引入百度地图API后,是无法缩放的,实现不了图片和地图的重合;
- 第二种尝试,使用GroundOverlay,地面图层的叠加,难点在于无法确定可视范围的西南角SW和东北角NE,就无法精准位置;同时该功能无法调整图片大小,无法移动和缩放图片,也实现不了图片和地图的重合;
- 返璞归真,利用CSS层叠的概念,实现图片和地图自由移动的特性,实现图片和地图的重合。
- 完成项目,希望有时间将该功能整理成一个插件,以便解决乡镇边界,村级边界、经济开发区边界等等自定义项目的开发。
LOCKDATAV DONE!
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案相关推荐
- C#的百度地图开发(一)发起HTTP请求
C#的百度地图开发(一)发起HTTP请求 原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相 ...
- 谷歌 地图 android studio,Android Studio百度地图开发(一)
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 本人用Android Studio做百度地图开发,调试了一整天,始终无法通过.然后怀疑代码有问题,就换Eclipse进行代码编写,毕竟网上关于Eclips ...
- 百度地图开发技术方案及解决办法
技术方案及解决办法 文章目录 技术方案及解决办法 总体方案 基础框架 前端网页 后端程序 结合搭建方法 跨域解决 python处理excel 问题描述 解决办法 网页结构 vue实例 内容引入 ele ...
- Android studio 百度地图开发(5)查询周边服务(加油站)
Android studio 百度地图开发(5)查询周边服务(加油站) email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是An ...
- 百度地图开发(二)之添加覆盖物 地理编码和反地理编码
转载请注明出处: http://blog.csdn.net/crazy1235/article/details/43377545 之前写过一篇关于百度地图开发的blog,主要介绍了百度地图的基本地图的 ...
- android 百度地图开发 别人用不了,Android百度地图开发的那些不足之处
Android百度地图开发的那些不足之处,最近做的项目中百度地图是很重要的一个模块,其中实现了定位.自定义Marker图标.线路规划.SuggestionSearch检索.地图截图以及导航等功能.因为 ...
- 用android studio测量距离,Android studio 百度地图开发(6)Marker绑定事件、计算两点距离...
Android studio 百度地图开发(6)Marker绑定事件.计算两点距离 email:chentravelling@163.com 开发环境:win7 64位,Android Studio, ...
- 基于Android的百度地图开发
参考资料: android studio获得SHA1的值,然后在百度地图移动版API官网申请key Android Studio怎么查看程序的安全码获取SHA1值? http://www.codese ...
- [android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识 上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
- 通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息 更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
最新文章
- .sh是什么语言_shell的重生历史:从sh到bash
- 解决VSCode终端中禁止运行脚本问题的一种方式
- pyqt5教程12:拖放功能
- 深入理解this和call、bind、apply对this的影响及用法
- Shell脚本之sed的使用
- oracle 插入一个语句,oracle如何通过1条语句插入多个值 oracle通过1条语句插入多个值方法...
- 华为云新春送福,大吉大利今晚红包雨!
- 如何求两个矢量间的夹角
- hadoop——Map/Reduce中combiner的使用
- python学习之路(3)---列表
- (1)关于File类你知道多少
- [AHK]获取通达信软件上的股票代码
- xp系统启动sql服务器,XP系统,sqlserver服务启动了又自己停止,服务管理器点了启动随后马上就已停止!...
- psCS6图片文件无法直接拖入的解决方法
- MySQL数据库:表结构优化
- 记一次E3-1220V2+HD7450黑苹果安装10.13的过程
- 2022-2028年中国康复理疗行业市场发展现状及竞争格局预测报告
- 百度人脸识别API调用实现
- 操作系统春招面试复习之:存储管理
- python机器学习之SVM分类预测电芯状态