-
Notifications
You must be signed in to change notification settings - Fork 633
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mvt Vector 瓦片 See merge request !30
- Loading branch information
Showing
61 changed files
with
1,537 additions
and
395 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
<!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:'point' | ||
}) | ||
//.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/point2/{z}/{x}/{y}.pbf',{ | ||
parser:{ | ||
type: 'mvt', | ||
sourceLayer:'layer', | ||
//idField:'OBJECTID', | ||
maxZoom: 17, | ||
} | ||
}) | ||
.scale({ | ||
total:{ | ||
min:0, | ||
max:1000000, | ||
type:'log' | ||
} | ||
}) | ||
// cylinder | ||
.shape('hexagon') | ||
.size(2) | ||
.active({fill:'red'}) | ||
.color('total', ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse()) | ||
//.color('#0D408C') | ||
.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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
|
Oops, something went wrong.