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