簡單插件編寫leaflet-pip-v2
github源碼在此适贸，記得點星:
https://github.com/brandonxiang/leaflet-pip-v2
在學習了leaflet之后擦秽，你可能會注意到它的插件，生態(tài)豐富晦款，實用有效。當然，你也可以寫一些滿足自己需求的插件州疾。相對而言督暂，這有點難度揪垄。
而leaflet的插件而言，我將其分為兩大類：
- 自成一類的數(shù)據(jù)處理型
- L.extend的繼承擴展型 3進階插件編寫geojsonFilter
這篇筆記主要寫的是前者逻翁。受leaflet-pip插件啟發(fā)饥努，點與線之間的數(shù)據(jù)選擇進行擴展。你可以先參考mapbox/leaflet-pip八回，再看我的這段代碼brandonxiang/leaflet-pip-v2肪凛，再做調(diào)整。如果還是很難理解辽社，那就看demo伟墙。
Demo
不難看出，leaflet-pip的本意是通過點選擇面滴铅，與點產(chǎn)生包含關系的多邊形被選擇戳葵，我將其設置為紅色。
而leaflet-pip-v2的想法是通過面去選擇點汉匙，與面積相交的點被選擇拱烁，我將其設置成半透明。
原理
本插件的目標是去完成一個找出點與面包含關系的查詢噩翠，即Point in Polygon(pip)戏自。當然，方法很多伤锚，你可以使用空間查詢擅笔，那可以是后端技術利用空間數(shù)據(jù)庫。方法可以參考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)。原理大概是將多邊形分成多個三角形狞洋，判斷點是否在三角形內(nèi)弯淘。而凸三角形或凹三角形可能影響判斷點是否在多邊形。C語言代碼如下吉懊，可以被改寫為其它語言庐橙。
| 參數(shù) | 意義 |
|---|---|
| nvert | 多邊形頂點數(shù) |
| vertx假勿，verty | 頂點的x和y數(shù)組 |
| 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選點在某個多邊形內(nèi)
leaflet-pip是通過點要素的相交關系從多面狀GeoJSON中選擇一個面狀态鳖，但是我的想法是通過面要素的相交關系從點的GeoJSON中選擇多個點转培。這兩個處理過程都基于同樣的原理--空間查詢。
使用方法
var selectedpoints = leafletPip.pointsInPolygon(
L.geoJson(point.geojson),L.geoJson(singlepolygon.geojson)
);
源碼剖析
引用了geojson-utils內(nèi)的其中一個方法郁惜，用于判斷點是否在面之類堡距，所以原理十分簡單。即是將點圖層循環(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;
}
轉載，請表明出處包蓝。總目錄Awesome GIS
