cesium 自定义气泡和创建管线源码全

最新推荐文章于 2024-08-19 17:04:41 发布
最新推荐文章于 2024-08-19 17:04:41 发布
阅读量321 收藏 1
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34114535/article/details/136021060
版权 
//自定义气泡

<template>
  <div id="cesiumContainer">

  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import $ from 'jquery'
import { BaiduImageryProvider } from "../js/BaiduImageryProvider.js"
var Cesium = require("cesium/Cesium")
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
let infos = reactive({
  pups: []
})
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';
  var viewer = new Cesium.Viewer("cesiumContainer", {
    //搜索框
    geocoder: true,
    //home键
    homeButton: false,
    // 动画控件
    animation: false,
    //全屏按钮
    fullscreenButton: false,
    //场景模式选择器
    sceneModePicker: true,
    //时间轴
    timeline: false,
    //导航提示
    navigationHelpButton: true,
    //地图选择器
    baseLayerPicker: false,
    imageryProvider: new BaiduImageryProvider({
      url: "http://api1.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=redalert",
      subdomains: subdomains,
    })

  })


  window._viewer=viewer;
  // viewer.scene.globe.depthTestAgainstTerrain = true;//开始深度测试
  //添加鼠标右击事件

  
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction(function (event) {
    console.log(event);
    var windowpos = viewer.camera.getPickRay(event.position);
    if (windowpos) {
      var cartesian2 = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
      var carto2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2);
      creatPup({id:"pupdiv"+Math.random(10000),position:carto2})
      
      console.log(carto2);
    }

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114.61919076, 38.19495159, 50000)
    // destination: Cesium.Cartesian3.fromDegrees(109, 39, 5000000)
  })
  //自定义气泡是一个div 标签



  // 每帧都要更新标签的位置
  viewer.scene.postRender.addEventListener(() => {
    console.log("pups",infos.pups); 
    infos.pups.forEach(pup=>{
     
      console.log(pup.position);
       var worldcoodinate =Cesium.Cartesian3.fromRadians(pup.position.longitude,pup.position.latitude,pup.position.height)
     var screenpos= Cesium.SceneTransforms.wgs84ToWindowCoordinates(window._viewer.scene, worldcoodinate);
     console.log(screenpos);
       var pupdiv = document.getElementById(pup.id);
       pupdiv.style.top =screenpos.y+"px"
       pupdiv.style.left =screenpos.x-200+"px"
    //  $("#"+pup.id).css("position","absolute");
    //  $("#"+pup.id).css("top",screenpos.y+"px");
    //  $("#"+pup.id).css("left",screenpos.x+"px");
    
    })
     
  })


});

function creatPup(param) {
  var object = infos.pups.find(pup => { return pup.id == param.id })

  if (!object) {
     object = new Object()
    object.id = param.id;
    object.position = param.position;
    infos.pups.push(object)
    var divmark = "<div id='" + param.id + "' style='position:absolute;width:200px;height:50px;background-color:#42b983; border-radius: 10px;' >666</div>"
    $('#'+window._viewer._container.id).append(divmark)

  }

 


}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
 
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>


BaiduImageryProvider.js

var Cesium = require("cesium/Cesium")
function BaiduImageryProvider(options) {
    this._errorEvent = new Cesium.Event();
    this._tileWidth = 256;
    this._tileHeight = 256;
    this._maximumLevel = 18;
    this._minimumLevel = 1;
    var southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
    var northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
    this._tilingScheme = new Cesium.WebMercatorTilingScheme({
        rectangleSouthwestInMeters: southwestInMeters,
        rectangleNortheastInMeters: northeastInMeters
    });
    this._rectangle = this._tilingScheme.rectangle;
    var resource = Cesium.Resource.createIfNeeded(options.url);
    this._resource = resource;
    this._tileDiscardPolicy = undefined;
    this._credit = undefined;
    this._readyPromise = undefined;
}
 
Object.defineProperties(BaiduImageryProvider.prototype, {
    url: {
        get: function () {
            return this._resource.url;
        }
    },
    proxy: {
        get: function () {
            return this._resource.proxy;
        }
    },
    tileWidth: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
            }
            return this._tileWidth;
        }
    },
 
    tileHeight: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
            }
            return this._tileHeight;
        }
    },
 
    maximumLevel: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
            }
            return this._maximumLevel;
        }
    },
 
    minimumLevel: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
            }
            return this._minimumLevel;
        }
    },
 
    tilingScheme: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
            }
            return this._tilingScheme;
        }
    },
 
    tileDiscardPolicy: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
            }
            return this._tileDiscardPolicy;
        }
    },
 
    rectangle: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
            }
            return this._rectangle;
        }
    },
 
    errorEvent: {
        get: function () {
            return this._errorEvent;
        }
    },
    ready: {
        get: function () {
            return this._resource;
        }
    },
    readyPromise: {
        get: function () {
            return this._readyPromise;
        }
    },
    credit: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
            }
            return this._credit;
        }
    },
});
 
BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
    var r = this._tilingScheme.getNumberOfXTilesAtLevel(level);
    var c = this._tilingScheme.getNumberOfYTilesAtLevel(level);
    var s = this.url.replace("{x}", x - r / 2).replace("{y}", c / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
    return Cesium.ImageryProvider.loadImage(this, s);
};

BaiduImageryProvider.prototype.hasAlphaChannel=function() {
    return true
  }

export {BaiduImageryProvider}


创建管线

<template>
  <div id="cesiumContainer">

  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import $ from 'jquery'
import { BaiduImageryProvider } from "../js/BaiduImageryProvider.js"
var Cesium = require("cesium/Cesium")
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
let infos = reactive({
  pups: []
})
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';
  var viewer = new Cesium.Viewer("cesiumContainer", {
    //搜索框
    geocoder: true,
    //home键
    homeButton: false,
    // 动画控件
    animation: false,
    //全屏按钮
    fullscreenButton: false,
    //场景模式选择器
    sceneModePicker: true,
    //时间轴
    timeline: false,
    //导航提示
    navigationHelpButton: true,
    //地图选择器
    baseLayerPicker: false,
    // imageryProvider: new BaiduImageryProvider({
    //   url: "http://api1.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=redalert"
    // }),
    // terrainProvider : new Cesium.CesiumTerrainProvider({
    //          url: "http://data.marsgis.cn/terrain",
    //      })
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z}",
      minimumLevel: 1,
      maximumLevel: 18
    })
    // imageryProvider: new BaiduImageryProvider({
    //   url: "http://api1.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=redalert",
    //   subdomains: subdomains,
    // })

  })


  window._viewer = viewer;
  // viewer.scene.globe.depthTestAgainstTerrain = true;//开始深度测试
  //添加鼠标右击事件
  let list =[
   [114.61919076, 38.19495159],
    [114.61908096, 38.19485174],
    [114.61813218, 38.1939726673],
    [114.61659426, 38.1925741574],
    [114.61567554, 38.1917550675]]

  viewer.entities.add({
    polylineVolume: {
      positions: Cesium.Cartesian3.fromDegreesArray(list.flat()),
      shape: computeCircle(10),//参数是管线的半径，管线的横截面形状
      outline: true,
      outlineColor: Cesium.Color.PINK,
      // outlineWidth: 1,
      fill: false,
      cornerType: Cesium.CornerType.BEVELED,
      material: Cesium.Color.RED,//管线的颜色
    },
  });

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114.61919076, 38.19495159, 1000),	//相机（眼睛）位置  不是地图位置
    //相机的姿态
    orientation: {
      heading: Cesium.Math.toRadians(0.0), // 朝向
      pitch: Cesium.Math.toRadians(-90),    // 俯仰
      roll: 0.0                            //滚转                       
    },
  });
  //自定义气泡是一个div 标签


});

function computeCircle(radius) {
  var positions = [];
  for (var i = -30; i < 40; i++) {
    var radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
    i += 20;
  }
  return positions;
}
console.log(computeCircle(20))




</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;

}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

qq_34114535
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium绘制流动管线
qq_37312180的博客
01-25 1289
Cesium绘制流动管线
Cesium 实战 15 - 气泡框跟随飞行
linzi19900517的博客
06-13 1606
本文介绍了在实际应用中，展示移动中模型的信息，实现气泡框跟随飞行。
在Cesium中给管道添加水流效果（Adding water flow effects to pipelines in Cesium）
专注GIS软件开发。
08-10 1251
在Cesium中给管道添加水流效果
使用Cesium创建3dtiles管线（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-31 1627
https://mp.weixin.qq.com/s/nCFn5hJEqp8DRnT9AIZbug
Cesium垂直+水平含水管道实体
05-05
对应文章地址：https://blog.csdn.net/qq_39142804/article/details/124598158 Cesium三维管网模拟
Cesium为3dTile模型添加气泡框
qq_37987033的博客
08-24 1765
在Cesium中没有类似mapbox中的气泡（popup）弹框，在react-hooks中可以封装一个这样的类组件，借助网上提供的思路为外部模型添加popup气泡框，改进后在旋转缩放时仍能保持原位置，不会偏移。
Cesium 含水三维管道网络模拟
qq_39142804的博客
05-05 4598
Cesium 管道实体 目的在于根据数据的点坐标生成三维管网 分为水平管道与垂直管道两类，在两类管道接洽时避免了重叠现象的出现 使用es5对象思维进行封装 使用方法 垂直管道 VerticalPipe(pipeEntityCollection, id, positions, height, pipeRadius, pipeHeight, waterHeight) 参数解释 param {DataSource} pipeEntityCollection： 添加实体的数据源（viewer或自
cesium之自定义气泡窗口infoWindow后续优化篇.zip
06-19
这个压缩包文件“cesium之自定义气泡窗口infoWindow后续优化篇.zip”很可能包含了一系列教程或代码示例，专注于如何进一步优化Cesium中的InfoWindow，以提供更佳的用户体验和视觉效果。 在Cesium中，默认的...
Cesium气泡信息提示框
01-16
Cesium气泡信息提示框，在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动。
Cesium多边形自定义编辑工具CesiumEditPolygon.js
12-13
vue+Cesium多边形自定义编辑工具CesiumEditPolygon.js。可自定义配置相关点面的颜色和大小。
Cesium自定义路径飞行漫游
01-20
基于Cesium1.62开发的三维场景漫游，动态移动视角，采集运动节点信息，自动漫游回放
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压
03-13
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：...
在CESIUM中增加自定义气泡或弹窗提示信息可随三维场景移动（思路解析加源码）【已实现】
weixin_44995829的博客
02-27 3083
在CESIUM中增加自定义气泡或弹窗提示信息可随三维场景移动（思路解析加源码）【已实现】
cesium根据管道中心线和半径绘制空心管道
qq_38621116的博客
01-24 1061
使用cesium，primitives， GeometryInstance 绘制管网空心管道。
Cesium加载大数据量地下管线
神男码农的博客
01-19 7401
Cesium加载大数据量管线
Cesium加载海量地下三维管线
rpgpp55的博客
06-18 2609
工具版本同波士顿，建模见另一篇文章 数据量 JS 36000 PS 52000 GD 18000 LD 44000 DX 18000 LT… 主要优化思路是 将管线和管点合并到一个Command，管点模型使用repeat合并为一个Command，多个管点使用I3DM，如果瓦片还有I3DM则用cpmt合并减少瓦片网络请求 数据量大概20万条记录（管点和管线），包含井、消防栓、路灯等模型还算比较流畅 ...
第20节：cesium 流动纹理示例-动态输油管道（含源码+视频）
qq_29384639的博客
06-06 1317
cesium 流动纹理示例-动态输油管道
cesium 自定义气泡 类
songJunFeng1的博客
11-21 329
【代码】cesium 自定义气泡 类。
前端字符串将其分割成长度为 32 的子字符串数组
最新发布
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 103
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
Cesium自定义shader实现建筑泛光特效源码解析
在Cesium中，我们可以利用自定义着色器来改变模型的外观，创建独特的视觉效果。在这个例子中，我们首先初始化了一个Viewer对象，并配置了一些选项，如禁用某些默认按钮，启用VR支持，以及加载基础图层。接着，通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值