1. 这个不觉明历。在我看来,这和 boxs 那个例子差不多。

 

2. 只不过扩展类 TestBoxs 继承了 maptalks.MergedMixin ,这个估计要看源码才能明白是啥了。

1 class TestBoxs extends maptalks.MergedMixin(maptalks.BaseObject) {

2 constructor(points, options, material, layer) {

3 if (!Array.isArray(points)) {

4 points = [points];

5 }

6 const len = points.length;

7 const center = getCenterOfPoints(points);

8 const centerPt = layer.coordinateToVector3(center);

9 const geometries = [], bars = [], geometriesAttributes = [], faceMap = [];

10 let faceIndex = 0, psIndex = 0, normalIndex = 0, uvIndex = 0;

11 for (let i = 0; i < len; i++) {

12 const opts = maptalks.Util.extend({ index: i }, OPTIONS1, points[i]);

13 const { radius, altitude, topColor, bottomColor, height, coordinate } = opts;

14 const r = layer.distanceToVector3(radius, radius).x;

15 const h = layer.distanceToVector3(height, height).x;

16 const alt = layer.distanceToVector3(altitude, altitude).x;

17 const buffGeom = defaultGeometry.clone();

18 buffGeom.scale(r * 2, r * 2, h);

19 const v = layer.coordinateToVector3(coordinate).sub(centerPt);

20 const parray = buffGeom.attributes.position.array;

21 for (let j = 0, len1 = parray.length; j < len1; j += 3) {

22 parray[j + 2] += alt;

23 parray[j] += v.x;

24 parray[j + 1] += v.y;

25 parray[j + 2] += v.z;

26 }

27 const position = buffGeom.attributes.position;

28 const normal = buffGeom.attributes.normal;

29 const uv = buffGeom.attributes.uv;

30 const index = buffGeom.index;

31 geometries.push({

32 position: position.array,

33 normal: normal.array,

34 uv: uv.array,

35 indices: index.array

36 });

37 const bar = new TestBox(coordinate, opts, material, layer);

38 bars.push(bar);

39

40 const faceLen = buffGeom.index.count / 3;

41 faceMap[i] = [faceIndex + 1, faceIndex + faceLen];

42 faceIndex += faceLen;

43

44 const psCount = buffGeom.attributes.position.count,

45 // colorCount = buffGeom.attributes.color.count,

46 normalCount = buffGeom.attributes.normal.count, uvCount = buffGeom.attributes.uv.count;

47 geometriesAttributes[i] = {

48 position: {

49 count: psCount,

50 start: psIndex,

51 end: psIndex + psCount * 3,

52 },

53 normal: {

54 count: normalCount,

55 start: normalIndex,

56 end: normalIndex + normalCount * 3,

57 },

58 // color: {

59 // count: colorCount,

60 // start: colorIndex,

61 // end: colorIndex + colorCount * 3,

62 // },

63 uv: {

64 count: uvCount,

65 start: uvIndex,

66 end: uvIndex + uvCount * 2,

67 },

68 hide: false

69 };

70 psIndex += psCount * 3;

71 normalIndex += normalCount * 3;

72 // colorIndex += colorCount * 3;

73 uvIndex += uvCount * 2;

74 }

75 super();

76 options = maptalks.Util.extend({}, { altitude: 0, layer, points }, options);

77 this._initOptions(options);

78 const geometry = maptalks.MergeGeometryUtil.mergeBufferGeometries(geometries);

79 this._createMesh(geometry, material);

80 const altitude = options.altitude;

81 const z = layer.distanceToVector3(altitude, altitude).x;

82 const v = centerPt.clone();

83 v.z = z;

84 this.getObject3d().position.copy(v);

85

86 this._faceMap = faceMap;

87 this._baseObjects = bars;

88 this._datas = points;

89 this._geometriesAttributes = geometriesAttributes;

90 this.faceIndex = null;

91 this._geometryCache = geometry.clone();

92 this.isHide = false;

93 this._colorMap = {};

94 this._initBaseObjectsEvent(bars);

95 this._setPickObject3d();

96 this._init();

97 }

98

99 // eslint-disable-next-line no-unused-vars

100 identify(coordinate) {

101 return this.picked;

102 }

103 }

 

3. 页面显示

 

 

4. 源码地址

https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo

查看原文