簡(jiǎn)單插件編寫(xiě)leaflet-pip-v2
github源碼在此，記得點(diǎn)星:
https://github.com/brandonxiang/leaflet-pip-v2
在學(xué)習(xí)了leaflet之后，你可能會(huì)注意到它的插件，生態(tài)豐富，實(shí)用有效。當(dāng)然，你也可以寫(xiě)一些滿(mǎn)足自己需求的插件。相對(duì)而言，這有點(diǎn)難度。
而leaflet的插件而言，我將其分為兩大類(lèi)：
- 自成一類(lèi)的數(shù)據(jù)處理型
- L.extend的繼承擴(kuò)展型 3進(jìn)階插件編寫(xiě)geojsonFilter
這篇筆記主要寫(xiě)的是前者。受leaflet-pip插件啟發(fā)，點(diǎn)與線之間的數(shù)據(jù)選擇進(jìn)行擴(kuò)展。你可以先參考mapbox/leaflet-pip，再看我的這段代碼brandonxiang/leaflet-pip-v2，再做調(diào)整。如果還是很難理解，那就看demo。
Demo
不難看出，leaflet-pip的本意是通過(guò)點(diǎn)選擇面，與點(diǎn)產(chǎn)生包含關(guān)系的多邊形被選擇，我將其設(shè)置為紅色。
而leaflet-pip-v2的想法是通過(guò)面去選擇點(diǎn)，與面積相交的點(diǎn)被選擇，我將其設(shè)置成半透明。
原理
本插件的目標(biāo)是去完成一個(gè)找出點(diǎn)與面包含關(guān)系的查詢(xún)，即Point in Polygon(pip)。當(dāng)然，方法很多，你可以使用空間查詢(xún)，那可以是后端技術(shù)利用空間數(shù)據(jù)庫(kù)。方法可以參考substack/point-in-polygon以及maxogden/geojson-js-utils，而mapbox/leaflet-pip則是利用過(guò)這兩個(gè)庫(kù)。
原理都是[PNPOLY](https://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html#The Method)。原理大概是將多邊形分成多個(gè)三角形，判斷點(diǎn)是否在三角形內(nèi)。而凸三角形或凹三角形可能影響判斷點(diǎn)是否在多邊形。C語(yǔ)言代碼如下，可以被改寫(xiě)為其它語(yǔ)言。
| 參數(shù) | 意義 |
|---|---|
| nvert | 多邊形頂點(diǎn)數(shù) |
| vertx，verty | 頂點(diǎn)的x和y數(shù)組 |
| testx，testy | 測(cè)試點(diǎn)的x和y |
int pnpoly(int nvert, float *vertx, float *verty, float testx, float testy)
{
int i, j, c = 0;
for (i = 0, j = nvert-1; i < nvert; j = i++) {
if ( ((verty[i]>testy) != (verty[j]>testy)) &&
(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
c = !c;
}
return c;
}
利用leaflet選點(diǎn)在某個(gè)多邊形內(nèi)
leaflet-pip是通過(guò)點(diǎn)要素的相交關(guān)系從多面狀GeoJSON中選擇一個(gè)面狀，但是我的想法是通過(guò)面要素的相交關(guān)系從點(diǎn)的GeoJSON中選擇多個(gè)點(diǎn)。這兩個(gè)處理過(guò)程都基于同樣的原理--空間查詢(xún)。
使用方法
var selectedpoints = leafletPip.pointsInPolygon(
L.geoJson(point.geojson),L.geoJson(singlepolygon.geojson)
);
源碼剖析
引用了geojson-utils內(nèi)的其中一個(gè)方法，用于判斷點(diǎn)是否在面之類(lèi)，所以原理十分簡(jiǎn)單。即是將點(diǎn)圖層循環(huán)，查找它是否在多邊形內(nèi)部。如果是，將其返回即可。在這里極度推薦各位GISER看看maxogden/geojson-js-utils的源碼。
pointsInPolygon: function(points, layer) {
'use strict';
var results = [];
points.eachLayer(function(p) {
if (gju.pointInPolygon(p.toGeoJSON().geometry, layer.toGeoJSON().geometry)) {
results.push(p);
}
});
return results;
}
轉(zhuǎn)載，請(qǐng)表明出處。總目錄Awesome GIS
