vue + cesium加载krigingjs插件库生成等值线图

一、效果图集

图一

图二

图三 

 二、核心代码

        1.调用drawKriging传入参数

    // lons：经度数组
    // lats：纬度数组
    // values：已知的值数组
    // coords：是一个cesium的数据格式，[114,25,114,23,114,22],不用闭合，就一个面上所有点。
    // cartesian3List：是Cartesian3格式的面的数组
    // optionsValues： 自定义属性
    drawKriging(lngs, lats, values, coords, cartesian3List, optionsValues) {
      if (values.length > 3) {
        const polygon = new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(cartesian3List)
        })

        //构造面，方便计算范围
        let extent = Cesium.PolygonGeometry.computeRectangle({
          polygonHierarchy: new Cesium.PolygonHierarchy(cartesian3List)
        })

        let canvas = this.getCanvas(values, lngs, lats, coords, extent, this.colors, optionsValues)
        if (canvas != null) {
          let ent = cesiumContourViewer.entities.add({
            polygon: {
              hierarchy: cartesian3List,
              material: new Cesium.ImageMaterialProperty({
                image: canvas,//使用贴图的方式将结果贴到面上
                alpha: 0.6
              }),
              perPositionHeight: this.perPositionHeight === '0' ? false : true, // 指定是否使用每个位置的高度。
              extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            }
          });
          floatingPointList.push(ent)
        }
      }
    },

        2.计算canvas画布宽和高

    // 计算画布的宽度和高度
    getCanvasWidthOrHeight(defaultsValues, optionsValues, extent){
      // 将经纬度坐标转换为网络墨卡托投影
      var WMP = new Cesium.WebMercatorProjection();
      var sw = WMP.project(Cesium.Cartographic.fromDegrees(extent.west, extent.south));
			var ne = WMP.project(Cesium.Cartographic.fromDegrees(extent.east, extent.north));
			let webMercatorExtent = {
				north: ne.y,
				east: ne.x,
				south: sw.y,
				west: sw.x
			};
      
      defaultsValues.width = ((webMercatorExtent.east > 0 && webMercatorExtent.west < 0) ? webMercatorExtent.east + Math.abs(webMercatorExtent.west) : Math.abs(webMercatorExtent.east - webMercatorExtent.west));
	    defaultsValues.height = ((webMercatorExtent.north > 0 && webMercatorExtent.south < 0) ? webMercatorExtent.north + Math.abs(webMercatorExtent.south) : Math.abs(webMercatorExtent.north - webMercatorExtent.south));

      if (defaultsValues.width > defaultsValues.height && defaultsValues.width > defaultsValues.maxCanvasSize) {
        defaultsValues.factor = defaultsValues.width / defaultsValues.maxCanvasSize;

        if (defaultsValues.height / defaultsValues.factor < defaultsValues.minCanvasSize) {
          defaultsValues.factor = defaultsValues.height / defaultsValues.minCanvasSize;
        }
      } else if (defaultsValues.height > defaultsValues.width && defaultsValues.height > defaultsValues.maxCanvasSize) {
        defaultsValues.factor = defaultsValues.height / defaultsValues.maxCanvasSize;

        if (defaultsValues.width / defaultsValues.factor < defaultsValues.minCanvasSize) {
          defaultsValues.factor = defaultsValues.width / defaultsValues.minCanvasSize;
        }
      } else if (defaultsValues.width < defaultsValues.height && defaultsValues.width < defaultsValues.minCanvasSize) {
        defaultsValues.factor = defaultsValues.width / defaultsValues.minCanvasSize;

        if (defaultsValues.height / defaultsValues.factor > defaultsValues.maxCanvasSize) {
          defaultsValues.factor = defaultsValues.height / defaultsValues.maxCanvasSize;
        }
      } else if (defaultsValues.height < defaultsValues.width && defaultsValues.height < defaultsValues.minCanvasSize) {
        defaultsValues.factor = defaultsValues.height / defaultsValues.minCanvasSize;

        if (defaultsValues.width / defaultsValues.factor > defaultsValues.maxCanvasSize) {
          defaultsValues.factor = defaultsValues.width / defaultsValues.maxCanvasSize;
        }
      }

      defaultsValues.width = defaultsValues.width / defaultsValues.factor;
      defaultsValues.height = defaultsValues.height / defaultsValues.factor;

      // 如果未设定半径，则使用数据点大小因子（高度和宽度中的较大者除以这个数字产生使用的半径）
	    optionsValues.radius = Math.round((optionsValues.radius) ? optionsValues.radius : ((defaultsValues.width > defaultsValues.height) ? defaultsValues.width / defaultsValues.radiusFactor : defaultsValues.height / defaultsValues.radiusFactor));

      // 间距计算(点半径乘以间距系数产生间距)
    	let spacing = optionsValues.radius * defaultsValues.spacingFactor;

      // 计算canvas的最终宽度和高度
      defaultsValues.width = Math.round(defaultsValues.width + spacing * 2);
      defaultsValues.height = Math.round(defaultsValues.height + spacing * 2);

      return defaultsValues
    }

        3.等值线生计算及canvas画布生成

    //等值线计算canvas画布生成
    getCanvas(values, lngs, lats, coords, extent, colors, optionsValues) {
      let defaultsValues = {
        factor: 1, // 默认值
        minCanvasSize: 700, // 热力图画布的最大尺寸(以像素为单位) 默认值
				maxCanvasSize: 2000, // 热力图画布的最大尺寸(以像素为单位) 默认值
        radiusFactor: 60, // 半径因子(如果没有给出半径，则使用数据点大小因子（高度和宽度中的较大者除以这个数字产生使用的半径）) 默认值
        spacingFactor: 1.5, // 间距系数( 边界周围的额外空间（点半径乘以这个数字产生间距）) 默认值
      }

      //范围（弧度）
      let minx = Cesium.Math.toDegrees(extent.west);//转换为经纬度
      let miny = Cesium.Math.toDegrees(extent.south);
      let maxx = Cesium.Math.toDegrees(extent.east);
      let maxy = Cesium.Math.toDegrees(extent.north);

      let degreesExtent = {west: minx, south:miny, east: maxx, north: maxy}
      defaultsValues = this.getCanvasWidthOrHeight(defaultsValues, optionsValues, degreesExtent)

      let canvas = null;
      //1.用克里金训练一个variogram对象
      let variogram = kriging.train(values, lngs, lats, 'exponential', 0, 100);

      //2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；最后一个参数，是插值格点精度大小【(maxy - miny) / 300】/300值越大精度越高，
      let grid = kriging.grid(coords, variogram,(maxy - miny) / 450);
      canvas = document.createElement('canvas');
      canvas.width = defaultsValues.width;
      canvas.height = defaultsValues.height;
      canvas.style.display = 'none';
      canvas.getContext('2d').globalAlpha = this.canvasGlobalAlpha;//设置透明度
      
      //3.将得到的格网预测值渲染到canvas画布上
      canvas = kriging.plot(canvas, grid, [minx, maxx], [miny, maxy], colors);
      return canvas
    }

三、等值线色带配置

         色带加载 方式一

let colors:[
        { min: 100, max: 9999, color: "#FF0000" },
        { min: 95, max: 100, color: "#FF4100" },
        { min: 90, max: 95, color: "#FF8100" },
        { min: 85, max: 90, color: "#FFC200" },
        { min: 80, max: 85, color: "#FDFF00" },
        { min: 75, max: 80, color: "#CFFF00" },
        { min: 70, max: 75, color: "#A1FF00" },
        { min: 65, max: 70, color: "#73FF00" },
        { min: 60, max: 65, color: "#46FF00" },
        { min: 55, max: 60, color: "#18FF00" }, 
        { min: 50, max: 55, color: "#00FF17" }, 
        { min: 45, max: 50, color: "#00FF49" }, 
        { min: 40, max: 45, color: "#00FF7A" }, 
        { min: 35, max: 40, color: "#00FFAB" }, 
        { min: 30, max: 35, color: "#00FFDD" }, 
        { min: 25, max: 30, color: "#00F0FF" }, 
        { min: 20, max: 25, color: "#00C0FF" }, 
        { min: 15, max: 20, color: "#0090FF" }, 
        { min: 10, max: 15, color: "#0060FF" }, 
        { min: 5, max: 10, color: "#0030FF" }, 
        { min: 0, max: 5, color: "#0000FF" }, 
      ]

        色带加载 方式二

let colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"];

四、krigingjs插件库（已修改源码）

        krigingjs：下载krigingjs插件库

        下载后将文件添加到static静态文件下，引用方式如下：

import kriging from "../../static/kriging/kriging"