簡單插件編寫leaflet-pip-v2

github源碼在此，記得點星:
https://github.com/brandonxiang/leaflet-pip-v2

在學(xué)習(xí)了leaflet之后，你可能會注意到它的插件，生態(tài)豐富，實用有效。當(dāng)然，你也可以寫一些滿足自己需求的插件。相對而言，這有點難度。

而leaflet的插件而言，我將其分為兩大類：

• 自成一類的數(shù)據(jù)處理型
• L.extend的繼承擴(kuò)展型 3進(jìn)階插件編寫geojsonFilter

這篇筆記主要寫的是前者。受leaflet-pip插件啟發(fā)，點與線之間的數(shù)據(jù)選擇進(jìn)行擴(kuò)展。你可以先參考mapbox/leaflet-pip，再看我的這段代碼brandonxiang/leaflet-pip-v2，再做調(diào)整。如果還是很難理解，那就看demo。

Demo

他們的 demo

他們的 demo

我的demo

我的demo

不難看出，leaflet-pip的本意是通過點選擇面，與點產(chǎn)生包含關(guān)系的多邊形被選擇，我將其設(shè)置為紅色。

而leaflet-pip-v2的想法是通過面去選擇點，與面積相交的點被選擇，我將其設(shè)置成半透明。

原理

本插件的目標(biāo)是去完成一個找出點與面包含關(guān)系的查詢，即Point in Polygon(pip)。當(dāng)然，方法很多，你可以使用空間查詢，那可以是后端技術(shù)利用空間數(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語言代碼如下，可以被改寫為其它語言。

原理

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是通過點要素的相交關(guān)系從多面狀GeoJSON中選擇一個面狀，但是我的想法是通過面要素的相交關(guān)系從點的GeoJSON中選擇多個點。這兩個處理過程都基于同樣的原理--空間查詢。

使用方法

var selectedpoints = leafletPip.pointsInPolygon(
L.geoJson(point.geojson),L.geoJson(singlepolygon.geojson)
);

我的demo

源碼剖析

引用了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;

}

轉(zhuǎn)載，請表明出處。總目錄Awesome GIS