cesium 图层构建的那些事 (二十二)

我们来构建等高线图层
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
上一篇:nagios监控设置monitor告警的用户名和密码


下一篇:3.Android网络编程-http介绍