Cesium中开启等高线渲染

viewer.scene.globe.enableLighting=true;

varminHeight=-414.0; // approximate dead sea elevationvarmaxHeight=8777.0; // approximate everest elevationvarcontourColor=Cesium.Color.RED.clone();
varcontourUniforms= {};
varshadingUniforms= {};

functiongetElevationContourMaterial() {
// Creates a composite material with both elevation shading and contour linesreturnnewCesium.Material({
fabric: {
type: "ElevationColorContour",
materials: {
contourMaterial: {
type: "ElevationContour",
        },
elevationRampMaterial: {
type: "ElevationRamp",
        },
        },
components: {
diffuse:
"contourMaterial.alpha == 0.0 ? elevationRampMaterial.diffuse : contourMaterial.diffuse",
alpha:
"max(contourMaterial.alpha, elevationRampMaterial.alpha)",
        },
      },
translucent: false,
      });
    }
varelevationRamp= [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
varslopeRamp= [0.0, 0.29, 0.5, Math.sqrt(2) /2, 0.87, 0.91, 1.0];
varaspectRamp= [0.0, 0.2, 0.4, 0.6, 0.8, 0.9, 1.0];
functiongetColorRamp(selectedShading) {
varramp=document.createElement("canvas");
ramp.width=100;
ramp.height=1;
varctx=ramp.getContext("2d");
varvalues;
if (selectedShading==="elevation") {
values=elevationRamp;
      } elseif (selectedShading==="slope") {
values=slopeRamp;
      } elseif (selectedShading==="aspect") {
values=aspectRamp;
      }
vargrd=ctx.createLinearGradient(0, 0, 100, 0);
grd.addColorStop(values[0], "#000000"); //blackgrd.addColorStop(values[1], "#2747E0"); //bluegrd.addColorStop(values[2], "#D33B7D"); //pinkgrd.addColorStop(values[3], "#D33038"); //redgrd.addColorStop(values[4], "#FF9742"); //orangegrd.addColorStop(values[5], "#ffd700"); //yellowgrd.addColorStop(values[6], "#ffffff"); //whitectx.fillStyle=grd;
ctx.fillRect(0, 0, 100, 1);
returnramp;
    }
// The viewModel tracks the state of our mini application.varviewModel= {
enableContour: false,
contourSpacing: 50.0,
contourWidth: 2.0,
selectedShading: "none",
changeColor: function () {
contourUniforms.color=Cesium.Color.fromRandom(
        { alpha: 1.0 },
contourColor      );
      },
    };
// Convert the viewModel members into knockout observables.Cesium.knockout.track(viewModel);
// Bind the viewModel to the DOM elements of the UI that call for it.vartoolbar=document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
functionupdateMaterial() {
varhasContour=viewModel.enableContour;
varselectedShading=viewModel.selectedShading;
varglobe=viewer.scene.globe;
varmaterial;
if (hasContour) {
if (selectedShading==="elevation") {
material=getElevationContourMaterial();
shadingUniforms=material.materials.elevationRampMaterial.uniforms;
shadingUniforms.minimumHeight=minHeight;
shadingUniforms.maximumHeight=maxHeight;
contourUniforms=material.materials.contourMaterial.uniforms;
      }else {
material=Cesium.Material.fromType("ElevationContour");
contourUniforms=material.uniforms;
      }
contourUniforms.width=viewModel.contourWidth;
contourUniforms.spacing=viewModel.contourSpacing;
contourUniforms.color=contourColor;
    } elseif (selectedShading==="elevation") {
material=Cesium.Material.fromType("ElevationRamp");
shadingUniforms=material.uniforms;
shadingUniforms.minimumHeight=minHeight;
shadingUniforms.maximumHeight=maxHeight;
    } 
if (selectedShading!=="none") {
shadingUniforms.image=getColorRamp(selectedShading);
    }
globe.material=material;
  }
updateMaterial();
Cesium.knockout.getObservable(viewModel, "enableContour").subscribe(function (newValue) {
updateMaterial();
    });
Cesium.knockout.getObservable(viewModel, "contourWidth").subscribe(function (newValue) {
contourUniforms.width=parseFloat(newValue);
    });
Cesium.knockout.getObservable(viewModel, "contourSpacing").subscribe(function (newValue) {
contourUniforms.spacing=parseFloat(newValue);
    });
Cesium.knockout.getObservable(viewModel, "selectedShading").subscribe(function (value) {
updateMaterial();
    });

<divclass="demo-container"><label><inputtype="radio"name="shadingMaterials"value="none"data-bind="checked: selectedShading">无渲染</label> <label><inputtype="radio"name="shadingMaterials"value="elevation"data-bind="checked: selectedShading">高程渲染</label></div><divclass="demo-container"><div><label><inputtype="checkbox"data-bind="checked: enableContour">等高线</label></div><div>高程<inputstyle="width: 136px; float: left; width: 100px;"type="range"min="1.0"max="500.0"step="1.0"data-bind="value: contourSpacing, valueUpdate: 'input', enable: enableContour"><spandata-bind="text: contourSpacing"></span>m</div><div>线宽<inputstyle="width: 125px; float: left; width: 100px;"type="range"min="1.0"max="10.0"step="1.0"data-bind="value: contourWidth, valueUpdate: 'input', enable: enableContour"><spandata-bind="text: contourWidth"></span>px</div><div><buttontype="button"data-bind="click: changeColor, enable: enableContour">颜色</button></div></div>