//自定义气泡
<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>
cesium 自定义气泡和创建管线源码全
最新推荐文章于 2024-08-19 17:04:41 发布