其他分享
首页 > 其他分享> > maptalks 开发GIS地图(13)maptalks.three.06 bars

maptalks 开发GIS地图(13)maptalks.three.06 bars

作者:互联网

1. 说明

使用柱状图,并根据音乐节奏显示动画效果。

 

2. 初始化地图并添加threelayer

 1   var map = new maptalks.Map("map", {
 2             center: [19.06325670775459, 42.16842479475318],
 3             zoom: 3,
 4             pitch: 60,
 5             // bearing: 180,
 6 
 7             centerCross: true,
 8             doubleClickZoom: false,
 9             // baseLayer: new maptalks.TileLayer('tile', {
10             //     urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
11             //     subdomains: ['a', 'b', 'c', 'd'],
12             //     attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
13             // })
14         });
15 
16         // the ThreeLayer to draw buildings
17         var threeLayer = new maptalks.ThreeLayer('t', {
18             forceRenderOnMoving: true,
19             forceRenderOnRotating: true
20             // animation: true
21         });
22         threeLayer.prepareToDraw = function (gl, scene, camera) {
23             stats = new Stats();
24             stats.domElement.style.zIndex = 100;
25             document.getElementById('map').appendChild(stats.domElement);
26 
27             var light = new THREE.DirectionalLight(0xffffff);
28             light.position.set(0, -10, 10).normalize();
29             scene.add(light);
30 
31             scene.add(new THREE.AmbientLight(0xffffff, 0.2));
32 
33             // camera.add(new THREE.PointLight(0xffffff, 1));
34 
35             addBars(scene);
36 
37         };
38         threeLayer.addTo(map);

 

3. 添加数据

  1 function addBars(scene) {
  2             fetch('./data/population.json').then((function (res) {
  3                 return res.json();
  4             })).then(function (json) {
  5                 const data = json.filter(function (dataItem) {
  6                     return dataItem[2] > 0;
  7                 }).map(function (dataItem) {
  8                     dataItem[2] *= 400;
  9                     min = Math.min(min, dataItem[2]);
 10                     max = Math.max(max, dataItem[2]);
 11                     return {
 12                         coordinate: dataItem.slice(0, 2),
 13                         height: dataItem[2],
 14                         radius: 15000,
 15                         // topColor: '#fff'
 16                     }
 17                 }).slice(0, Infinity);
 18                 const colorMap = {};
 19                 data.forEach(d => {
 20                     const { height } = d;
 21                     const color = getColor(height);
 22                     if (!colorMap[color]) {
 23                         const m = material.clone();
 24                         m.color.set(color);
 25                         colorMap[color] = {
 26                             data: [],
 27                             material: m
 28                         }
 29                     }
 30                     colorMap[color].data.push(d);
 31                 });
 32                 console.log(colorMap);
 33                 const time = 'time';
 34                 console.time(time);
 35                 for (let color in colorMap) {
 36                     const { data, material } = colorMap[color];
 37                     const mesh = threeLayer.toBars(data, { interactive: false }, material);
 38                     bars.push(mesh);
 39                 }
 40                 console.timeEnd(time);
 41                 bars.forEach(mesh => {
 42                     mesh.setToolTip('hello', {
 43                         showTimeout: 0,
 44                         eventsPropagation: true,
 45                         dx: 10
 46                     });
 47 
 48                     //infowindow test
 49                     mesh.setInfoWindow({
 50                         content: 'hello world',
 51                         title: 'message',
 52                         animationDuration: 0,
 53                         autoOpenOn: false
 54                     });
 55 
 56                     //event test
 57                     ['click', 'mousemove', 'empty', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
 58                         mesh.on(eventType, function (e) {
 59                             // console.log(e.type);
 60                             const select = e.selectMesh;
 61                             if (e.type === 'empty' && selectMesh.length) {
 62                                 threeLayer.removeMesh(selectMesh);
 63                                 selectMesh = [];
 64                             }
 65 
 66                             let data, baseObject;
 67                             if (select) {
 68                                 data = select.data;
 69                                 baseObject = select.baseObject;
 70                                 if (baseObject && !baseObject.isAdd) {
 71                                     baseObject.setSymbol(highlightmaterial);
 72                                     threeLayer.addMesh(baseObject);
 73                                     selectMesh.push(baseObject);
 74                                 }
 75                             }
 76 
 77 
 78                             if (selectMesh.length > 20) {
 79                                 threeLayer.removeMesh(selectMesh);
 80                                 selectMesh = [];
 81                             }
 82 
 83 
 84                             // override tooltip
 85                             if (e.type === 'mousemove' && data) {
 86                                 const height = data.height;
 87                                 const tooltip = this.getToolTip();
 88                                 tooltip._content = `height:${height}`;
 89                             }
 90                             //override infowindow
 91                             if (e.type === 'click' && data) {
 92                                 const height = data.height;
 93                                 const infoWindow = this.getInfoWindow();
 94                                 infoWindow.setContent(`height:${height}`);
 95                                 if (infoWindow && (!infoWindow._owner)) {
 96                                     infoWindow.addTo(this);
 97                                 }
 98                                 this.openInfoWindow(e.coordinate);
 99 
100                             }
101                         });
102                     });
103                 });
104                 console.log(bars);
105                 threeLayer.addMesh(bars);
106                 initGui();
107                 animation();
108             });
109         }

 

4. 数据使用的是 ./data/population.json

这里的是数据原始格式:

 

 

下面的这段代码,将这个数据重新生成了一次,把前两个数据作为 coordinate,将最后一个数据乘以 400 作为高度。

然后将 15000 作为了圆柱的半径。

1  dataItem[2] *= 400;
2  min = Math.min(min, dataItem[2]);
3  max = Math.max(max, dataItem[2]);
4  return {
5        coordinate: dataItem.slice(0, 2),
6        height: dataItem[2],
7        radius: 15000,
8        // topColor: '#fff'
9 }

 

最终的数据变为了下面的样式。

别问我那个数据为啥是 440.00000000000006

标签:13,GIS,dataItem,color,maptalks,height,const,data,selectMesh
来源: https://www.cnblogs.com/googlegis/p/14722308.html