fix(heat-map): 修复bbox计算逻辑

This commit is contained in:
mipha.ly 2019-03-14 15:00:07 +08:00
parent 62932e093f
commit 13583eab7a
2 changed files with 8 additions and 66 deletions

View File

@ -18,83 +18,25 @@
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
const data1 = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
value: 550,
address: '浙江省'
},
geometry: {
type: 'Point',
coordinates: [ 120.5751451280382, 29.98157497829861 ]
}
},
{
type: 'Feature',
properties: {
value: 2100,
address: '广东省'
},
geometry: {
type: 'Point',
coordinates: [ 113.818805, 22.664838 ]
}
},
{
type: 'Feature',
properties: {
value: 420,
address: '北京'
},
geometry: {
type: 'Point',
coordinates: [ 116.40899441189237, 39.940829535590275 ]
}
},
{
type: 'Feature',
properties: {
value: 2000,
address: '辽宁省'
},
geometry: {
type: 'Point',
coordinates: [ 122.689323, 40.80727 ]
}
},
{
type: 'Feature',
properties: {
value: 7000,
address: '河南省'
},
geometry: {
type: 'Point',
coordinates: [ 112.903898, 34.075266 ]
}
}
]
};
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
center: [ 120.5751451280382, 29.98157497829861 ], center: [ -155, 60 ],
pitch: 0, pitch: 0,
zoom: 4.5 zoom: 4.5
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json', data => { $.get('https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json', data => {
scene.HeatmapLayer({ scene.HeatmapLayer({
zIndex: 2 zIndex: 2
}) })
.source(data1) .source(data)
.size('value', [ 0, 1 ]) // weight映射通道 .size('mag', [ 0, 1 ]) // weight映射通道
.style({ .style({
intensity: 3, intensity: 2,
radius: 20, radius: 30,
rampColors: { rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]

View File

@ -76,7 +76,7 @@ export function updateIntensityPass(layer) {
const zoom = layer.scene.getZoom(); const zoom = layer.scene.getZoom();
const bbox = layer.dataBbox; const bbox = layer.dataBbox;
mesh.material.uniforms.u_zoom.value = zoom; mesh.material.uniforms.u_zoom.value = zoom;
const passWidth = Math.min(5000, Math.pow(zoom, 2.0) * 300); const passWidth = Math.min(8000, Math.pow(zoom, 2.0) * 250);
const passHeight = passWidth * (bbox.height / bbox.width); const passHeight = passWidth * (bbox.height / bbox.width);
layer.intensityPass.pass.setSize(passWidth, passHeight); layer.intensityPass.pass.setSize(passWidth, passHeight);
layer.intensityPass.render(); layer.intensityPass.render();
@ -116,7 +116,7 @@ function calBoundingBox(data) {
minX -= ((maxX - minX) * 0.5); minX -= ((maxX - minX) * 0.5);
maxX += ((maxX - minX) * 0.5); maxX += ((maxX - minX) * 0.5);
minY -= ((maxY - minY) * 0.5); minY -= ((maxY - minY) * 0.5);
maxY -= ((maxY - minY) * 0.5); maxY += ((maxY - minY) * 0.5);
const width = maxX - minX; const width = maxX - minX;
const height = maxY - minY; const height = maxY - minY;