前言
leaflet 入門開發系列環境知識點了解：
- leaflet api檔案介紹，詳細介紹 leaflet 每個類的函式以及屬性等等
- leaflet 在線例子
- leaflet 插件，leaflet 的插件庫，非常有用
內容概覽
leaflet拓展wms以及wmts地圖范圍裁剪功能
源代碼demo下載
效果圖如下：
具體實作參考leaflet裁剪插件：https://github.com/aparshin/leaflet-boundary-canvas
- 自定義wms以及wmts類的部分核心代碼，裁剪部分參照leaflet-boundary-canvas插件核心裁剪部分原始碼，完整的見原始碼demo下載
var isRingBbox = function (ring, bbox) { if (ring.length !== 4) { return false; } var p, sumX = 0, sumY = 0; for (p = 0; p < 4; p++) { if ((ring[p].x !== bbox.min.x && ring[p].x !== bbox.max.x) || (ring[p].y !== bbox.min.y && ring[p].y !== bbox.max.y)) { return false; } sumX += ring[p].x; sumY += ring[p].y; //bins[Number(ring[p].x === bbox.min.x) + 2 * Number(ring[p].y === bbox.min.y)] = 1; } //check that we have all 4 vertex of bbox in our geometry return sumX === 2*(bbox.min.x + bbox.max.x) && sumY === 2*(bbox.min.y + bbox.max.y); }; var ExtendMethods = { _toMercGeometry: function(b, isGeoJSON) { var res = []; var c, r, p, mercComponent, mercRing, coords; if (!isGeoJSON) { if (!(b[0] instanceof Array)) { b = [[b]]; } else if (!(b[0][0] instanceof Array)) { b = [b]; } } for (c = 0; c < b.length; c++) { mercComponent = []; for (r = 0; r < b[c].length; r++) { mercRing = []; for (p = 0; p < b[c][r].length; p++) { coords = isGeoJSON ? L.latLng(b[c][r][p][1], b[c][r][p][0]) : b[c][r][p]; mercRing.push(this._map.project(coords, 0)); } mercComponent.push(mercRing); } res.push(mercComponent); } return res; }, //lazy calculation of layer's boundary in map's projection. Bounding box is also calculated _getOriginalMercBoundary: function () { if (this._mercBoundary) { return this._mercBoundary; } var compomentBbox, c; if (L.Util.isArray(this.options.boundary)) { //Depricated: just array of coordinates this._mercBoundary = this._toMercGeometry(this.options.boundary); } else { //GeoJSON this._mercBoundary = []; var processGeoJSONObject = function(obj) { if (obj.type === 'GeometryCollection') { obj.geometries.forEach(processGeoJSONObject); } else if (obj.type === 'Feature') { processGeoJSONObject(obj.geometry); } else if (obj.type === 'FeatureCollection') { obj.features.forEach(processGeoJSONObject); } else if (obj.type === 'Polygon') { this._mercBoundary = this._mercBoundary.concat(this._toMercGeometry([obj.coordinates], true)); } else if (obj.type === 'MultiPolygon') { this._mercBoundary = this._mercBoundary.concat(this._toMercGeometry(obj.coordinates, true)); } }.bind(this); processGeoJSONObject(this.options.boundary); } this._mercBbox = new L.Bounds(); for (c = 0; c < this._mercBoundary.length; c++) { compomentBbox = new L.Bounds(this._mercBoundary[c][0]); this._mercBbox.extend(compomentBbox.min); this._mercBbox.extend(compomentBbox.max); } return this._mercBoundary; }, _getClippedGeometry: function(geom, bounds) { var clippedGeom = [], clippedComponent, clippedExternalRing, clippedHoleRing, iC, iR; for (iC = 0; iC < geom.length; iC++) { clippedComponent = []; clippedExternalRing = L.PolyUtil.clipPolygon(geom[iC][0], bounds); if (clippedExternalRing.length === 0) { continue; } clippedComponent.push(clippedExternalRing); for (iR = 1; iR < geom[iC].length; iR++) { clippedHoleRing = L.PolyUtil.clipPolygon(geom[iC][iR], bounds); if (clippedHoleRing.length > 0) { clippedComponent.push(clippedHoleRing); } } clippedGeom.push(clippedComponent); } if (clippedGeom.length === 0) { //we are outside of all multipolygon components return {isOut: true}; } for (iC = 0; iC < clippedGeom.length; iC++) { if (isRingBbox(clippedGeom[iC][0], bounds)) { //inside exterior rings and no holes if (clippedGeom[iC].length === 1) { return {isIn: true}; } } else { //intersects exterior ring return {geometry: clippedGeom}; } for (iR = 1; iR < clippedGeom[iC].length; iR++) { //inside exterior ring, but have intersection with a hole if (!isRingBbox(clippedGeom[iC][iR], bounds)) { return {geometry: clippedGeom}; } } } //we are inside all holes in geometry return {isOut: true}; }, // Calculates intersection of original boundary geometry and tile boundary. // Uses quadtree as cache to speed-up intersection. // Return // {isOut: true} if no intersection, // {isIn: true} if tile is fully inside layer's boundary // {geometry: <LatLng[][][]>} otherwise _getTileGeometry: function (x, y, z, skipIntersectionCheck) { if ( !this.options.boundary) { return {isIn: true}; } var cacheID = x + ":" + y + ":" + z, zCoeff = Math.pow(2, z), parentState, cache = this._boundaryCache; if (cache[cacheID]) { return cache[cacheID]; } var mercBoundary = this._getOriginalMercBoundary(), ts = this.options.tileSize, tileBbox = new L.Bounds(new L.Point(x * ts / zCoeff, y * ts / zCoeff), new L.Point((x + 1) * ts / zCoeff, (y + 1) * ts / zCoeff)); //fast check intersection if (!skipIntersectionCheck && !tileBbox.intersects(this._mercBbox)) { return {isOut: true}; } if (z === 0) { cache[cacheID] = {geometry: mercBoundary}; return cache[cacheID]; } parentState = this._getTileGeometry(Math.floor(x / 2), Math.floor(y / 2), z - 1, true); if (parentState.isOut || parentState.isIn) { return parentState; } cache[cacheID] = this._getClippedGeometry(parentState.geometry, tileBbox); return cache[cacheID]; }, _drawTileInternal: function (canvas, tilePoint, url, callback) { var zoom = this._getZoomForUrl(), state = this._getTileGeometry(tilePoint.x, tilePoint.y, zoom); if (state.isOut) { callback(); return; } var ts = this.options.tileSize, tileX = ts * tilePoint.x, tileY = ts * tilePoint.y, zCoeff = Math.pow(2, zoom), ctx = canvas.getContext('2d'), imageObj = new Image(), _this = this; var setPattern = function () { var c, r, p, pattern, geom; if (!state.isIn) { geom = state.geometry; //console.log('geom',geom); ctx.beginPath(); for (c = 0; c < geom.length; c++) { for (r = 0; r < geom[c].length; r++) { if (geom[c][r].length === 0) { continue; } ctx.moveTo(geom[c][r][0].x * zCoeff - tileX, geom[c][r][0].y * zCoeff - tileY); for (p = 1; p < geom[c][r].length; p++) { ctx.lineTo(geom[c][r][p].x * zCoeff - tileX, geom[c][r][p].y * zCoeff - tileY); } } } ctx.clip(); } pattern = ctx.createPattern(imageObj, "repeat"); ctx.beginPath(); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.fill(); callback(); }; if (this.options.crossOrigin) { imageObj.crossOrigin = ''; } imageObj.onload = function () { //TODO: implement correct image loading cancelation canvas.complete = true; //HACK: emulate HTMLImageElement property to make happy L.TileLayer setTimeout(setPattern, 0); //IE9 bug - black tiles appear randomly if call setPattern() without timeout } imageObj.src = url; //console.log('imageObj.src',imageObj.src); }, }; L.TileLayer.GISHOMEWMS = L.TileLayer.WMS.extend({ defaultWmsParams: { service: 'WMS', request: 'GetMap', layers: '', styles: '', format: 'image/jpeg', transparent: false, version: '1.1.1', boundary: null }, options: { crs: null, uppercase: false }, includes: ExtendMethods, initialize: function(url, options) { this._url = url; var wmsParams = L.extend({}, this.defaultWmsParams); // all keys that are not TileLayer options go to WMS params for (var i in options) { if (!(i in this.options)) { wmsParams[i] = options[i]; } } // options = setOptions(this, options); var realRetina = options.detectRetina && L.Browser.retina ? 2 : 1; var tileSize = this.getTileSize(); wmsParams.width = tileSize.x * realRetina; wmsParams.height = tileSize.y * realRetina; this.wmsParams = wmsParams; //編輯 L.TileLayer.prototype.initialize.call(this, url, options); this._boundaryCache = {}; //cache index "x:y:z" this._mercBoundary = null; this._mercBbox = null; options = L.setOptions(this, options); }, onAdd: function (map) { this._crs = this.options.crs || map.options.crs; this._wmsVersion = parseFloat(this.wmsParams.version); var projectionKey = this._wmsVersion >= 1.3 ? 'crs' : 'srs'; this.wmsParams[projectionKey] = this._crs.code; //L.TileLayer.prototype.onAdd.call(this, map); (L.TileLayer.Canvas || L.TileLayer).prototype.onAdd.call(this, map); }, //編輯 createTile: function(coords, done){ var tile = document.createElement('canvas'), url = this.getTileUrl(coords); tile.width = tile.height = this.options.tileSize; this._drawTileInternal(tile, coords, url, L.bind(done, null, null, tile)); return tile; } }); L.tileLayer.gishomewms = function(url, options) { return new L.TileLayer.GISHOMEWMS(url, options); }; L.TileLayer.WMTS = L.TileLayer.extend({ defaultWmtsParams: { service: 'WMTS', request: 'GetTile', version: '1.0.0', layers: '', styles: '', tilematrixSet: '', // format: 'image/jpeg', format: 'image/png', boundary: null }, includes: ExtendMethods, initialize: function(url, options) { this._url = url; var wmtsParams = L.extend({}, this.defaultWmtsParams); var tileSize = options.tileSize || this.options.tileSize; if (options.detectRetina && L.Browser.retina) { wmtsParams.width = wmtsParams.height = tileSize * 2; } else { wmtsParams.width = wmtsParams.height = tileSize; } for (var i in options) { if (!this.options.hasOwnProperty(i) && i !== "matrixIds") { wmtsParams[i] = options[i]; } } this.wmtsParams = wmtsParams; this.matrixIds = options.matrixIds || this.getDefaultMatrix(); //編輯 L.TileLayer.prototype.initialize.call(this, url, options); this._boundaryCache = {}; //cache index "x:y:z" this._mercBoundary = null; this._mercBbox = null; // if (this.options.trackAttribution) { // this._attributionRemoved = true; // this.getAttribution = null; // } L.setOptions(this, options); }, /*onAdd: function(map) { this._crs = this.options.crs || map.options.crs; L.TileLayer.prototype.onAdd.call(this, map); },*/ getTileUrl: function(coords) { var tileSize = this.options.tileSize; var nwPoint = coords.multiplyBy(tileSize); nwPoint.x += 1; nwPoint.y -= 1; var sePoint = nwPoint.add(new L.Point(tileSize, tileSize)); var zoom = this._tileZoom; var nw = this._crs.project(this._map.unproject(nwPoint, zoom)); var se = this._crs.project(this._map.unproject(sePoint, zoom)); var tilewidth = se.x - nw.x; var ident = this.matrixIds[zoom].identifier; var tilematrix = ident; //this.wmtsParams.tilematrixSet + ":" + ident //bug在加載天地圖時會出錯，在加載geoserver發布的wmts時又有用 var X0 = this.matrixIds[zoom].topLeftCorner.lng; var Y0 = this.matrixIds[zoom].topLeftCorner.lat; var tilecol = Math.floor((nw.x - X0) / tilewidth); var tilerow = -Math.floor((nw.y - Y0) / tilewidth); var url = L.Util.template(this._url, { s: this._getSubdomain(coords) }); return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow + "&tilecol=" + tilecol; }, setParams: function(params, noRedraw) { L.extend(this.wmtsParams, params); if (!noRedraw) { this.redraw(); } return this; }, getDefaultMatrix: function() { var matrixIds3857 = new Array(22); for (var i = 0; i < 22; i++) { matrixIds3857[i] = { identifier: "" + i, topLeftCorner: new L.LatLng(90, -180) }; } return matrixIds3857; }, //編輯 createTile: function(coords, done){ var tile = document.createElement('canvas'), url = this.getTileUrl(coords); tile.width = tile.height = this.options.tileSize; this._drawTileInternal(tile, coords, url, L.bind(done, null, null, tile)); return tile; } }); L.tileLayer.wmts = function(url, options) { return new L.TileLayer.WMTS(url, options); };
- 自定義wms以及wmts類呼叫
//wmts圖層 var wmtsLayer = new L.TileLayer.WMTS('http://t{s}.tianditu.gov.cn/img_c/wmts?tk=7786923a385369346d56b966bb6ad62f', { tileSize: 256, layer: "img", tilematrixSet: "c", format: "tile", matrixIds: matrixIds, subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"], boundary: geojson, }); map.addLayer(wmtsLayer); //wms圖層 var wmsLayer = L.tileLayer.gishomewms("http://localhost:8080/geoserver/ZKYGIS/wms?", { layers: "ZKYGIS:district_code", //需要加載的圖層 format: "image/png", //回傳的資料格式 transparent: true, maxZoom: 21, boundary: geojson }); map.addLayer(wmsLayer);
完整demo原始碼見小專欄文章尾部：小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/256251.html
標籤：GIS