我们来构建等高线图层
```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;
- }