GIS学习

gis开发

已于 2024-01-17 09:42:33 修改

阅读量34

点赞数

分类专栏： webGIS 前端 cesium 文章标签：学习

于 2023-03-01 14:21:12 首次发布

本文链接：https://blog.csdn.net/qq_32290021/article/details/126316016

版权

webGIS 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

cesium

1 篇文章 0 订阅

订阅专栏

更新数据代码数据服务跟新或者增加数据超图服务

wfs查询DEM

fetch请求

防抖操作

cesium 东8时需要增加8 个小时时间

GIS行业

电力

智慧高速物联网

将传感器加载出来，加载地图，地图导航，上下游关系，BIM模型加载，三维态势显示

webgl，3dtiles，切斜摄影合成，D3,three.js

GIS后端 turf ,geoserver shp文件发布，数据导入数据库 oracal mysql

后端 geotool,springboot

地理相关软件开发

数据收集 app 收集信息

数据处理，地理挖掘

粮食

three.js面试问题

点在线路上跳转效果（点精灵）
模型沿着线路运动

GIS相关问题

sld_body 动态改变样式
sld函数改变

拓扑关系：点线面关联、邻接、包含

js组件

(function ($) {
      //....封装组件逻辑
})(jQuery);

var fn = function($){
       //.....组件封装逻辑
};
fn(jQuery);

（2）定义自己的组件的代码：

$.fn.combobox = function (options, param) {
    
};

习惯这种写法的应该知道，这个就表示向jquery对象添加自定义方法，比如你想使用文章开始的 $("#id").MyJsControl({}) 这种用法，你就可以这样定义 $.fn.MyJsControl=function(options){} 。

什么是组件？组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元

一个好的组件特点：
封装性、正确性、扩展性、复用性。

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？
以上问题是面试官，最常问到的问题？那么你应该如何回答呢？
答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目，每个 .vue单文件就是一个组件。在另一组件import 导入，并在components中注册，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。组件封装无非就是组件间通信或者复杂一些嵌套的组件通过使用slot插槽来实现等等。

钩子

在插件的API中，我们常常将容易被修改和变动的方法或属性统称为钩子(Hook)，方法则直接叫钩子函数。

cesium 源码

3dtiles 数据加载

数据加载性能

框架架构

框架和架构的关注点是不一样的，框架关注的是规范；而架构关注的是结构

但包含的信息却很丰富，基本上把系统、子系统、模块、组件、架构等概念都串起来了

业务架构是战略，应用架构是战术，技术架构是装备。其中应用架构承上启下，一方面承接业务架构的落地，另一方面影响技术选型。

熟悉业务，形成业务架构，根据业务架构，做出相应的应用架构，最后技术架构落地实施。

如何针对当前需求，选择合适的应用架构，如何面向未来，保证架构平滑过渡，这个是软件开发者，特别是架构师，都需要深入思考的问题。

一、业务架构（俯视架构）：
包括业务规划，业务模块、业务流程，对整个系统的业务进行拆分，对领域模型进行设计，把现实的业务转化成抽象对象。

没有最优的架构，只有最合适的架构，一切系统设计原则都要以解决业务问题为最终目标，脱离实际业务的技术情怀架构往往会给系统带入大坑，任何不基于业务做异想天开的架构都是耍流氓。

所有问题的前提要搞清楚我们今天面临的业务量有多大，增长走势是什么样，而且解决高并发的过程，一定是一个循序渐进逐步的过程。合理的架构能够提前预见业务发展1~2年为宜。这样可以付出较为合理的代价换来真正达到技术引领业务成长的效果。

cesium 总览

场景对象中可以控制：globe椭圆体（imageryLayers底图、terrainProvider地形）、camera相机、skyBox天空盒、sun太阳、moon月亮、primitives默认矢量数据层、postProcessStage后处理效果等。

cesium组件封装

requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名(去掉拓展名)
dependencies：是一个当前模块依赖的模块名称数组
factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

在页面上使用require函数加载模块

require([dependencies], function(){});

require()函数接受两个参数

第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

倾斜摄影

单体化对每个目标进行建模

地图组件

地图图层服务

核密度

空间分析

大数据量加载

地图导出

专题图地图加载

目录树

军标显示

态势效果

(1）Primitive ：创建方式更接近渲染引擎底层，需要初始化很多对象，比如外观(Appearance)、几何形状(Geometry)等，使用相对繁琐。但相对为Primitive添加材质会方便很多

（2）Entity ：对Primitive封装后的高级对象，调用便捷

（3）Material ：专为Appearance类而生，用于修改Primitive的几何对象材质。同时，Appearance也有自己的继承类，通过修改部分继承类的material属性，也可以实现Primitive几何对象材质的修改

（4）MaterialProperty ：专为Entity而生的一个抽象类，通过实例化其子类，对Entity几何对象进行材质设置

Primitive创建方式

Primitive对象的自定义可视化，Cesium为其提供了Appearance和Material对象。其中，Material只负责片段着色器中材质部分的代码，而Appearance负责该Primitive整个Shader的代码，包括顶点着色器和片段着色器两个部分。可以理解为Appearance为Material之上的又一层封装，负责将Material赋给对应的Primitive对象。

Appearance对象一共有MaterialAppearance、EllipsoidSurfaceAppearance和PolylineMaterialAppearance等六类，每个对象的属性值不同，但大同小异，逻辑上统一由Appearance来负责。比如创建一个PolylineGeometry对象，需要的是PolylineColorAppearance或PolylineMaterialAppearance类。

关于Appearance中的属性值Material，Cesium为其提供了三种创建方式：

（1）Material.fromType：Cesium默认提供了二十四种类型，比如ColorType、ImageType等，可以修改其中的uniforms属性值

（2）new Cesium.Material()：默认Material

（3）通过fabric方式定义：用户自定义指定type，uniforms，source等属性，构建一个Fabric的JSON

	let source =`czm_material czm_getMaterial(czm_materialInput materialInput)
	                        {
	                           czm_material material = czm_getDefaultMaterial(materialInput);
	                           vec2 st = materialInput.st;
	                           vec4 colorImage = texture2D(image, vec2(fract((st.s - speed * czm_frameNumber * 0.001)), st.t));
	                           material.alpha = colorImage.a * color.a;
	                           material.diffuse = color.rgb;
	                           return material;
	                        }`;
	
	        let material = new Cesium.Material({
	            fabric: {
	                uniforms: {
	                    color: Cesium.Color.fromCssColorString('#7ffeff'),
	                    image: '/static/images/colors1.png',
	                    speed: 10,
	                },
	                source: source,
	            },
	            translucent: function () {
	                return true
	            },
	        });

var appearance=new Cesium.PolylineMaterialAppearance();
	appearance.material = material;

viewer.scene.primitives.add(
            new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.PolylineGeometry({
                        positions: this.getCurvePositions(startPoint, endPoint),
                        width: 3.0,
                    }),
                }),
                appearance: appearance
            })
	);

Entity是Primitive的高级封装，初始化方式也简单，Cesium也为其提供了部分默认材质样式，对应的接口为MaterialProperty类，比如：

ColorMaterialProperty：颜色材质
GridMaterialProperty：网格材质
ImageMaterialProperty：贴图材质
CheckerboardMaterialProperty：棋盘纹理材质
StripeMaterialProperty：条纹纹理材质
PolylineGlowMaterialProperty：线发光材质
PolylineOutlineMaterialProperty：线外轮廓材质
PolylineArrowMaterialProperty：带箭头的线材质
PolylineDashMaterialProperty：虚线材质

billboard

distanceDisplayCondition:DistanceDisplayCondition

根据id 查询primitive

getGeometryInstanceAttributes

单体化倾斜模型点击高亮操作

立体热度图

而立体热力图是生成一个顶点足够密集的面，再根据热力图上的颜色信息拉伸顶点罢了

v var p1 = Cesium.Cartesian3.fromDegrees(120.6822, 40.9247, 2000);
      var p2 = Cesium.Cartesian3.fromDegrees(120.6822, 39.9247, 100);
      var p3 = Cesium.Cartesian3.fromDegrees(121.6822, 39.9247, 8000);
      var p4 = Cesium.Cartesian3.fromDegrees(121.6822, 40.9247, 500);
      var p5 = Cesium.Cartesian3.fromDegrees(122.7822, 40.9247, 100);
      // var positions = new Float64Array([
      //     p1.x, p1.y, p1.z,
      //     p2.x, p2.y, p2.z,
      //     p3.x, p3.y, p3.z,
      //     p4.x, p4.y, p4.z,
      //     p5.x, p5.y, p5.z
      // ]);
      // var colors = new Float32Array([
      //     1.0, 0.0, 0.0, 1.0,
      //     0.0, 1.0, 0.0, 1.0,
      //     1.0, 1.0, 0.0, 1.0,
      //     1.0, 1.0, 1.0, 1.0,
      //     1.0, 1.0, 0.0, 1.0,
      // ]);
      var geometry = new Cesium.Geometry({
          attributes: {
              position: new Cesium.GeometryAttribute({
                  componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                  componentsPerAttribute: 3,
                  values: positions
              }),
              color: new Cesium.GeometryAttribute({
                  componentDatatype: Cesium.ComponentDatatype.FLOAT,
                  componentsPerAttribute: 4,
                  values: colors
              })
          },
          //索引
          indices,
          // indices:new Uint16Array([0,1,2,1,2,3,3,2,4]),
          //绘制类型
          primitiveType: Cesium.PrimitiveType.TRIANGLE_FAN,
          boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
      });
      

       // appearance: new Cesium.MaterialAppearance({
          //       closed: false,
          //       //translucent: false,
          //       material: material
          //   }),
          var material = new Cesium.Material({
            fabric: {
                // type: "DiffuseMap",
                uniforms: {
                    image: imgLogo,
                },
            },
        });

      //加入场景
      smviewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances:   new Cesium.GeometryInstance({geometry}),
          appearance: new Cesium.PerInstanceColorAppearance({
            flat: true,
            translucent: false,
          }),
          // appearance: new Cesium.MaterialAppearance({
          //       closed: false,
          //       //translucent: false,
          //       material: material
          //   }),
   
          asynchronous: false,
        })
      )

直线裸颜色

let pri = new Cesium.GroundPolylinePrimitive({
        //贴地
        geometryInstances: new Cesium.GeometryInstance({
          geometry: new Cesium.GroundPolylineGeometry({
            //贴地线
            positions,
            width: 10.0,
            vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              new Cesium.Color(1.0, 1.0, 1.0, 1.0)
            ),
          },
        }),
        appearance: new Cesium.PolylineColorAppearance({
            translucent:false
        }),
      });

geometry.的geometryInstances 信息查看

this.channelCollection1._primitives[0]._primitiveOptions

Delaunay 三角网

确保不会有任何折点位于网络中各三角形的外接圆内部即所有的点都是三角形外接圆上的点

Delaunay三角网或Voronoi 图

depthTestAgainstTerrain false 显示在最高层忽略高度

wmts

TilingSchemee有两个子类，为WebMercatorTilingScheme和GeographicTilingScheme。其中WebMercatorTilingScheme对应于EPSG:3857切片方案，常见于谷歌地图、微软必应地图以及大多数的ArcGIS在线地图，也是Cesium中默认的切片方案。

GeographicTilingScheme对应于EPSG:4326切片方案，是一个简单的地理投影方案，可直接将经纬度映射为X和Y，这种投影通常被称为地理投影、等矩形投影、等距圆柱形投影等。

由于在X方向上，WebMercatorTilingScheme只有一个0级瓦片，而GeographicTilingScheme却有2个，这就导致了默认的EPSG:3857切片方案不能正确加载EPSG:4326切片方案的瓦片图像。

var cc = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://localhost:8090/iserver/services/map-fendaiIMG-2/wmts100',
      layer: 'dendaiIMG',
      style: 'default',
      format: 'image/png',
      tileMatrixSetID: 'Custom_dendaiIMG',
      // tileMatrixLabels: matrixIds,
      tilingScheme: new Cesium.GeographicTilingScheme({
          //ellipsoid: Cesium.Ellipsoid.CGCS2000,
          numberOfLevelZeroTilesX: 2,
          numberOfLevelZeroTilesY: 1,
          rectangle: new Cesium.Rectangle.fromDegrees(103.7897939428614, 30.275331106303852, 104.04754722756944, 30.67217167116047)
      })
    }));

视角锁定取消

1、当添加一个entity对象后，我们双击entity对象，可以对对象进行定位，并且视角也会锁定到这个entity对象上，当需要取消锁定时，我们可以直接设置viewer.trackedEntity =undefined;即可取消视角锁定。
2、当对当前场景使用viewer.camera.lookAt系列方法后，视角也会锁定到设定参数。可以设置viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY) ，取消lookat的视角锁定

cesium 需要显卡，否则很多cesium包加载的billboard图片的边界有锯齿状

webgl 显示

chrome://flags/

3dtiles 颜色变化不要绑到vue 组件内

var promise = viewer.scene.open(url,undefined, { autoSetView: false });

canvas 比例变化

let scale = window.devicePixelRatio;

document.getElementById("cesiumCanvas").width = window.innerWidth * scale;

document.getElementById("cesiumCanvas").height = window.innerHeight * scale;

飞行看向对象高度设定

viewer.flyTo(entity,{
                offset : {
                    heading : Cesium.Math.toRadians(0.0), // 以弧度为单位的航向角。
                    pitch : Cesium.Math.toRadians(-30),  // 以弧度为单位的俯仰角。
                    range : 250        // 到中心的距离，以米为单位。
                }
            })

billboard offset 偏移

pixelOffsetScaleByDistance:new Cesium.NearFarScalar(
                1000,
                1.0,
                1500000,
                0),
            translucencyByDistance: new Cesium.NearFarScalar(
                1000,
                1.0,
                1500000,
                0.1),

获取地形高度

viewer.scene.globe.getHeight(Cesium.Cartographic.fromDegrees(104, 30.5))

模型设置

uri: 模型的URL地址。

scale: 模型缩放比例。

minimumPixelSize: 模型最小显示像素大小。

maximumScale: 模型最大缩放比例。

node 组件添加

更新位置局部坐标

 if(data?.detail){
                if(data.detail.model.type=='GLTF'){
                    var pattern = /闸门/i;
                    if( pattern.test(data.detail.node._name)){
                        this.entity=data
                        this.form={
                            lng:103.603531,
                            lat:31.008250,
                            alt:689.8,
                            id:1,
                            model:'./model/wjz.glb',
                            flyTo:true
                        }
                        const {node,primitive,model}=data.detail
                        const {x,y,z}=node.translation
                        node.translation={x,y:y+10,z}
                    }
                    

                }
            }

高程坐标

最大最小缩放高程

// 最小缩放高度（米）
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
// 最大缩放高度（米）
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 100000;

超图设置椭圆形状cesium

var obj = [6378137.0, 6378137.0, 6356752.3142451793];
Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));

geoserver 更新数据

function loadWFS() {
  // generate a GetFeature request
  const featureRequest = new WFS().writeGetFeature({
    srcName: 'EPSG:4326',
    featureNS: '/geoserver/ncgw/wfs',
    featureTypes: ['ncgw:line'],
    outputFormat: 'application/json',
  });

  // then post the request and add the received features to a layer
  fetch('/geoserver/ncgw/wfs', {
    method: 'POST',
    body: new XMLSerializer().serializeToString(featureRequest),
  }).then(function (response) {
      return response.json();
    }).then(function (json) {
      const features = new GeoJSON().readFeatures(json);
      // addFeature(features[0])
      // vectorSource.addFeatures(features);
      // map.getView().fit(vectorSource.getExtent());
    });
}

更新数据代码数据服务跟新或者增加数据超图服务

async function putData(feature) {
  console.log(feature)
  // 103.69511724100005
  // feature.geometry.points[0].x=103.69511724100005
  // 103.9945159780
  // feature.geometry.points[0].x=104.751036817
  feature.fieldValues=['', '31', '', '', '', '']
  feature.geometry={
    type:'Line',
    parts:[2],
    points:[{x:10,y:31},{x:101,y:31},{x:102,y:32}]
  }
  delete feature.ID

  let data = [feature];
  let res = await axios({
    // url: 'http://172.20.11.53:8090/iserver/services/data-pg_test/wfs100/utf-8',
    // url: 'http://172.20.11.53:8091/iserver/services/data-DJY_CHAN/wfs100/utf-8',
    // url: 'http://172.20.11.53:8091/iserver/services/data-DJY_CHAN/rest/data/datasources/DJY_CHAN/datasets/DJY_CHAN_ALL/features.rjson',
    // url:'http://172.20.11.53:8090/iserver/services/data-pg_test/rest/data/datasources/172.20.11.53_dashboard/datasets/line/features.rjson?isUseBatch=true',
    // url: 'http://172.20.11.53:8091/iserver/services/data-DJY_CH_ALL/rest/data/datasources/DJY_CH_ALL/datasets/DJY_CH_ALL/features.rjson',
    url:'http://localhost:8090/iserver/services/data-2-2/rest/data/datasources/2/datasets/line/features.json?',
    method: 'post',
    data: JSON.stringify(data)
  })
  console.log(res)
}

// 加载数据方法 数据服务
async function loadData() {
  let data = {
    "getFeatureMode": "ID",
    // "getFeatureMode":"SQL",
    // datasetNames:["172.20.11.53_dashboard:line"],
    // datasetNames: ["DJY_CH_ALL:DJY_CH_ALL"],
    datasetNames: ["2:line"],
    ids: [1,2,3]
    // "queryParameter":{
    //   "attributeFilter":"SMID=2200"
    // }
  }

  let res = await axios({
    // url: 'http://172.20.11.53:8091/iserver/services/data-DJY_CHAN/rest/data/featureResults.json?returnContent=true',
    // url: 'http://172.20.11.53:8090/iserver/services/data-pg_test/rest/data/featureResults.json?returnContent=true',
    // url: "http://172.20.11.53:8091/iserver/services/data-DJY_CH_ALL/rest/data/featureResults.json?returnContent=true",
    url: "http://localhost:8090/iserver/services/data-2-2/rest/data/featureResults.json?returnContent=true",
    method: 'post',
    data: JSON.stringify(data)
  })
  putData(res.data.features[0])
}

async function deleteData() {
  let data = {
    ids: [4],
  }

  let res = await axios({
    url: 'http://172.20.11.53:8091/iserver/services/data-DJY_CHAN/rest/data/featureResults.json?returnContent=true',
    // url: 'http://172.20.11.53:8090/iserver/services/data-pg_test/rest/data/featureResults.json?returnContent=true',
    method: 'post',
    data: JSON.stringify(data)
  })

}

geoserver 更新数据

  // 根据wfs 更新数据
    addFeature(options) {
        const { featureNS, featureTypes, data } = options
        let dataset = featureTypes[0].split(':')

        // let feature = new Feature()
        // feature.setGeometryName('the_geom')
        // feature.setGeometry(new MultiLineString([[[22.097, 107.459], [22.022, 110.035]]])) // 坐标反转
        // // shape 文件加载
        // feature.setProperties({
        //     Id: 5,
        //     name: '一级河流',
        //     width: 1,
        //     //   geometry: 'MULTILINESTRING((107.459 22.097, 110.035 22.022))'
        // })

     
  


        // postgres 数据更新
        // feature.setProperties({
        //   id: 5,
        //   geom: 'MULTILINESTRING((103.651036817937 32.5363361612092, 104.060128802595 31.5477575740372))'
        // })


        // 

        // featString.setGeometry(new MultiLineString([[[22.097,107.459], [22.022,110.035]]]))


        // let properties = feature.getProperties()
        // delete properties.geometry

        // let id=5
        // feature.setGeometryName('id') // 一定要放在setGemetry之前
        // feature.setGeometry(id)

        // feature.setProperties(properties)

        // let geom = feature.getGeometry().clone()
        // geom.applyTransform((flatCoordinates, flatCoordinates2, stride) => {
        //   for (var j = 0; j < flatCoordinates.length; j += stride) {
        //     var y = flatCoordinates[j]
        //     var x = flatCoordinates[j + 1]
        //     flatCoordinates[j] = x
        //     flatCoordinates[j + 1] = y
        //   }
        // })
        // ft.setGeometryName('geom') // 一定要放在setGemetry之前
        // ft.setGeometry(geom)

        // 2、更新到后台
        let WFSTSerializer = new WFS()
        var featObject = WFSTSerializer.writeTransaction(null,[feature]
            , null, {
            featureType: dataset[1],
            featureNS: dataset[0],
            srsName: 'EPSG:4326'
        })
        var serializer = new XMLSerializer()
        var featString = serializer.serializeToString(featObject)

        return fetch(featureNS, {
            method: 'POST',
            body: featString
        }).then((res) => {

            return res.json()
        }).catch((e) => {
            console.log('addFeature error', e)
        })
    }

async updateFeature(options) {
        const { featureNS, featureTypes, data, properties } = options

        let dataset = featureTypes[0].split(':')


        let feature =await this.loadWFS({
            ...options,
            propertyName:"CHAN_CODE",
            propertyValue:"HP0055101811100301"})
        // let feature = new Feature()

        feature.setGeometryName('the_geom')
        data[0] = data[0].map(([x, y]) => [y, x])
        console.log(data);
        feature.setGeometry(new MultiLineString(data)) // 坐标反转
        console.log(properties);

        delete properties.geometry
        delete properties.layers
        let properties2 = feature.getProperties()
        delete properties2.geometry
        delete feature.values_.geometry
        // feature.setProperties(properties)
        console.log(feature);
        console.log(feature.getProperties());
        // 2、更新到后台
        let WFSTSerializer = new WFS()
        var featObject = WFSTSerializer.writeTransaction(null,[feature]
            , null, {
            featureType: dataset[1],
            featureNS: dataset[0],
            srsName: 'EPSG:4326'
        })
        var serializer = new XMLSerializer()
        var featString = serializer.serializeToString(featObject)

        return fetch(featureNS, {
            method: 'POST',
            body: featString
        }).then((res) => {
            
            return res.json()
        }).catch((e) => {
            console.log('addFeature error', e)
        })
    }

wfs查询DEM

let params={
            service:'WMS',
            version:'1.1.0',
            request:'GetFeatureInfo',
            FEATURE_COUNT:50,
            X:1,
            Y:1,
            transparent:true,
            QUERY_LAYERS:"djy:DIY",
            layers:"djy:DIY",
            width:768,
            height:622,
            srs:'EPSG:4326',
            styles:"",
            INFO_FORMAT:'application/json',
            BBOX: minx + "," + miny + "," + maxx + "," + maxy
            // bbox: [minx,miny,maxx,maxy]  
        }
        getDemfromServer(params).then(res=>{
            console.log(res.features[0].properties)
        })

fetch请求

//发送一个get请求是这样的:

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();

//注册httpRequest.readyState改变时会回调的函数,httpRequest.
//readyState共有5个可能的值,
//0	UNSENT (未打开)	open()方法还未被调用;
//1	OPENED  (未发送)	send()方法还未被调用;
//2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回;
//3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据;
//4	DONE (请求完成)	整个请求过程已经完毕.
httpRequest.onreadystatechange = function(){
 //该回调函数会被依次调用4次
 console.log(httpRequest.readyState);

 if(httpRequest.readyState===4){
   //请求已完成
   if(httpRequest.status===200){
     //http状态为200
     console.log(httpRequest.response);

     var data = JSON.parse(httpRequest.response);
     console.log(data);
   }
 }

}

//请求的网址
var url = "http://127.0.0.1:7777/list";
//该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,第二个参数是请求的url
httpRequest.open('GET',url,true);

//设置http请求头
httpRequest.setRequestHeader("Content-Type","application/json");

//发出请求,参数为要发送的body体,如果是GET方法的话，一般无需发送body,设为空就可以
httpRequest.send(null);

//请求的网址
var url = "http://127.0.0.1:7777/list";
//发起get请求
var promise = fetch(url).then(function(response) {

   //response.status表示响应的http状态码
   if(response.status === 200){
     //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json();
   }else{
     return {}
   }

});
    
promise = promise.then(function(data){
  //响应的内容
	console.log(data);
}).catch(function(err){
	console.log(err);
})

/**
参数:
input:定义要获取的资源。可能的值是：一个URL或者一个Request对象。
init:可选,是一个对象，参数有：
	method: 请求使用的方法，如 GET、POST。
	headers: 请求的头信息，形式为 Headers 对象或 ByteString。
	body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
	mode: 请求的模式，如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的 method 只能是HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，JS 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求，将返回一个 error，这样确保所有的请求遵守同源策略。
	credentials: 请求的 credentials，如 omit、same-origin 或者 include。
	cache:  请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
返回值：一个 Promise，resolve 时回传 Response 对象。
*/
fetch(input, init).then(function(response) {  })

fetch("http://127.0.0.1:7777/postContent", {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  mode: "cors",
  body: JSON.stringify({
      content: "留言内容"
  })
}).then(function(res) {
  if (res.status === 200) {
      return res.json()
  } else {
      return Promise.reject(res.json())
  }
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

防抖操作

npm install -save lodash    /    npm install lodash 
 
import debounce from 'lodash/debounce';
 
function handleInput(event) {
  // 在250ms内只执行最后一次输入
}
 
const debouncedInput = debounce(handleInput, 250);
input.addEventListener('input', debouncedInput);

arcgis河道操作

1、裁剪栅格

2、填洼

3、生成流向

生产流量

河流提取>1000

河网分级STRAHLER 最大的 SHREVE 合成

盆域分析

河流链接

集水区，小流域，栅格转矢量

vue3 vue.config.js 配置

const debug = process.env.NODE_ENV !== 'production'
module.exports = {
……//自己的其他配置
configureWebpack: config => {
if (debug) { // 开发环境配置
config.devtool = 'source-map'
}
},
……//自己的其他配置
}
1

cesium 东8时需要增加8 个小时时间

     const start = Cesium.JulianDate.addHours(startOrigion, 8, new Cesium.JulianDate())
        const stop = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate())// 结束时间
        viewer.timeline.zoomTo(start, stop)
        viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2023-01-01T16:00:00Z");


// 实体根据时间显示
billboardCollection.entities.add({
            position: new Cesium.Cartesian3.fromDegrees(lng, lat, height),

            availability: new Cesium.TimeIntervalCollection([
                new Cesium.TimeInterval({
                    start: Cesium.JulianDate.fromIso8601('2024-01-15T00:00:00Z'),
                    stop: Cesium.JulianDate.fromIso8601('2024-01-15T15:02:00Z')
                })
            ]),
})


 viewer.animation.container.style.visibility = 'hidden'
 viewer.timeline.container.style.visibility = 'hidden'

viewer.animation.container.style.visibility = ''
 viewer.timeline.container.style.visibility = ''

图层目录