区块链技术博客
www.b2bchain.cn

leaflet拓展wms以及wmts地图范围裁剪(附源码下载)求职学习资料

本文介绍了leaflet拓展wms以及wmts地图范围裁剪(附源码下载)求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

leaflet 入门开发系列环境知识点了解:

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet拓展wms以及wmts地图范围裁剪功能
源代码demo下载

效果图如下:
leaflet拓展wms以及wmts地图范围裁剪(附源码下载)

具体实现参考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 &lt; geom[iC].length; iR++) {     clippedHoleRing = L.PolyUtil.clipPolygon(geom[iC][iR], bounds);     if (clippedHoleRing.length &gt; 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 &lt; 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: } 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);</code></pre></li>

前言

leaflet 入门开发系列环境知识点了解:

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet拓展wms以及wmts地图范围裁剪功能
源代码demo下载

效果图如下:
leaflet拓展wms以及wmts地图范围裁剪(附源码下载)

具体实现参考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 &lt; geom[iC].length; iR++) {     clippedHoleRing = L.PolyUtil.clipPolygon(geom[iC][iR], bounds);     if (clippedHoleRing.length &gt; 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 &lt; 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: } 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);</code></pre></li>

前言

leaflet 入门开发系列环境知识点了解:

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet拓展wms以及wmts地图范围裁剪功能
源代码demo下载

效果图如下:
leaflet拓展wms以及wmts地图范围裁剪(附源码下载)

具体实现参考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 &lt; geom[iC].length; iR++) {     clippedHoleRing = L.PolyUtil.clipPolygon(geom[iC][iR], bounds);     if (clippedHoleRing.length &gt; 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 &lt; 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: } 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);</code></pre></li>

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » leaflet拓展wms以及wmts地图范围裁剪(附源码下载)求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们