cesium 图层构建的那些事 （二十二）

我们来构建等高线图层

```javascript

import {Layer} from "./Layer";
import { GraphicLayer } from "./GraphicLayer";

export class IsoLineLayer extends Layer {
private option: any;
protected isAdd2LoadCesium = true;
constructor(option: any) {
super(option.name);
this.option = option;
}
public flyTo(duration?: number, pitch?: number, heading?: number, range?: number, maximumHeight?: number): this {
if (this.map) {
this.cesiumObj.flyTo(duration,pitch,heading,range,maximumHeight);
}
return this;
}
protected _addToMap(map: any): void {
this.cesiumObj = this.createIsoLine();
map.dataSources.add(this.cesiumObj);
}

• protected _removeByMap(destroy?: boolean): void {
• this.map.dataSources.remove(this.cesiumObj);
• }
• private createIsoLine(){
• var lines:any = this.getIsoLine();
• const levels = this.option.levels;
• const gl = new GraphicLayer();
• for(let index=0;index<lines.features.length;index++){
• const feature = lines.features[index];
• const coordinates = feature.geometry.coordinates
• let level:any = levels[feature.properties.value];
• const style = level ? level.style : {
• width: 5,
• material: Cesium.Color.RED
• };
• for(let i = 0;i < coordinates.length;i++){
• const positions = coordinates[i];
• gl.addByOption({
• id: index+"线"+ i,
• polyline: {
• positions: positions,
• ...style
• }
• });
• }
• }
• return gl;
• }
• //采用网格特征和点特征的z值和值断点数组并生成等值线。
• private getIsoLine() {
• const {points, levels} = this.option;
• const breaks = levels.map((level:any)=>{
• return level.value;
• })
• const features = points.map((item:any)=>{
• const p = turf.point(item.coordinates);
• p.properties!.value = item.value;
• return p;
• });
• var collection:any = turf.featureCollection(features);
• var lines = turf.isolines(collection, breaks, {zProperty: 'value'});
• return lines;
• }

 更多参考 https://xiaozhuanlan.com/topic/0792451836