From fe345e1579d6a8e31e7f935a91de908779cb354c Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 28 May 2019 11:35:31 +0800 Subject: [PATCH] fix(tile): vectorMap --- demos/assets/color-hash.js | 173 +++++++++++++++++++++++++++++++++++ demos/vectorTilepolygon.html | 81 ++++++++++++++++ demos/vectorheatMap.html | 80 ++++++++++++++++ src/layer/tile/tileLayer.js | 17 ++++ src/layer/tile/vectorTile.js | 21 +++-- 5 files changed, 364 insertions(+), 8 deletions(-) create mode 100644 demos/assets/color-hash.js create mode 100644 demos/vectorTilepolygon.html create mode 100644 demos/vectorheatMap.html diff --git a/demos/assets/color-hash.js b/demos/assets/color-hash.js new file mode 100644 index 0000000000..ce0dca5ef7 --- /dev/null +++ b/demos/assets/color-hash.js @@ -0,0 +1,173 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ColorHash = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o MAX_SAFE_INTEGER) { + hash = parseInt(hash / seed2); + } + hash = hash * seed + str.charCodeAt(i); + } + return hash; + }; + + module.exports = BKDRHash; + + },{}],2:[function(require,module,exports){ + var BKDRHash = require('./bkdr-hash'); + + /** + * Convert RGB Array to HEX + * + * @param {Array} RGBArray - [R, G, B] + * @returns {String} 6 digits hex starting with # + */ + var RGB2HEX = function(RGBArray) { + var hex = '#'; + RGBArray.forEach(function(value) { + if (value < 16) { + hex += 0; + } + hex += value.toString(16); + }); + return hex; + }; + + /** + * Convert HSL to RGB + * + * @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information. + * @param {Number} H Hue ∈ [0, 360) + * @param {Number} S Saturation ∈ [0, 1] + * @param {Number} L Lightness ∈ [0, 1] + * @returns {Array} R, G, B ∈ [0, 255] + */ + var HSL2RGB = function(H, S, L) { + H /= 360; + + var q = L < 0.5 ? L * (1 + S) : L + S - L * S; + var p = 2 * L - q; + + return [H + 1/3, H, H - 1/3].map(function(color) { + if(color < 0) { + color++; + } + if(color > 1) { + color--; + } + if(color < 1/6) { + color = p + (q - p) * 6 * color; + } else if(color < 0.5) { + color = q; + } else if(color < 2/3) { + color = p + (q - p) * 6 * (2/3 - color); + } else { + color = p; + } + return Math.round(color * 255); + }); + }; + + function isArray(o) { + return Object.prototype.toString.call(o) === '[object Array]'; + } + + /** + * Color Hash Class + * + * @class + */ + var ColorHash = function(options) { + options = options || {}; + + var LS = [options.lightness, options.saturation].map(function(param) { + param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime + return isArray(param) ? param.concat() : [param]; + }); + + this.L = LS[0]; + this.S = LS[1]; + + if (typeof options.hue === 'number') { + options.hue = {min: options.hue, max: options.hue}; + } + if (typeof options.hue === 'object' && !isArray(options.hue)) { + options.hue = [options.hue]; + } + if (typeof options.hue === 'undefined') { + options.hue = []; + } + this.hueRanges = options.hue.map(function (range) { + return { + min: typeof range.min === 'undefined' ? 0 : range.min, + max: typeof range.max === 'undefined' ? 360: range.max + }; + }); + + this.hash = options.hash || BKDRHash; + }; + + /** + * Returns the hash in [h, s, l]. + * Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1]; + * + * @param {String} str string to hash + * @returns {Array} [h, s, l] + */ + ColorHash.prototype.hsl = function(str) { + var H, S, L; + var hash = this.hash(str); + + if (this.hueRanges.length) { + var range = this.hueRanges[hash % this.hueRanges.length]; + var hueResolution = 727; // note that 727 is a prime + H = ((hash / this.hueRanges.length) % hueResolution) * (range.max - range.min) / hueResolution + range.min; + } else { + H = hash % 359; // note that 359 is a prime + } + hash = parseInt(hash / 360); + S = this.S[hash % this.S.length]; + hash = parseInt(hash / this.S.length); + L = this.L[hash % this.L.length]; + + return [H, S, L]; + }; + + /** + * Returns the hash in [r, g, b]. + * Note that R, G, B ∈ [0, 255] + * + * @param {String} str string to hash + * @returns {Array} [r, g, b] + */ + ColorHash.prototype.rgb = function(str) { + var hsl = this.hsl(str); + return HSL2RGB.apply(this, hsl); + }; + + /** + * Returns the hash in hex + * + * @param {String} str string to hash + * @returns {String} hex with # + */ + ColorHash.prototype.hex = function(str) { + var rgb = this.rgb(str); + return RGB2HEX(rgb); + }; + + module.exports = ColorHash; + + },{"./bkdr-hash":1}]},{},[2])(2) + }); \ No newline at end of file diff --git a/demos/vectorTilepolygon.html b/demos/vectorTilepolygon.html new file mode 100644 index 0000000000..ce4df2bf67 --- /dev/null +++ b/demos/vectorTilepolygon.html @@ -0,0 +1,81 @@ + + + + + + + + + + + hexagon demo + + + + +
+ + + + + + + + + diff --git a/demos/vectorheatMap.html b/demos/vectorheatMap.html new file mode 100644 index 0000000000..4dd387940d --- /dev/null +++ b/demos/vectorheatMap.html @@ -0,0 +1,80 @@ + + + + + + + + + + + hexagon demo + + + + +
+ + + + + + + + diff --git a/src/layer/tile/tileLayer.js b/src/layer/tile/tileLayer.js index ca82093dc5..6cdcd01bc4 100644 --- a/src/layer/tile/tileLayer.js +++ b/src/layer/tile/tileLayer.js @@ -178,6 +178,12 @@ export default class TileLayer extends Layer { mesh.name = key; this._tileCache.setTile(tile, key); this._tileKeys.push(key); + if (mesh.type === 'composer') { + this.scene._engine.composerLayers.push(mesh); + this.scene._engine.update(); + this._pruneTiles(); + return; + } if (mesh.children.length !== 0) { this._tiles.add(tile.getMesh()); this._addPickTile(tile.getMesh()); @@ -186,6 +192,12 @@ export default class TileLayer extends Layer { this._pruneTiles(); }); } else { + if (tile.getMesh().type === 'composer') { + this.scene._engine.composerLayers.push(tile.getMesh()); + this.scene._engine.update(); + this._pruneTiles(); + return; + } this._tiles.add(tile.getMesh()); t.active = true; this._addPickTile(tile.getMesh()); @@ -288,6 +300,11 @@ export default class TileLayer extends Layer { tileObj._abortRequest(); this._tiles.remove(tileObj.getMesh()); } + if (tileObj && tileObj.getMesh().type === 'composer') { + this.scene._engine.composerLayers = this.scene._engine.composerLayers.filter(obj => { + return obj.name !== tileObj.getMesh().name; + }); + } delete this.tileList[key]; } } diff --git a/src/layer/tile/vectorTile.js b/src/layer/tile/vectorTile.js index e7eb496435..b87fac4998 100644 --- a/src/layer/tile/vectorTile.js +++ b/src/layer/tile/vectorTile.js @@ -43,14 +43,19 @@ export default class VectorTile extends Tile { this.layer.shape = this.layer._getShape(this.layerData); } this.mesh = getRender(this.layer.get('layerType'), this.layer.shape)(this.layerData, this.layer); - this.mesh.onBeforeRender = renderer => { - this._renderMask(renderer); - }; - this.mesh.onAfterRender = renderer => { - const context = renderer.context; - context.disable(context.STENCIL_TEST); - }; - this._object3D.add(this.mesh); + if (this.mesh.type !== 'composer') { // 热力图的情况 + this.mesh.onBeforeRender = renderer => { + this._renderMask(renderer); + }; + this.mesh.onAfterRender = renderer => { + const context = renderer.context; + context.disable(context.STENCIL_TEST); + }; + this._object3D.add(this.mesh); + } else { + this._object3D = this.mesh; + } + this.emit('tileLoaded'); return this._object3D; }