mirror of https://gitee.com/antv-l7/antv-l7
fix(tile): vectorMap
This commit is contained in:
thinkinggis
parent
cef72bc497
commit
0888f31769
|
|
@ -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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
/**
|
||||
* BKDR Hash (modified version)
|
||||
*
|
||||
* @param {String} str string to hash
|
||||
* @returns {Number}
|
||||
*/
|
||||
var BKDRHash = function(str) {
|
||||
var seed = 131;
|
||||
var seed2 = 137;
|
||||
var hash = 0;
|
||||
// make hash more sensitive for short string like 'a', 'b', 'c'
|
||||
str += 'x';
|
||||
// Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
|
||||
var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
|
||||
for(var i = 0; i < str.length; i++) {
|
||||
if(hash > 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)
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="geometry" content="diagram">
|
||||
<link rel="stylesheet" href="./assets/common.css">
|
||||
<link rel="stylesheet" href="./assets/info.css">
|
||||
|
||||
<title>hexagon demo</title>
|
||||
<style>
|
||||
body {margin: 0;}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="./assets/color-hash.js"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
center: [116.5909,39.9225 ],
|
||||
pitch: 0,
|
||||
hash:true,
|
||||
zoom: 14,
|
||||
|
||||
});
|
||||
window.scene = scene;
|
||||
var colorHash = new ColorHash();
|
||||
scene.on('loaded', () => {
|
||||
const layer = scene.VectorTileLayer({
|
||||
zIndex:0,
|
||||
layerType:'polygon'
|
||||
})
|
||||
//.source('https://pre-lbs-show.taobao.com/gettile?x={x}&y={y}&z={z}&pipeId=pipe_vt_test')
|
||||
|
||||
// http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point/{z}/{x}/{y}.pbf
|
||||
// https://mvt.amap.com/district/CHN2/8/203/105/4096?key=
|
||||
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/{z}/{x}/{y}.pbf',{
|
||||
parser:{
|
||||
type: 'mvt',
|
||||
sourceLayer:'layer',
|
||||
idField:'adcode',
|
||||
maxZoom: 17,
|
||||
}
|
||||
})
|
||||
//.scale()
|
||||
// cylinder
|
||||
.shape('fill')
|
||||
.size(2)
|
||||
.active({fill:'red'})
|
||||
.color('name',name => {
|
||||
//var colorHash = new ColorHash();
|
||||
return colorHash.hex(name)
|
||||
})
|
||||
.style({
|
||||
opacity:1.0
|
||||
})
|
||||
.render(
|
||||
);
|
||||
layer.on('mousemove',(feature)=>{
|
||||
console.log(feature);
|
||||
})
|
||||
console.log(layer);
|
||||
});
|
||||
//OBJECTID',(id)=>{
|
||||
// const index = id % 8;
|
||||
//return ['#9e0142','#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd','#5e4fa2'][index];
|
||||
//}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="geometry" content="diagram">
|
||||
<link rel="stylesheet" href="./assets/common.css">
|
||||
<link rel="stylesheet" href="./assets/info.css">
|
||||
|
||||
<title>hexagon demo</title>
|
||||
<style>
|
||||
body {margin: 0;}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
center: [116.5909,39.9225 ],
|
||||
pitch: 0,
|
||||
hash:true,
|
||||
zoom: 14,
|
||||
|
||||
});
|
||||
window.scene = scene;
|
||||
scene.on('loaded', () => {
|
||||
const layer = scene.VectorTileLayer({
|
||||
zIndex:0,
|
||||
layerType:'heatmap'
|
||||
})
|
||||
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point2/{z}/{x}/{y}.pbf',{
|
||||
parser:{
|
||||
type: 'mvt',
|
||||
sourceLayer:'layer',
|
||||
maxZoom: 17,
|
||||
}
|
||||
})
|
||||
.scale({
|
||||
total:{
|
||||
min:0,
|
||||
max:1000000,
|
||||
type:'log'
|
||||
}
|
||||
})
|
||||
.shape('heatmap')
|
||||
.size('total',[ 0, 1])
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 10,
|
||||
opacity:1,
|
||||
rampColors: {
|
||||
colors: [ '#ffda45ff', '#fde725ff', '#ffc934ff', '#ffb824ff', '#ffb824ff', '#fa8100ff' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.9, 1.0 ]
|
||||
}
|
||||
})
|
||||
.render(
|
||||
);
|
||||
layer.on('mousemove',(feature)=>{
|
||||
console.log(feature);
|
||||
})
|
||||
console.log(layer);
|
||||
});
|
||||
//OBJECTID',(id)=>{
|
||||
// const index = id % 8;
|
||||
//return ['#9e0142','#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd','#5e4fa2'][index];
|
||||
//}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -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];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue