基于leaflet.js實現(xiàn)修改地圖主題樣式的流程分析

更新時間：2020年05月15日 15:21:53 作者：Daisen.Z

這篇文章主要介紹了基于leaflet.js實現(xiàn)修改地圖主題樣式的流程，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

今天遇到了一點(diǎn)點(diǎn)的小情況，我自己根據(jù)leaflet.js做了一個離線地圖，公司要用來做態(tài)勢，但是地圖的底圖用的是高德的原圖，樣式是下面這樣的：

在這里插入圖片描述

但是態(tài)勢的主題是如下的這種淡藍(lán)色：

在這里插入圖片描述

這就造成了本次的需求，需要可以修改樣式的主題，由于本人是個后端小佬，前端菜雞，所以實現(xiàn)起來發(fā)生了一些困難，這里簡單介紹下實現(xiàn)的路程。
首先看下效果：

在這里插入圖片描述

然后介紹下艱辛的過程：
首先，需要用到一個基于leaflet.js的插件:
https://github.com/hnrchrdl/leaflet-tilelayer-colorizr
但是在使用這個插件的時候出現(xiàn)了一些問題，這里不贅述了，大致就是我加載的地圖瓦片是其他的服務(wù)器，但是這個插件似乎不能支持跨域，廢了很大的心思我終于解決了這個問題。
這里我先提供解決的方式：

/*
 * L.TileLayer.Colorizr is a regular tilelayer with mapped colors.
 */
(function () {
 // L.TileLayer.Colorizr = 
 var Colorizr = L.TileLayer.extend({
  initialize: function (url, options) {
   options = L.extend({}, L.TileLayer.prototype.options, {
    colorize: function (pixel) {
     return pixel;
    },
    crossOrigin: 'Anonymous'
   }, options);
   L.TileLayer.prototype.initialize.call(this, url, options);
   L.setOptions(this, options);
   this.setColorizr(this.options.colorize);
   this.on('tileload', function (e) {
    this._colorize(e.tile);
   });
  },
  setColorizr: function (colorizrFactory) {
   if (!colorizrFactory || typeof colorizrFactory !== 'function') {
    throw 'The colorize option should be a function and return an object with at least one of "r", "g", "b", or "a" properties. Got:' +
    typeof colorizrFactory;
   } else {
    this.options.colorize = colorizrFactory;
   }
   this.redraw(false);
  },
  _createTile: function () {
   var tile = L.TileLayer.prototype._createTile.call(this);
   tile.crossOrigin = "Anonymous";
   return tile;
  },
  _colorize: function (img) {
   if (img.getAttribute('data-colorized')) {
    img.hidden = false;
    return;
   }else {
    img.hidden = true;
   }
   var _img = img;
   var img = new Image();
   img.crossOrigin = 'Anonymous';
   img.src = _img.src;
   var _this = this;
   img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
     var pixel = _this.options.colorize({r: pix[i], g: pix[i + 1], b: pix[i + 2], a: pix[i + 3]});
     if (!!!pixel || pixel !== Object(pixel) || Object.prototype.toString.call(pixel) === '[object Array]') {
      if (i === 0) {
       throw 'The colorize option should return an object with at least one of "r", "g", "b", or "a" properties.';
      }
     } else {
      if (pixel.hasOwnProperty('r') && typeof pixel.r === 'number') {
       pix[i] = pixel.r;
      }
      if (pixel.hasOwnProperty('g')) {
       pix[i + 1] = pixel.g;
      }
      if (pixel.hasOwnProperty('b')) {
       pix[i + 2] = pixel.b;
      }
      if (pixel.hasOwnProperty('a')) {
       pix[i + 3] = pixel.a;
      }
     }
    }
    ctx.putImageData(imgd, 0, 0);
    _img.setAttribute('data-colorized', true);
    _img.src = canvas.toDataURL();
   };
  }
 });
 (function (factory, window) {
  // define an AMD module that relies on 'leaflet'
  if (typeof define === 'function' && define.amd) {
   define(['leaflet'], factory);
   // define a Common JS module that relies on 'leaflet'
  } else if (typeof exports === 'object') {
   module.exports = factory(require('leaflet'));
  }
  // attach your plugin to the global 'L' variable
  if (typeof window !== 'undefined' && window.L) {
   window.L.tileLayer.colorizr = factory(L);
  }
 }(function (L) {
  return function (url, options) {
   return new Colorizr(url, options);
  };
 }, window));
})()

用上面的代碼直接頂替掉下面這個js插件中的所有代碼

在這里插入圖片描述

以下是使用的方式：

 var map = L.map("map", {
  center: [34.694, 113.587],
  renderer: L.svg(),
  zoom: 16,
  zoomControl: false, // + -號放大縮小
  attributionControl: false // 右下角leaflet.js圖標(biāo)
 });
 // http://192.168.0.105:9090/img/{z}/{x}/{y}.png // 這個是瓦片地圖的地址
 L.tileLayer.colorizr("http://localhost:9090/img/{z}/{x}/{y}.png", {
  maxZoom: 18,
  minZoom: 3,
  colorize: function (pixel) {
   // 這個方法用來調(diào)整所有的圖片上的rgb值，pixel是圖片原有的rgb值
   pixel.r += 13;
   pixel.g += 17;
   pixel.b += 90;
   return pixel;
  }
 }).addTo(map);

需要注意的是，可以配合著給圖片加濾鏡來做：

.leaflet-zoom-animated img {
   -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
  }

通過修改colorize的返回值就可以實現(xiàn)修改地圖的樣式了。
總結(jié)下實現(xiàn)思路： 這種方法主要是通過攔截地圖瓦片數(shù)據(jù)，然后通過canvas（本人后端，不是太懂，反正這東西能操作圖片）操作圖片來修改圖片的rgb值，從而達(dá)到修改地圖樣式的目的。
最后，感謝下友好的國際友人（雖然沒能幫到我），嘻嘻。
可以看看我們有趣的聊天記錄

最后的最后，給大家附上一個我自己基于leaflet。js實現(xiàn)的離線地圖服務(wù)器（下載與部署一體）

總結(jié)

到此這篇關(guān)于基于leaflet.js實現(xiàn)修改地圖主題樣式的文章就介紹到這了,更多相關(guān)leaflet.js修改地圖主題樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: