maptalks加载大量矢量数据三维

maptalks渲染3D线

MapTalks是由国人独立研发的WebGL三维地图。优点：独立的底层实现保证了拥有更多的性能优化手段;基于PBR的材质系统，让三维地图的呈现效果拥有了无限的可能; MapTalks是基于开放数据格式构建的，不会让用户受限于特定的数据格式或服务。  

加载少量数据时

new maptalks.LineString([坐标数据],{symbol:{},properties: {}})

 var line1 = new maptalks.LineString(
          [
            [102.84645706644051, 29.794716308410955],
            [102.84647297634683, 29.794720613465586],
          ],
          {
            symbol: {
              lineColor: "#1bbc9b",
              lineWidth: 3,
              textName: "{altitude}",
              textPlacement: "vertex",
            },
            properties: {
              altitude: 200, //altitude for all vertexes
            },
          }
        );

        var line2 = new maptalks.LineString(
          [
            [102.83645706644051, 29.794716308410955],
            [102.84647297634683, 29.794720613465586],
            [102.84947297634683, 29.794720613465586],
          ],
          {
            properties: {
              altitude: [400, 600, 1200], //seperate altitude for each vertex
            },
            symbol: {
              lineColor: "rgb(135,196,240)",
              lineWidth: 3,
              textName: "{altitude}",
              textPlacement: "vertex",
            },
          }
        );

        // line without alitutde
        var line0 = new maptalks.LineString(
          [
            [102.84645706644051, 29.794716308410955],
            [102.84647297634683, 29.794720613465586],
          ],
          {
            properties: {
              altitude: [0, 10, 400], //seperate altitude for each vertex
            },
            symbol: {
              lineColor: "#000",
              lineDasharray: [10, 5, 5],
              lineWidth: 3,
              textName: "0",
              textPlacement: "vertex",
            },
          }
        );
 
        new maptalks.VectorLayer("line", [line0, line1, line2], {
          enableAltitude: true,
        }).addTo(map);

此方法可以实现渲染少量数据加载，其中symbol 是设置，线的样式，properties.altitude 是设置线的高程（即线与地图平面的距离）

加载大量线数据

在加载大数据量的线数据时，就不能使用new maptalks.LineString() 方法了，此方法是异步，数据在遍历循环时，会出现有些关键属性还未加载完成就返回结果的情况，这会导致new出的数据，无法在地图上渲染；

其中字段_prjCoords是必不可少的，如果缺少则会报错：position 找不到，导致无法渲染；
实现方式：
大数据量的加载，采用加载geojson数据格式的数据，先加载geojson数据（在此之前如果有特殊要求需要可以先对数据进行处理），然后创建图层并添加到地图上，之后再使用addGeometry() 方法，将数据添加到地图上，最后就可以设置线的样式（如果有需求）；
geojson 数据格式：举例1条

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "SMID": "1",
                "序号": "1",
                "XH": "1",
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        103.84697561733094,
                        29.79329626361175
                    ],
                    [
                        103.84695407946725,
                        29.793349887487352
                    ]
                ]
            },
            "id": 1
        }
        ]
        }

      // dataLines 为geojson格式的线数据
      // 数据处理（添加了altitude 高程 属性）
        dataLines.map((item) => {
          item.properties.altitude = 40;
        });
        // 处理成支持maptalks可以渲染的格式
        var collection = maptalks.GeoJSON.toGeometry(dataLines);
        // 创建图层并添加到地图上，可以设置drawAltitude 辅助线（加载3D数据时有用（具有高程属性时））
        lineString = new maptalks.VectorLayer("line", {
          enableAltitude: true,
          //     drawAltitude : {  //辅助线
          //     lineWidth : 1,
          //     lineOpacity: 0.3,
          //     lineColor : '#ddd'
          //   }
        }).addTo(map);
        // 将数据添加到创建的图层中，进行渲染
        lineString.addGeometry(collection);
        
        // 设置 线样式
        collection.map((item) => {
            item.updateSymbol({
              lineColor: "#93a598",
              lineWidth: 10,
              //   lineDy: 4,  // y 偏移
              //   lineDx: 10, // x 偏移
              lineCap: "round",
              shadowBlur: -4,
              shadowColor: "#ccc",
              shadowOffsetX: -1,
              shadowOffsetY: 1,
              //   textName: '',  // 显示的文字
              lineOpacity: 0.9,
              textPlacement: "vertex",
            });
          });

注意
在设置高程altitude属性时，大数据量最好不要使用 setAltitude() 方法，这会导致数据加载很慢影响展示；
点、面 加载时也可使用此方法；
maptalks

个人学习总结，若有问题欢迎指正