[JavaScript知识库]Cesium解析txtdexgeojsonshpfile-zip

cesium解析txt,dxf,shpfile的zip,geojson文件

geojson的文件,读取后直接就是geojson格式,cesium有相对应的示例可以直接加载,所以没有过多要说的.

dxf文件是借助一个js库读取的,返回的也是geojson格式.同样用来直接加载即可

shpfile解析同dxf文件的解析步骤

txt文件由于参数过于特殊,而且并没有找到一些相对应的工具库,所以自己去解析的,对于格式有很大的局限性,目前支持一种格式,稍微我会把格式分享出来,仅供参考
话不多说,上代码 ?

  const axios = require('axios');
        let fileType = params.fileUrl
          .split('.')
          .pop()
          .toLowerCase();
        let FormParams = {
          url: `/getFile${params.fileUrl}`,
          method: 'get',
          headers: {
            needToken: true
          }
        };
        if (fileType == 'zip') FormParams.responseType = 'arraybuffer';
        axios(FormParams).then(res => {
          switch (fileType) {
            case 'dxf':
              let blob = new Blob([res.data], {
                type: 'application/octet-stream'
              }); 
              let files = new window.File([blob], 'admin.dfx', {
                type: 'application/octet-stream'
              });
              this.setDXF(files);
              break;
            case 'geojson':
              if (res.status == 200) {
                // console.log(res.data);
                let sourceData = Cesium.GeoJsonDataSource.load(res.data);
                this.viewer.dataSources.add(sourceData);
                this.viewer.flyTo(sourceData);
              }
              break;
            case 'txt':
              this.setTxt('', res.data);
              break;
            case 'zip':
              let ziPblob = new Blob([res.data], {});
              let zipFile = new window.File([ziPblob], 'admin.zip', {});
              this.setShpfile(zipFile);
              break;
            default:
              break;
          }
        });

解析txt文件

//设置txt文件
    setTxt(file, data) {
      let reader;
      let showTxt = resultStr => {
        let dxzb_index = resultStr.indexOf('[地块坐标]');
        //处理参数配置部分 object
        let option = {};
        let startIndex = resultStr.indexOf(']') + 1;
        let optionResult = resultStr
          .slice(startIndex, dxzb_index)
          .replace(/=/g, ':')
          .split('\n');
        optionResult.forEach((item, index) => {
          if (item.indexOf(':') == -1) optionResult.splice(index, 1);
        });
        optionResult.forEach(item => {
          item = item.slice(0, item.search('\r'));
          let n = item.search(':');
          let key = item.slice(0, n);
          let val = item.slice(n + 1, item.length);
          option[key] = val;
        });
        //处理下方坐标
        let features = [];
        let featuresResult = resultStr.slice(dxzb_index + 6, resultStr.length);
        featuresResult = JSON.stringify(featuresResult).replace(/\r/g, '0');
        let label = featuresResult.split(',').splice(0, 2)[1];
        let featuresList = featuresResult.split(label);
        let type = '';
        featuresList.splice(0, 1);
        featuresList.forEach((item, index) => {
          item = item.slice(1, item.length);
          let time = item.slice(0, item.indexOf(','));
          let nameStr = item.slice(item.indexOf(',') + 1, item.length);
          let name = nameStr.slice(0, nameStr.indexOf(','));
          let Types = nameStr.slice(
            nameStr.indexOf(',') + 1,
            nameStr.indexOf(',,,,')
          );
          switch (Types) {
            case '点':
              type = 'Point';
              break;
            case '线':
              type = 'LineString';
              break;
            case '面':
              type = 'Polygon';
              break;
            case '多点':
              type = 'MultiPoint';
              break;
            case '多线':
              type = 'MultiLineString';
              break;
            case '多面':
              type = 'MultiPolygon';
              break;
            default:
              break;
          }
          let rings = [];
          let coodStr = nameStr.slice(nameStr.indexOf('@') + 1, nameStr.length);
          let coodList = coodStr.split('\\r\\n');
          coodList.splice(0, 1);
          coodList[coodList.length - 1] = coodList[0];
          if (index + 1 != featuresList.length) {
            coodList.splice(-1, 1);
          }
          coodList.forEach((Item, Index) => {
            let list = Item.split(',');
            list.splice(0, 2);
            list = [Number(list[0]), Number(list[1])];
            rings.push(list);
          });
          features.push({
            name,
            time,
            type,
            rings
          });
        });
        // 解析TXT文件后 组合的数据
        let OBJECT = {
          options: {},
          features: [],
          geometry: {
            rings: []
          }
        };
        OBJECT.options = option;
        OBJECT.features = features;
        features.forEach(ele => {
          OBJECT.geometry.rings.push(ele.rings);
        });
        // console.log(OBJECT);
        let e;
        switch (type) {
          case 'Point':
            e = overlayUtils.createPoint(OBJECT, this.viewer);
            break;
          case 'LineString':
            e = overlayUtils.createPolyline(OBJECT, this.viewer);
            break;
          case 'Polygon':
            e = overlayUtils.createPolygon(OBJECT, this.viewer);
            break;
          default:
            break;
        }
        if (e) this.viewer.zoomTo(e);
      };

解析shpfile压缩包

// 解析shp
    setShpfile(file) {
      const shapefile = require('shpjs'); //一个js库
      let reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = () => {
        shapefile(reader.result).then(data => {
          let sourceData = Cesium.GeoJsonDataSource.load(data);
          this.viewer.dataSources.add(sourceData);
          this.viewer.flyTo(sourceData);
        });
      };
    },

解析dxf

//设置dxf文件
    setDXF(file) {
      console.group('解析 DXF文件');
      let data = new FormData();
      data.append('upload', file);
      //利用的是Ogre在线post请求  http://ogre.adc4gis.com/
      axios({
        method: 'POST',
        url: 'http://ogre.adc4gis.com/convert',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data
      }).then(res => {
        // console.log(res);
        let sourceData = Cesium.GeoJsonDataSource.load(res);
        this.viewer.dataSources.add(sourceData);
        this.viewer.flyTo(sourceData);
      });
    },