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

于 2024-02-04 10:11:49 发布
阅读量492 收藏 2
点赞数 4
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值