转载至https://blog.csdn.net/zhonghuart/article/details/77934693
百度地图小区边界(轮廓)处理
最近,查了很多资料都没法在百度地图上画出小区边界,经过一番研究后,终于发现了一种方式。以下是demo的相关说明:
1. demo中小区相关信息查询是基于jsonp的方式处理
2. 使用百度地图需要申请AK,demo中使用的是我个人的申请的,如果demo打开没有效果可能是AK过期了
3. 因为小区轮廓百度没有公布相关API,demo中的接口有可能被百度关闭
4. 可能有的小区并没有相关轮廓数据,所以demo中也无法显示出来
闲话不多说了,直接上代码
1)JS代码(下变第一部分代码)
2)HTML代码(下边第二部分代码)
3)下载地址:http://pan.baidu.com/s/1qY2rAPI
4)效果
var queryHouseOutline = function(hid, callback){
var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
var url = baseURL + "&uid=" + hid;
callback && (window.queryHouseOutlineCallback = callback);
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonpCallback: "queryHouseOutlineCallback",
success: function(datas) {
}
});
};
/**
* 模糊查询小区信息, 无返回值
* @param {} house 小区名称
* @param {} city 所属城市名称
* @param {} ak 百度地图AK
* @param {} callback 回调函数,该函数可以接收到请求的返回值
*/
var queryHouse = function(house, city, ak, callback){
var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
var url = baseURL + "&q=" + house + "®ion=" + city + "&ak=" + ak;
callback && (window.queryHouseCallback = callback);
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonpCallback: "queryHouseCallback",
success: function(datas) {
}
});
};
/**
* 墨卡托坐标转百度坐标
* @param {} coordinate
* @return {}
*/
var coordinateToPoints = function(map, coordinate) {
var points = [];
if (coordinate) {
var arr = coordinate.split(";");
if(arr){
for(var i = 0; i < arr.length; i++){
var coord = arr[i].split(",");
if(coord && coord.length == 2){
var mctXY = new BMap.Pixel(coord[0], coord[1]);
var project = map.getMapType().getProjection();
var point = project.pointToLngLat(mctXY);
points.push(new BMap.Point(point.lng, point.lat));
}
}
}
}
return points;
};
/**
* 墨卡托坐标解析
* @param {} mocator
* @return {}
*/
var parseGeo = function(mocator){
if(typeof mocator != 'string'){
return {};
}
var t = mocator.split("|");
var n = parseInt(t[0]);
var i = t[1];
var r = t[2];
var o = r.split(";");
if(n === 4){
for (var a = [], s = 0; s < o.length - 1; s++){
"1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
}
o = a;
o.push("");
}
var u = [];
switch(n){
case 1:
u.push(o[0]);
break;
case 2:
case 3:
case 4:
for (var s = 0; s < o.length - 1; s++) {
var l = o[s];
if (l.length > 100){
l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
"$1,$2;");
u.push(l);
} else {
for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
var p = d[f];
var h = d[f + 1];
c.push(p + "," + h);
}
u.push(c.join(";"))
}
}
break;
default:
break;
}
if(u.length <= 1){
u = u.toString();
}
var result = {
type : n,
bound : i,
points : u
};
return result;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图DEMO</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=E1ec599cbc4a8006eb37d99cf002e054"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/equipmentMapUtil.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom("深圳", 15);
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
var options = {
renderOptions : {
map : map,
selectFirstResult : true
},
onSearchComplete : function(results) {
//这个函数会被调用两次
}
};
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/**
* 第一个参数是城市名,第二参数是小区名
*/
var showArea = function(city, area){
queryHouse(area, city, "E1ec599cbc4a8006eb37d99cf002e054", function(data){
if(data.message == 'ok'){
var houses = data.results;
if(houses && houses.length > 0){
var house = houses[0];
queryHouseOutline(house.uid, function(houseOutline){
var geo = houseOutline.content.geo;
if(!geo){
var location = house.location;
var point = new BMap.Point(location.lng, location.lat);
map.centerAndZoom(point, 19);
var marker = new BMap.Marker(point);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
map.addOverlay(marker);
}else{
map.clearOverlays();
var geoObj = parseGeo(geo);
//var bounds = coordinateToPoints(geoObj.bound);
//边界点
var points = coordinateToPoints(map, geoObj.points);
var ply = new BMap.Polygon(points, {
strokeWeight: 2,
strokeColor: "#F01B2D",
strokeOpacity: 0.9,
fillColor : "#FFEBCC"
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
});
}
}
});
};
showArea($('#cityId').val(), $('#areaId').val());
$('#showBtn').click(function(){
debugger;
showArea($('#cityId').val(), $('#areaId').val());
});
});
</script>
</head>
<body>
<table>
<tr>
<td>城市:</td>
<td><input id="cityId" type="text" value="深圳" /></td>
<td>小区:</td>
<td><input id="areaId" type="text" value="南方科技大学" /></td>
<td>
<button id="showBtn">显示</button>
</td>
</tr>
</table>
<div id="allmap" style="width: 600px; height: 480px;"></div>
<script type="text/javascript">
</script>
</body>
</html>
=============================================================================
WGS84、Web墨卡托、火星坐标、百度坐标互转
转自:
1、http://blog.csdn.net/wildboy2001/article/details/12031351
2、http://kongxz.com/2013/10/wgs-cgj/
3、http://www.oschina.net/code/snippet_260395_39205
经过笔者测试,与Google map dowloader软件系列的转换器相比,在14级别的某地图上测试有0.04个像素误差,基本可以无视。
其他级别和经纬区域有待测试。
原帖地址:http://www.gisall.com/html/68/104468-4865.html
将度换算成度分秒=INT(B2)&"/"&INT(MOD(B2*60,60))&"/"&INT(MOD(B2*3600,60))&""
===================================================================
- GCJ-02坐标系统(火星坐标)简介:http://blog.csdn.net/giswens/article/details/8775121(存档:http://mapbd.com/cms/2012/07/25/)
- GCJ-02到真实坐标反向变换的理论基础:http://blog.csdn.net/giswens/article/details/8775213
- WGS84坐标与Web墨卡托坐标互转:http://blog.csdn.net/giswens/article/details/9634261
- 关于流传的 WGS-84 至 GCJ-02 转换算法:http://kongxz.com/2013/10/wgs-cgj/
- 地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02) 的转换算法:
- C#代码:https://on4wp7.codeplex.com/SourceControl/changeset/view/21483#353936(注解:http://blog.csdn.net/giswens/article/details/8775283)
- Java代码:http://emq.googlecode.com/svn/emq/src/Algorithm/Coords/Converter.java
- iOS代码:http://blog.csdn.net/giswens/article/details/8775183(存档:http://www.keakon.net/2011/07/02/WGS84坐标转火星坐标(iOS篇))
- 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法:http://blog.csdn.net/coolypf/article/details/8569813(解释:国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。)
- 一种根据纠偏数据对火星坐标进行完美拟合的方法:http://blog.sina.com.cn/s/blog_538036cf0100pxbl.html
- 国内各地图API坐标系统比较:http://rovertang.com/archives/547
- 关于百度地图坐标转换接口的研究:http://rovertang.com/archives/24699
- ======================================================================
在WebGIS的开发中经常用到的地图投影为Web墨卡托和WGS84,故歌地图,bingmaps,百度地图,mapabc,mapbar,以及ArcGIS online上的大部分地图为Web墨卡托地图,ArcGIS online上最开始发布的地图投影为WGS84。
在开发过程中很多时候会遇到不同坐标系之间互转的问题,特别是底图使用Web墨卡托,定位(GPS,wifi等)信号坐标为WGS84坐标的时候,那么通用解决方案就是写一个坐标参考系的转换库,类似于proj4,但一般情况下很少用到那么多的参考系之间的互转,并且在客户端实现或者调用proj4都是一件很困难或者麻烦的事情,大多数情况下我们实现Web墨卡托坐标与WGS84坐标互转就可以了。
[cpp] view plain copy
- //经纬度转Wev墨卡托
- dvec3 CMathEngine::lonLat2WebMercator(dvec3 lonLat)
- {
- dvec3 mercator;
- double x = lonLat.x *20037508.34/180;
- double y = log(tan((90+lonLat.y)*PI/360))/(PI/180);
- y = y *20037508.34/180;
- mercator.x = x;
- mercator.y = y;
- return mercator ;
- }
- //Web墨卡托转经纬度
- dvec3 CMathEngine::WebMercator2lonLat( dvec3 mercator )
- {
- dvec3 lonLat;
- double x = mercator.x/20037508.34*180;
- double y = mercator.y/20037508.34*180;
- y= 180/PI*(2*atan(exp(y*PI/180))-PI/2);
- lonLat.x = x;
- lonLat.y = y;
- return lonLat;
- }
在线JavaScript环境
一些网站中提供了在线的JavaScript编程环境,可用于直接在线联系JavaScript.著名的在线编辑环境包括:
进一步,如果你要在线练习TypeScript:
- 菜鸟工具
- 官方PlayGround
- ==============================================================================
- 福州高新区海西园
-
function parseGeo(mocator){
if(typeof mocator != 'string'){
return {};
}
var t = mocator.split("|");
var n = parseInt(t[0]);
var i = t[1];
var r = t[2];
var o = r.split(";");
if(n === 4){
for (var a = [], s = 0; s < o.length - 1; s++){
"1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
}
o = a;
o.push("");
}
var u = [];
switch(n){
case 1:
u.push(o[0]);
break;
case 2:
case 3:
case 4:
for (var s = 0; s < o.length - 1; s++) {
var l = o[s];
if (l.length > 100){
l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
"$1,$2;");
u.push(l);
} else {
for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
var p = d[f];
var h = d[f + 1];
c.push(p + "," + h);
}
u.push(c.join(";"))
}
}
break;
default:
break;
}
if(u.length <= 1){
u = u.toString();
}
var result = {
type : n,
bound : i,
points : u
};
return result;
}
function mocator2WGS84(coordinate) {
var points = [];
if (coordinate) {
var arr = coordinate.split(";");
if(arr){
for(var i = 0; i < arr.length; i++){
var coord = arr[i].split(",");
if(coord && coord.length == 2){
var x = coord[0]/20037508.34*180;
var y = coord[1]/20037508.34*180;
y= 180/Math.PI*(2*Math.atan(Math.exp(y*Math.PI/180))-Math.PI/2);points.push(new Array(x,y));
}
}
}
}
return points;
}var a = parseGeo("4|13271102.86,2985165.68;13271655.86,2985840.67|1-13271401.86,2985177.68,13271454.86,2985165.68,13271642.86,2985215.68,13271655.86,2985236.68,13271576.86,2985392.68,13271555.86,2985417.68,13271459.86,2985656.68,13271412.86,2985822.67,13271388.86,2985840.67,13271112.86,2985770.68,13271102.86,2985724.68,13271401.86,2985177.68;");
console.log(a);
gps_coor = mocator2WGS84(a.points);
console.log(gps_coor)