openlayers版本: v6.3.1-dist
頁面效果:
使用瀏覽器:谷歌80.0.3987.162（正式版本） （64 位）
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>openlayers-獲取某個點是否在某個區域內</title> <link href="v6.3.1-dist/ol.css" rel="stylesheet" type="text/css" /> <style> #mapDiv{ height: 550px; margin: 1%; } </style> </head> <body> <!--地圖容器--> <div id="mapDiv"></div> </body> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="v6.3.1-dist/ol.js" type="text/javascript"></script> <script src="layer/layer.js" type="text/javascript"></script> <script type="text/javascript"> var map ; var vector; $(document).ready(function (){ // 初始化地圖 map = initMap(); // 圖形數據(下面的數據是我在其他案例中自己畫出來的圖形的坐標數據) var graphData = { "Square":[// 正方形 [ [103.96816482730104,30.63857879086304], [103.96816482730104,30.98464812680054], [103.62209549136354,30.98464812680054], [103.62209549136354,30.63857879086304] ] ], "Box":[// 長方形 [ [103.90774002261354,30.873411554534915], [103.90774002261354,30.78140105648804], [104.18102493472291,30.78140105648804], [104.18102493472291,30.873411554534915] ] ], "Star":[// 五星 [ [103.88988723941041,30.76080169125366], [103.94469256741162,30.722686260765908], [103.92491936991718,30.65892553084982], [103.98533096499635,30.687330621917724], [104.0306627781203,30.638326165615446], [104.03626904519827,30.704846687171102], [104.10137405581666,30.71960296078491], [104.04656872781545,30.757718391272665], [104.0663419253099,30.82147912118875], [104.00593033023073,30.79307403012085], [103.96059851710677,30.842078486423127], [103.95499225002881,30.77555796486747] ] ], "Polygon":[ [ [103.78558149523926,30.801249403198245], [103.80343427844238,30.55817689343262], [103.8981913585205,30.81360902233887], [103.925657178833,30.62684144421387], [103.96136274523926,30.88776673718262], [103.82266035266113,30.938578504760745], [103.76223554797363,30.94544495983887], [103.68258466906738,30.88502015515137] ] ] }; // 加載圖形數據到地圖 loadData(map, graphData); // 把上面圖形數據轉換一下格式 var squarePoints = []; $(graphData["Square"][0]).each(function(i , data){ squarePoints.push({lng: data[0], lat: data[1]}); }); var boxPoints = []; $(graphData["Box"][0]).each(function(i , data){ boxPoints.push({lng: data[0], lat: data[1]}); }); var starPoints = []; $(graphData["Star"][0]).each(function(i , data){ starPoints.push({lng: data[0], lat: data[1]}); }); var polygonPoints = []; $(graphData["Polygon"][0]).each(function(i , data){ polygonPoints.push({lng: data[0], lat: data[1]}); }); // 鼠標點擊事件 map.on("singleclick", function (e){ // 當前鼠標點擊位置的經緯度 var lngLat = e.coordinate; var html = ""; // 判斷是否在正方形、長方形、五星內 var squareFlag = IsPtInPoly(lngLat[0], lngLat[1], squarePoints); if(squareFlag){ html += "在正方形內<br/>"; } var starFlag = IsPtInPoly(lngLat[0], lngLat[1], starPoints); if(starFlag){ html += "在五星內<br/>"; } var boxFlag = IsPtInPoly(lngLat[0], lngLat[1], boxPoints); if(boxFlag){ html += "在長方形內<br/>"; } var boxFlag = IsPtInPoly(lngLat[0], lngLat[1], polygonPoints); if(boxFlag){ html += "在多邊形內<br/>"; } layer.alert(html); }); }); /* 初始化地圖 */ function initMap (centerLngLat){ var TiandiMap_vec = new ol.layer.Tile({ title: "天地圖矢量圖層", source: new ol.source.XYZ({ url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e83d04f3e04272b8d9e91615e309fe36", wrapX: false }) }); var TiandiMap_cva = new ol.layer.Tile({ title: "天地圖矢量注記圖層", source: new ol.source.XYZ({ url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e83d04f3e04272b8d9e91615e309fe36", wrapX: false }) }) //實例化Map對象加載地圖 var map = new ol.Map({ //地圖容器div的ID target: 'mapDiv', //地圖容器中加載的圖層 layers: [TiandiMap_vec, TiandiMap_cva], //地圖視圖設置 view: new ol.View({ //地圖初始中心點 center: [104.066677,30.657483], //地圖初始顯示級別 zoom: 10, projection: "EPSG:4326" }) }); return map; } /* 加載數據 */ function loadData(map, graphData){ var features = []; for(var key in graphData){ switch (key) { case 'Square':// 正方形 case 'Box':// 長方形 case 'Star':// 五星 case 'Polygon':// 多邊形 $(graphData[key]).each(function(i, value){ var feature = new ol.Feature({ geometry: new ol.geom.Polygon([value]) }); setStyle(feature, []); features.push(feature); }); break; } } //創建一個圖層 vector = new ol.layer.Vector({ source: new ol.source.Vector({ features: features }) }); //將繪制層添加到地圖容器中 map.addLayer(vector); } /* 設置樣式 */ function setStyle(feature, styles){ styles.push(new ol.style.Style({ // 填充顏色 fill: new ol.style.Fill({color: 'gray'}) // 邊框顏色 stroke: new ol.style.Stroke({ color: 'red',// 邊框顏色 width: 2 }), // 點形狀 image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'red' }) }) })); feature.setStyle(styles); } /* 某個點是否在某個區域內(來處:https://blog.csdn.net/neil89/article/details/50240481) */ function IsPtInPoly(ALon, ALat, APoints) { var iSum = 0, iCount; var dLon1, dLon2, dLat1, dLat2, dLon; if (APoints.length < 3) return false; iCount = APoints.length; for (var i = 0; i < iCount; i++) { if (i == iCount - 1) { dLon1 = APoints[i].lng; dLat1 = APoints[i].lat; dLon2 = APoints[0].lng; dLat2 = APoints[0].lat; } else { dLon1 = APoints[i].lng; dLat1 = APoints[i].lat; dLon2 = APoints[i + 1].lng; dLat2 = APoints[i + 1].lat; } //以下語句判斷A點是否在邊的兩端點的水平平行線之間，在則可能有交點，開始判斷交點是否在左射線上 if (((ALat >= dLat1) && (ALat < dLat2)) || ((ALat >= dLat2) && (ALat < dLat1))) { if (Math.abs(dLat1 - dLat2) > 0) { //得到 A點向左射線與邊的交點的x坐標： dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - ALat)) / (dLat1 - dLat2); if (dLon < ALon) iSum++; } } } if (iSum % 2 != 0) return true; return false; } </script> </html>