我们来构建等高线图层
```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
网友评论