fix(tile):data

This commit is contained in:
thinkinggis 2019-06-20 17:54:07 +08:00
parent 5dd2dcc2af
commit 38fe731e52
7 changed files with 54 additions and 52 deletions

View File

@ -59,8 +59,8 @@ scene.on('loaded', () => {
type:'log' type:'log'
} }
}) })
.shape('circle') .shape('normal')
.size(5) .size(1)
.active({fill:'red'}) .active({fill:'red'})
.color('total', ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse()) .color('total', ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse())
//.color('#0D408C') //.color('#0D408C')

View File

@ -36,7 +36,13 @@ const scene = new L7.Scene({
window.scene = scene; window.scene = scene;
var colorHash = new ColorHash(); var colorHash = new ColorHash();
scene.on('loaded', () => { scene.on('loaded', () => {
scene.ImageTileLayer({
zIndex:4
})
.source('http://t1.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=174705aebfe31b79b3587279e211cb9a')
.render();
const provinceSource = new L7.TileSource('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/province/{z}/{x}/{y}.pbf',{ const provinceSource = new L7.TileSource('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/province/{z}/{x}/{y}.pbf',{
parser:{ parser:{
@ -46,10 +52,24 @@ scene.on('loaded', () => {
maxZoom: 5, maxZoom: 5,
} }
}) })
console.log(provinceSource); //
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/b402ae15-c1ab-499b-834c-708e7c1a13be.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506'])
.shape('line')
.size(2)
.active(true)
.style({
opacity: 1.0
})
.render();
});
const layer = scene.VectorTileLayer({ const layer = scene.VectorTileLayer({
zIndex:0, zIndex:0,
layerType:'line' layerType:'polygon'
}) })
.source(provinceSource) .source(provinceSource)
.scale({ .scale({
@ -59,7 +79,7 @@ console.log(provinceSource);
max:5000000 max:5000000
} }
}) })
.shape('line') .shape('fill')
.size(2) .size(2)
.active(false) .active(false)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']) .color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506'])

View File

@ -25,55 +25,49 @@
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'light', // 样式URL
center: [116.5909,39.9225 ], center: [116.5909,39.9225 ],
pitch: 0, pitch: 0,
hash:true, hash:true,
zoom: 14, zoom: 16,
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
const layer = scene.VectorTileLayer({ const layer = scene.VectorTileLayer({
zIndex:0, zIndex:0,
layerType:'heatmap' layerType:'point'
}) })
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point2/{z}/{x}/{y}.pbf',{ .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/all_point/{z}/{x}/{y}.pbf',{
parser:{ parser:{
type: 'mvt', type: 'mvt',
sourceLayer:'layer', sourceLayer:'layer',
maxZoom: 17, maxZoom:14,
} }
}) })
.scale({ .scale({
total:{ bc_grade:{
min:0, type:'cat',
max:1000000, values:[1, 2 ,3, 4]
type:'log' },
open_mode:{
type:'cat',
values:['线上','线下','自助']
} }
}) })
.shape('heatmap') .active(false)
.size('total',[ 0, 1]) // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
.shape('open_mode', ['circle','hexagon','hexagram'])
.size('bc_grade', [2,15])
.color('bc_grade', ['#ffffcc','#d9f0a3','#addd8e','#78c679','#31a354','#006837'])
.style({ .style({
intensity: 10, stroke: '#fff',
radius: 10, strokeWidth: 1.0,
opacity:1, strokeOpacity:1.,
rampColors: { })
colors: [ '#ffda45ff', '#fde725ff', '#ffc934ff', '#ffb824ff', '#ffb824ff', '#fa8100ff' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.9, 1.0 ]
}
})
.render( .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> </script>
</body> </body>
</html> </html>

View File

@ -70,6 +70,7 @@ export default class ImageTile extends Tile {
context.font = 'Bold 20px Helvetica Neue, Verdana, Arial'; context.font = 'Bold 20px Helvetica Neue, Verdana, Arial';
context.fillStyle = '#ff0000'; context.fillStyle = '#ff0000';
context.fillText(this._tile.join('/'), 20, 20); context.fillText(this._tile.join('/'), 20, 20);
context.strokeStyle = 'red';
context.rect(0, 0, 256, 256); context.rect(0, 0, 256, 256);
context.stroke(); context.stroke();
return canvas; return canvas;

View File

@ -157,11 +157,10 @@ export default class TileLayer extends Layer {
break; break;
} }
} }
if ( if (pointShape['2d'].indexOf(shape) !== -1) {
pointShape['2d'].indexOf(shape) !== -1 || return 'circle';
pointShape['3d'].indexOf(shape) !== -1 } else if (pointShape['3d'].indexOf(shape) !== -1) {
) { return 'fill';
return shape === 'circle' ? 'circle' : 'fill';
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
return 'image'; return 'image';
} }

View File

@ -69,9 +69,9 @@ export default class VectorTile extends Tile {
u_time: this.layer.scene._engine.clock.getElapsedTime(), u_time: this.layer.scene._engine.clock.getElapsedTime(),
u_zoom: zoom u_zoom: zoom
}); });
// if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask
// return; return;
// } }
const maskScene = new THREE.Scene(); const maskScene = new THREE.Scene();
this.maskScene = maskScene; this.maskScene = maskScene;
const tileMesh = this._tileMaskMesh(); const tileMesh = this._tileMaskMesh();

View File

@ -3,7 +3,6 @@ import * as VectorParser from '@mapbox/vector-tile';
import geojson from './geojson'; import geojson from './geojson';
export default function mvt(data, cfg) { export default function mvt(data, cfg) {
const tile = new VectorParser.VectorTile(new PBF(data)); const tile = new VectorParser.VectorTile(new PBF(data));
// CHN_Cities_L CHN_Cities CHN_L
const layerName = cfg.sourceLayer; const layerName = cfg.sourceLayer;
const features = []; const features = [];
const vectorLayer = tile.layers[layerName]; const vectorLayer = tile.layers[layerName];
@ -16,17 +15,6 @@ export default function mvt(data, cfg) {
if (geofeature.geometry.type === 'Polygon' && geofeature.geometry.coordinates[0].length < 20) { if (geofeature.geometry.type === 'Polygon' && geofeature.geometry.coordinates[0].length < 20) {
continue; continue;
} }
// const newfc = {
// geometry: geofeature.geometry,
// type: 'Feature',
// properties: {
// total: geofeature.properties.total,
// province: geofeature.properties.province,
// bc_grade: geofeature.properties.bc_grade,
// code: geofeature.properties.code || geofeature.properties.adcode
// }
// };
features.push(geofeature); features.push(geofeature);
} }
// console.log(features); // console.log(features);