diff --git a/packages/vt/src/worker/builder/Wireframe.js b/packages/vt/src/worker/builder/Wireframe.js index 3bb8885413..0ee69ea11f 100644 --- a/packages/vt/src/worker/builder/Wireframe.js +++ b/packages/vt/src/worker/builder/Wireframe.js @@ -1,29 +1,32 @@ import { countVertexes, isClippedEdge, fillPosArray } from './Common'; +import { isNumber } from '../../common/Util'; import { KEY_IDX } from '../../common/Constant'; -import { vec3 } from 'gl-matrix'; -import { isFunctionDefinition } from '@maptalks/function-type'; +import { isFunctionDefinition, loadFunctionTypes } from '@maptalks/function-type'; import { getVectorPacker } from '../../packer/inject'; -const { PackUtil, StyleUtil, FilterUtil } = getVectorPacker(); +const { PackUtil, StyleUtil } = getVectorPacker(); -export function buildWireframe( - features, EXTENT, colorSymbol, opacity, +export function wireframe( + features, EXTENT, symbol, { altitudeScale, altitudeProperty, defaultAltitude, heightProperty, minHeightProperty, defaultHeight, bottom - } + }, + mapZoom ) { + const drawBottom = bottom; const scale = EXTENT / features[0].extent; // debugger const size = countVertexes(features) * 2 + features.length * 3 * 2; //wireframe need to count last point in const featIndexes = []; - const vertices = new Int16Array(size); + // -32768 到 32767 + let vertices = new Int16Array(size); const colors = new Uint8Array(vertices.length / 3 * 4); - if (isFunctionDefinition(colorSymbol)) { - colorSymbol = FilterUtil.compileFilter(colorSymbol); - } + const { lineColor, lineOpacity } = symbol || {}; + const lineColorIsFunction = isFunctionDefinition(lineColor); + const lineOpacityIsFunction = isFunctionDefinition(lineOpacity); const indices = []; function fillIndices(start, offset, height) { @@ -68,6 +71,24 @@ export function buildWireframe( return offset + count; } + let minAlt = Infinity, maxAlt = -Infinity; + const heights = []; + // Find the maximum elevation + //查找最大海拔值,判断是否用Int32Array + for (let r = 0, n = features.length; r < n; r++) { + const feature = features[r]; + const { altitude, height } = PackUtil.getFeaAltitudeAndHeight(feature, altitudeScale, altitudeProperty, defaultAltitude, heightProperty, defaultHeight, minHeightProperty); + minAlt = Math.min(altitude, minAlt); + maxAlt = Math.max(altitude, maxAlt); + const idx = 2 * r; + heights[idx] = altitude; + heights[idx + 1] = height; + } + // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray + if (Math.max(Math.abs(minAlt), Math.abs(maxAlt)) > 32767) { + vertices = new Int32Array(size); + } + let offset = 0; let maxAltitude = -Infinity; let minAltitude = Infinity; @@ -76,20 +97,27 @@ export function buildWireframe( for (let r = 0, n = features.length; r < n; r++) { const feature = features[r]; const geometry = feature.geometry; - if (colorSymbol) { - let color; - if (typeof colorSymbol === 'function') { - color = colorSymbol(feature && feature.properties); - } else { - color = colorSymbol; - } - StyleUtil.normalizeColor(rgb, color); - } else { - vec3.set(rgb, 255, 255, 255); - } + let color = lineColor, opacity = lineOpacity; + if (lineColorIsFunction || lineOpacityIsFunction) { + const colorSymbol = loadFunctionTypes(symbol, () => { + return [mapZoom, feature.properties || {}]; + }); + color = colorSymbol.lineColor; + opacity = colorSymbol.lineOpacity; + } + if (!isNumber(opacity)) { + opacity = 1; + } + if (!color) { + color = '#fff'; + } + StyleUtil.normalizeColor(rgb, color); const colorStart = offset / 3 * 4; - const { altitude, height } = PackUtil.getFeaAltitudeAndHeight(feature, altitudeScale, altitudeProperty, defaultAltitude, heightProperty, defaultHeight, minHeightProperty); + const idx = 2 * r; + const altitude = heights[idx]; + const height = heights[idx + 1]; + if (height < 0) { minAltitude = Math.min(altitude, minAltitude); maxAltitude = Math.max(altitude - height, maxAltitude); @@ -117,7 +145,7 @@ export function buildWireframe( colors[i] = rgb[0]; colors[i + 1] = rgb[1]; colors[i + 2] = rgb[2]; - colors[i + 3] = 255 * (opacity || 1); + colors[i + 3] = 255 * opacity; } const count = indices.length - featIndexes.length; for (let i = 0; i < count; i++) { diff --git a/packages/vt/src/worker/builder/build_wireframe.js b/packages/vt/src/worker/builder/build_wireframe.js index 8f10aae13b..5e4e9af8dc 100644 --- a/packages/vt/src/worker/builder/build_wireframe.js +++ b/packages/vt/src/worker/builder/build_wireframe.js @@ -1,7 +1,7 @@ -import { buildWireframe } from './Wireframe'; +import { wireframe } from './Wireframe'; -export default function (features, extent, symbol, dataConfig) { - const frames = buildWireframe(features, extent, symbol.lineColor, symbol.lineOpacity, dataConfig); +export default function (features, extent, symbol, dataConfig, mapZoom) { + const frames = wireframe(features, extent, symbol, dataConfig, mapZoom); const { minAltitude, maxAltitude } = frames; delete frames.minAltitude; delete frames.maxAltitude; diff --git a/packages/vt/src/worker/layer/BaseLayerWorker.js b/packages/vt/src/worker/layer/BaseLayerWorker.js index 31e0bf6228..6c21a27c01 100644 --- a/packages/vt/src/worker/layer/BaseLayerWorker.js +++ b/packages/vt/src/worker/layer/BaseLayerWorker.js @@ -602,7 +602,7 @@ export default class BaseLayerWorker { ) )]); } else if (type === '3d-wireframe') { - return Promise.all([Promise.resolve(buildWireframe(features, extent, symbol, dataConfig))]); + return Promise.all([Promise.resolve(buildWireframe(features, extent, symbol, dataConfig, zoom))]); } else if (type === 'point') { options = extend(options, { requestor: this.fetchIconGlyphs.bind(this),