前言.因為項目有點特殊，需要接入谷歌地圖實現(xiàn)地理圍欄，因為谷歌地圖的地理圍欄接口相關(guān)接口并不完善，于是就換了一個思路，利用OpenLayers來實現(xiàn)地理圍欄 openlayers 中文地址 http://weilin.me/ol3-primer/ch02/index.html
`X9(1OM@MU089}IGC$C4$FA.png
這是效果實現(xiàn)圖，以下是思路
1.第一步肯定是用戶在地圖上隨意畫一個圈，然后我們能獲取這個圈在地圖上的坐標(biāo)，否則這一切并沒有意義。
參考文章 http://weilin.me/ol3-primer/ch09/09-07.html
不過我這里對文章的代碼略作改動
var lineDraw = new ol.interaction.Draw({
type: 'Polygon',
source: lineLayer.getSource(), // 注意設(shè)置source，這樣繪制好的線，就會添加到這個source里
freehand: true,
});
注意這里的 type: 'Polygon', 和文章不一樣 其他的設(shè)置樣式什么的自行參考；
改動完畢，運行一下 在 獲取位置，得到效果圖如下
image.png
好了， 到這能正確正常的獲取用戶在地圖上隨意畫的圓圈的坐標(biāo)了
2.我們要如何在地圖上顯示用戶隨意畫的地理圍欄
第一步，加載地圖和geojson文件。geojson文件是地圖格式文件，用戶加載用戶之前畫的地理圍欄。
在 http://geojson.io/#map 網(wǎng)站生成一個 geojson文件即可，隨后把我們在第一步獲取到的位置進(jìn)行替換
"geometry": {
"type": "Polygon",
"coordinates":
[[[ ]]] //你之前獲取的坐標(biāo)數(shù)據(jù)
}
image.png
沒什么特殊需求不要改geojson文件里面的其他內(nèi)容， 只修改coordinates里面的數(shù)據(jù)就好
image.png
起一個ajax獲取數(shù)據(jù) 然后加載到地圖上
image.png
image.png
到這個步驟 基本上已經(jīng)能正常的獲取用戶在地圖上畫的地理圍欄了
接下來 加載谷歌地圖
image.png
var googleMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
})
});
加載谷歌地圖 ，也可以加載其他地圖，我是因為項目需要才加載谷歌地圖
map.once('postrender', function(event) {
var t = this;
console.log(layer2.getSource().getFeatures()[0].getGeometry().intersectsCoordinate([11578910.355723355, 3502000.669399493]));
});
監(jiān)聽地圖加載完成，然后隨意檢測一個點是否在地理圍欄里面
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
var coordinate = evt.coordinate;
var userDogColler = userindex.getClosestPoint(coordinate);
var t = ol.proj.transform(userDogColler, 'EPSG:3857', 'EPSG:4326');
console.log('點擊的地方距離圍欄多少+',jwdjs(hdms[0],hdms[1],t[0],t[1]),'+M')
//console.log(userindex.getClosestPoint(coordinate))
console.log(userindex.intersectsCoordinate(coordinate))
});
給地圖添加點擊事件，然后獲取點擊的坐標(biāo)，判斷到地理圍欄的距離 ，這里我采用的算法是經(jīng)緯度算法 jwdjs（）
function jwdjs(lat1, lng1, lat2, lng2) {
var EARTH_RADIUS = 6378137.0; //單位M 地球的周長
var PI = Math.PI;
function getRad(d) {
return d * PI / 180.0;
}
function getGreatCircleDistance(lat1, lng1, lat2, lng2) {
var radLat1 = getRad(lat1);
var radLat2 = getRad(lat2);
var a = radLat1 - radLat2;
var b = getRad(lng1) - getRad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000.0;
return s;
}
return getGreatCircleDistance(lat1, lng1, lat2, lng2)
}
到這基本上就能實現(xiàn)效果圖所示的效果了 ，其他無效代碼都刪了
