地圖小區景點邊界輪廓實現
常常的咱們在使用地圖功能時，會發如今選擇一個小區或者一個熱門景點的時候，地圖上面會給出其邊界輪廓，可以方便咱們知道其範圍大小，有時候在咱們使用地圖組件的時候，也會面臨着相似的需求。好比在地圖上面標識出一個商場範圍內的熱力圖，一個熱門景點的遊覽狀況等。那麼，咱們該如何利用地圖功能來實現這類效果呢，今天咱們一塊兒來探討一下。javascript
最近咱們就有一個需求，須要標識出一些熱門場所的人流的熱力圖狀況，同時須要給出該熱門場所的邊界輪廓。通過查看百度地圖和高德地圖的開發者API文檔，發現並無這類公共接口提供咱們使用。目前地圖可以提供咱們使用的，基本只能是一些行政區劃的邊界範圍，這個在我以前的文章中也有寫過，你們能夠參照《仿鏈家地圖找房的簡單實現》。php
那麼如今面臨的需求該如何實現呢？css
經過查看地圖功能的接口調用狀況和在網上查詢相關資料，最終咱們找到了下面這個「不算是方法的方法」。html
- 使用了地圖的相關API接口獲取相關數據
- API接口不是官方給出的，因此也就面臨着穩定性的問題，可能隨時被關（高德的只能簡單參考，自己就存在較大缺陷，後面會說）
實現思路
-
經過地圖的POI查詢服務獲取到興趣點idjava
那麼什麼是POI呢？python
檢索服務提供某一特定地區的興趣點位置查詢服務（POI：Point of Interest，感興趣點）jquery
相關的官方文檔請參照如下地址：web
-
經過興趣點id獲取該興趣點的詳細信息ajax
這裏面須要用到的相關API就須要咱們查看地圖的執行過程，找到對應的API了。（也但願各個地圖官方可以給出官方的方法吧）json
PS:地圖功能的使用狀況在本篇不作說明，具體申請相關Key的過程請分別參照官網說明便可。
下面咱們來分別給出百度地圖和高德地圖的實現方法：
百度地圖實現
閒話休談，我們直接上碼
</html>
<!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=你申請的AK"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
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;
};
var map = new BMap.Map("allmap"); // 建立Map實例
map.centerAndZoom("北京", 19);
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.enableScrollWheelZoom(false); //開啓鼠標滾輪縮放
/**
* 第一個參數是城市名，第二參數是小區名
*/
var showArea = function(city, area) {
queryHouse(area, city, "你申請的AK", 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 points = coordinateToPoints(map, geoObj.points);
var ply = new BMap.Polygon(points, {
strokeWeight: 2,
strokeColor: "#F01B2D",
strokeOpacity: 0.9,
fillColor: "transparent"
}); //創建多邊形覆蓋物
map.addOverlay(ply); //添加覆蓋物
map.setViewport(ply.getPath()); //調整視野
}
});
}
}
});
};
showArea($('#cityId').val(), $('#areaId').val());
$('#showBtn').click(function() {
debugger;
showArea($('#cityId').val(), $('#areaId').val());
});
$("#areaId").keydown(function(e) {
if (event.keyCode == "13") {
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: 90vw; height: 90vh;"></div>
</body>
</html>
複製代碼
相關的代碼註釋都有所添加，參照便可。其中須要注意的是百度地圖獲取到的座標點須要進行轉換成百度地圖識別的點位形式。 另外，邊界的描畫使用到的是地圖的Polygon功能，相關內容請參照
高德地圖實現
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德地圖DEMO</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=你申請的AK"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = new AMap.Map('allmap', {
zoom: 19,
center: [116.397428, 39.90923]
}); // 建立Map實例
/**
* 第一個參數是城市名，第二參數是小區名
*/
var showArea = function(city, area) {
queryHouse(area, city, "你申請的AK", function(data) {
console.error(data)
if (data.status == 1) {
var houses = data.pois;
if (houses && houses.length > 0) {
var house = houses[0];
queryHouseOutline(house.id, function(houseOutline) {
console.error("get outline success");
var pathPoints = houseOutline.data.spec.mining_shape.shape;
var tmpPath = pathPoints.split(";");
var points = [];
tmpPath.forEach(function(value, index, array) {
points.push(value.split(","))
});
map.clearMap();
var ply = new AMap.Polygon({
map: map,
path: points,
strokeColor: "#F01B2D",
fillColor: "transparent"
}); //創建多邊形覆蓋物
map.setFitView(); //調整最佳顯示
});
}
}
});
};
var queryHouseOutline = function(hid, callback) {
var baseURL = 'https://www.amap.com/detail/get/detail';
$.ajax({
type: "get",
data: {
id: hid
},
url: baseURL,
dataType: "json",
success: function(datas) {
callback(datas)
}
});
};
/**
* 模糊查詢小區信息, 無返回值
* @param {} house 小區名稱
* @param {} city 所屬城市名稱
* @param {} ak 高德地圖AK
* @param {} callback 回調函數，該函數能夠接收到請求的返回值
*/
var queryHouse = function(house, city, ak, callback) {
var baseURL = 'http://restapi.amap.com/v3/place/text?&keywords=' + house + '&city=' + city + '&output=json&offset=20&page=1&key=' + ak;
callback && (window.queryHouseCallback = callback);
$.ajax({
type: "get",
async: false,
url: baseURL,
dataType: "jsonp",
jsonpCallback: "queryHouseCallback",
success: function(datas) {}
});
};
showArea($('#cityId').val(), $('#areaId').val());
$('#showBtn').click(function() {
showArea($('#cityId').val(), $('#areaId').val());
});
$("#areaId").keydown(function(e) {
if (event.keyCode == "13") {
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: 90vw; height: 90vh;"></div>
</body>
</html>
複製代碼
高德地圖的實現方式根據實際的效果來看，自己應該是作了API接口限制的處理，常常會出現獲取不到詳細信息或者給出的詳細信息中的邊界信息數據不許確。 這裏只是做爲一個對比參照，高德地圖不推薦來作這個需求，API接口穩定性太差。
後記
①百度地圖會涉及到功能接口配額的問題
主要會涉及到上面的地點檢索配額，若是隻是我的簡單使用的，能夠註冊我的開發者，基本配額就夠使用了
②高德地圖沒有找到配額相關的數據，畢竟走的非正規手段吧
③百度地圖和高德地圖對於一些位置的邊界數據不一樣
有些地點只會在其中一個可以獲取到（高德地圖可以返回數據的狀況下）
④高德地圖在檢索位置時，可以支持全拼音輸入，也能檢索出來（感受這個厲害，可是中文多音字處理不知道會怎麼樣）
參考資料：
相關文章
- 1. 百度&高德地圖小區景點邊界輪廓實現
- 2. 百度&高德地圖小區景點邊界輪廓實現
- 3. Opencv輪廓邊界角點 檢測
- 4. opencv的實用研究--分析輪廓並尋找邊界點
- 5. Unity實現邊緣輪廓高亮
- 6. opencv（Python/c++）:輪廓檢測（邊界框、矩形區域，圓區域，凸輪廓，多邊形算法approxPloyDP）
- 7. 輪廓 凸輪廓 近似多邊形輪廓
- 8. 邊緣與輪廓
- 9. OpenCV實現彩色圖像輪廓 換背景顏色
- 10. CSS 邊框 輪廓 陰影
- 更多相關文章...
- • R 繪圖 - 散點圖 - R 語言教程
- • 現實生活中的 XML - XML 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
