2019-05-28 11:35:31 +08:00
<!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,
2019-06-10 11:54:11 +08:00
zoom: 4,
2019-05-28 11:35:31 +08:00
});
window.scene = scene;
var colorHash = new ColorHash();
2019-06-14 10:08:42 +08:00
2019-05-28 11:35:31 +08:00
scene.on('loaded', () => {
2019-06-14 10:08:42 +08:00
const provinceSource = new L7.TileSource('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/province/{z}/{x}/{y}.pbf',{
2019-05-28 11:35:31 +08:00
parser:{
type: 'mvt',
sourceLayer:'layer',
2019-06-10 11:54:11 +08:00
idField:'code',
2019-06-14 10:08:42 +08:00
maxZoom: 5,
2019-05-28 11:35:31 +08:00
}
2019-06-14 10:08:42 +08:00
})
console.log(provinceSource);
const layer = scene.VectorTileLayer({
zIndex:0,
layerType:'line'
2019-05-28 11:35:31 +08:00
})
2019-06-14 10:08:42 +08:00
.source(provinceSource)
2019-06-10 11:54:11 +08:00
.scale({
total:{
type:'linear',
min:0,
2019-06-14 10:08:42 +08:00
max:5000000
2019-06-10 11:54:11 +08:00
}
2019-05-29 15:35:24 +08:00
})
2019-06-14 10:08:42 +08:00
.shape('line')
2019-05-28 11:35:31 +08:00
.size(2)
2019-06-10 11:54:11 +08:00
.active(false)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506'])
2019-05-28 11:35:31 +08:00
.style({
opacity:1.0
})
2019-06-14 10:08:42 +08:00
.render();
2019-05-28 11:35:31 +08:00
});
2019-06-14 10:08:42 +08:00
2019-05-28 11:35:31 +08:00
< / script >
< / body >
< / html >
