首页 > 其他分享 >cesium创建多段线缓冲区

cesium创建多段线缓冲区

时间:2023-07-21 22:33:50浏览次数:22  
标签:const combineString Cesium let 缓冲区 cesium 多段 latitude

两种方式:
一、前端直接引入turf库,使用turf.buffer方法创建。

二、后端数据库引入postgis,使用ST_Buffer方法创建,前端调用对应接口的方式获取。

下面分别给出两种方式的关键步骤,代码没有做整理,这里只是提供一下思路:

turf库创建

activeShapePoints数组里存的是鼠标拾取的多段线节点坐标,格式如下:

[
    {
        "x": -2604190.0220998726,
        "y": 4743916.5281634405,
        "z": 3364194.6405565036
    },
    {
        "x": -2604565.6748349112,
        "y": 4743962.48447861,
        "z": 3363841.3883513794
    },
    {
        "x": -2604935.5529875434,
        "y": 4743858.811577148,
        "z": 3363702.1196498023
    }
]
//世界坐标转化为经纬度
let ellipsoid = this.viewer.scene.globe.ellipsoid;
let cartographics = this.activeShapePoints.map((worldCoord) => {
    return ellipsoid.cartesianToCartographic(worldCoord);
})
let points = cartographics.map((cartographic) => {
    let longitude = Cesium.Math.toDegrees(cartographic.longitude);
    let latitude = Cesium.Math.toDegrees(cartographic.latitude);
    return [longitude, latitude];
})
//由turf库生成缓冲区(坐标)
let polylineF = turf.lineString(points);//Creates a LineString Feature from an Array of Positions.
let buffered = turf.buffer(polylineF, this.bufferDistance, { units: 'meters' });//缓冲区边界坐标,这是创建缓冲区面的关键
let coordinates = buffered.geometry.coordinates;
points = coordinates[0];
let degreesArray = this.pointsToDegreesArray(points);
this.addBufferPolyogn(Cesium.Cartesian3.fromDegreesArray(degreesArray));

绘制缓冲区面的函数addBufferPolyogn:

MapControl.addBufferPolyogn = function (positions) {
    console.log("turf缓冲区坐标:",positions);
    this.viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(positions),
            material: Cesium.Color.RED.withAlpha(0.6),
            classificationType: Cesium.ClassificationType.BOTH,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15000),
        },
    });
}

postgis创建

data数组存的就是上面的activeShapePoints数据。
对坐标数据做一系列格式转换,然后将其作为请求参数向后台发送post请求,后台返回缓冲区面的坐标,然后绘制面。

//先转化为web墨卡托投影坐标
      let webMercatorData = CoordTransform.worldCoord_to_webMercator(data);
      //数据格式化
      let combineString = "";
      webMercatorData.forEach((item) => {
        combineString += `${item.x}` + ` ` + `${item.y},`;
      });

      combineString = combineString.slice(0, -1);
      combineString = `LINESTRING(` + combineString + `)`;
      //   console.log("combineString",combineString);
      //传入后台的参数
      const params = {
        lineString: combineString,
        bufferDistance: this.bufferDistance,
      };
      PsTimelineService.getBuffer(params).then((response) => {
        if (response) {
          console.log("getBuffer传回的数据:", response);
        }
        //验证postgis创建的缓冲区与turf创建的区别、
        const inputString = response.data[0].buffergeom;
        // 使用正则表达式匹配字符串中的数字
        const regex = /[-+]?\d*\.\d+|\d+/g;
        const matches = inputString.match(regex);

        // 提取数字到对象数组中,每两个为一个对象,键名为 x 和 y
        const resultArray = [];
        for (let i = 0; i < matches.length; i += 2) {
          resultArray.push({
            x: parseFloat(matches[i]),
            y: parseFloat(matches[i + 1]),
          });
        }

        console.log(resultArray);
        const webMercatorProjection = new Cesium.WebMercatorProjection();
        const worldCoordinates = resultArray.map((coordinate) => {
          const cartesian = new Cesium.Cartesian3(
            coordinate.x,
            coordinate.y,
            0
          );
          const cartographic = webMercatorProjection.unproject(cartesian);
          const longitude = Cesium.Math.toDegrees(cartographic.longitude);
          const latitude = Cesium.Math.toDegrees(cartographic.latitude);
          return { longitude, latitude };
        });
        // 将经纬度坐标转换为Cartesian3坐标
        const cartesianCoordinates = worldCoordinates.map((coordinate) => {
          const longitude = coordinate.longitude;
          const latitude = coordinate.latitude;
          const height = 0; // 可以设置高度,如果没有高度信息,可将height设置为0
          return Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
        });

        console.log("转换后的边界坐标postgis:",cartesianCoordinates);

        let bufferArr=cartesianCoordinates.map(item=>{
            return item;
        });
        bufferArr.push(cartesianCoordinates[0]);//最终的缓冲区边界坐标

        MapControl.addBufferPolyogn2(bufferArr);

后台缓冲区创建:

SELECT ST_AsText(ST_Buffer(ST_GeomFromText('LINESTRING(0 0, 1 1, 2 0)'), 5, 'endcap=flat join=round')) AS bufferGeom;

效果:

红色是使用turf库创建的缓冲区,蓝色是postgis创建的缓冲区,对比二者可发现区别不大。

标签:const,combineString,Cesium,let,缓冲区,cesium,多段,latitude
From: https://www.cnblogs.com/marshban/p/17572522.html

相关文章

  • cesium 相机以某点为中心旋转
     renderTargetCamera(){    const{viewer}=this.state    const_this=this    viewer.camera.moveEnd.addEventListener(function(){      const{gpsamera,cameraHeightInit}=_this.state      letca......
  • cesium左键事件取值
    import{ScreenSpaceEventHandler,ScreenSpaceEventType, MathascMath,ShadowMode,Color,Cartographic,Cartesian2,Cartesian3,defined}from'cesium';functionbindMapClickEvent(){if(!handler){handler=newScreenSpaceEventHand......
  • Cesium被接入数字孪生系统后会发生怎样的改变?
    众所周知,Cesium凭借其开源免费的特点一直垄断着整个三维GIS的生态系统,但是随着数字孪生技术的发展以及各项新需求的不断涌现,Cesium与数字孪生系统相结合的潜力也逐渐凸显。一般而言,Cesium如果想要升级视效就需要去用CesiumForUnity或是CesiumForUnreal这类游戏引擎插件。但是无论......
  • 三维GIS渲染引擎盘点,以Cesium为核心的拓展优化
    目前,以Cesium为核心的各类产品繁多,本文将挑选一些以Cesium为核心的软件案例,为大家进行介绍。1.CesiumJSCesiumJS相信凡是GIS行业相关人员都特别熟悉了,CesiumJS是一款开源的JavaScript库,用于创建高性能的地球可视化应用程序。它基于WebGL技术,可以在现代的Web浏览器中实现各种三......
  • 5.1 缓冲区溢出与攻防博弈
    在黑客安全圈子中,基于内存攻击技术的攻击手段在随着时代的变化而不断发展着,内存攻击是指通过利用软件的安全漏洞,构造恶意的输入,从而使正常程序造成拒绝服务或者是远程获得控制权,内存攻击技术中最先登上历史舞台的就是缓冲区溢出漏洞,时至今日能够被广泛利用的并具有较大破坏性的高......
  • 数字孪生系统如何整合CesiumJS?整合后会产生怎样的化学反应?
    数字孪生有关的项目中,智慧城市一直是一个比较重要的类型,但是这类智慧城市项目往往包含了大量的GIS相关数据,例如倾斜摄影、DEM、DOM、地形数据等。这时,将GIS系统融合进数字孪生系统的需求就出现了。这时一个新的问题就出现了,如果将GIS系统和数字孪生系统进行融合,那么该如何保证融......
  • GIS系统想要实现Cesium For Unreal的视觉效果是否有捷径可走?
    对于大多数GIS开发人员来说,CesiumJS都是比较熟悉的引擎,但是相比较CesiumForUnreal而言,CesiumJS的视觉效果就显得差强人意了,因此一些GIS开发人员对CesiumForUnreal是存在需求的。但是,想要用好东西总是存在代价。由于CesiumForUnreal本身是虚幻引擎的一个插件,这就意味着如果......
  • cesium 加载geoserver wmts
    遇到问题:①加载瓦片服务时,发现{TileRow}/{TileCol}参数不对,刚好是等级大了一倍;解决方法:tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11"] ,注意是从1开始,不是从0开始。......
  • Cesium学习笔记3——加载topojson和Geojson
    在根目录下新建bucket.css@import"../Build/CesiumUnminified/Widgets/widgets.css";@import"../Build/CesiumUnminified/Widgets/lighter.css";html{height:100%}body{background:#000;color:#eee;font-family:sans-serif;font-size:9pt;padding:0;margin:0;w......
  • Cesium学习笔记4——几何体绘制
    引用:Sandcastle-header.js<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="......