diff --git a/demos/vectorTile.html b/demos/vectorTile.html index 06b7983dbb..2addfdc212 100644 --- a/demos/vectorTile.html +++ b/demos/vectorTile.html @@ -59,8 +59,8 @@ scene.on('loaded', () => { type:'log' } }) - .shape('circle') - .size(5) + .shape('normal') + .size(1) .active({fill:'red'}) .color('total', ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse()) //.color('#0D408C') diff --git a/demos/vectorTilepolygon.html b/demos/vectorTilepolygon.html index 9780ad8624..5a66c20b1e 100644 --- a/demos/vectorTilepolygon.html +++ b/demos/vectorTilepolygon.html @@ -36,7 +36,13 @@ const scene = new L7.Scene({ window.scene = scene; var colorHash = new ColorHash(); + 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',{ parser:{ @@ -46,10 +52,24 @@ scene.on('loaded', () => { 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({ zIndex:0, - layerType:'line' + layerType:'polygon' }) .source(provinceSource) .scale({ @@ -59,7 +79,7 @@ console.log(provinceSource); max:5000000 } }) - .shape('line') + .shape('fill') .size(2) .active(false) .color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']) diff --git a/demos/vectorheatMap.html b/demos/vectorheatMap.html index 4dd387940d..8410a6cfd2 100644 --- a/demos/vectorheatMap.html +++ b/demos/vectorheatMap.html @@ -25,55 +25,49 @@ const scene = new L7.Scene({ id: 'map', - mapStyle: 'dark', // 样式URL + mapStyle: 'light', // 样式URL center: [116.5909,39.9225 ], pitch: 0, hash:true, - zoom: 14, + zoom: 16, }); window.scene = scene; scene.on('loaded', () => { const layer = scene.VectorTileLayer({ 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:{ type: 'mvt', sourceLayer:'layer', - maxZoom: 17, + maxZoom:14, } }) .scale({ - total:{ - min:0, - max:1000000, - type:'log' + bc_grade:{ + type:'cat', + values:[1, 2 ,3, 4] + }, + open_mode:{ + type:'cat', + values:['线上','线下','自助'] } }) - .shape('heatmap') - .size('total',[ 0, 1]) + .active(false) + // '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({ - 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 ] - } - }) + stroke: '#fff', + strokeWidth: 1.0, + strokeOpacity:1., + }) .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]; - //} diff --git a/src/layer/tile/imageTile.js b/src/layer/tile/imageTile.js index ea655a0aca..73c7c335e6 100644 --- a/src/layer/tile/imageTile.js +++ b/src/layer/tile/imageTile.js @@ -70,6 +70,7 @@ export default class ImageTile extends Tile { context.font = 'Bold 20px Helvetica Neue, Verdana, Arial'; context.fillStyle = '#ff0000'; context.fillText(this._tile.join('/'), 20, 20); + context.strokeStyle = 'red'; context.rect(0, 0, 256, 256); context.stroke(); return canvas; diff --git a/src/layer/tile/tileLayer.js b/src/layer/tile/tileLayer.js index 867429d6a3..03a074852e 100644 --- a/src/layer/tile/tileLayer.js +++ b/src/layer/tile/tileLayer.js @@ -157,11 +157,10 @@ export default class TileLayer extends Layer { break; } } - if ( - pointShape['2d'].indexOf(shape) !== -1 || - pointShape['3d'].indexOf(shape) !== -1 - ) { - return shape === 'circle' ? 'circle' : 'fill'; + if (pointShape['2d'].indexOf(shape) !== -1) { + return 'circle'; + } else if (pointShape['3d'].indexOf(shape) !== -1) { + return 'fill'; } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { return 'image'; } diff --git a/src/layer/tile/vectorTile.js b/src/layer/tile/vectorTile.js index 0f3d9d6564..ad966e8e14 100644 --- a/src/layer/tile/vectorTile.js +++ b/src/layer/tile/vectorTile.js @@ -69,9 +69,9 @@ export default class VectorTile extends Tile { u_time: this.layer.scene._engine.clock.getElapsedTime(), u_zoom: zoom }); - // if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask - // return; - // } + if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask + return; + } const maskScene = new THREE.Scene(); this.maskScene = maskScene; const tileMesh = this._tileMaskMesh(); diff --git a/src/source/parser/mvt.js b/src/source/parser/mvt.js index f549b818c5..a2777e5b07 100644 --- a/src/source/parser/mvt.js +++ b/src/source/parser/mvt.js @@ -3,7 +3,6 @@ import * as VectorParser from '@mapbox/vector-tile'; import geojson from './geojson'; export default function mvt(data, cfg) { const tile = new VectorParser.VectorTile(new PBF(data)); - // CHN_Cities_L CHN_Cities CHN_L const layerName = cfg.sourceLayer; const features = []; 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) { 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); } // console.log(features);