C/C++教程
Cesium 加载百度地图
本文主要是介绍Cesium 加载百度地图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
效果
代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Cesium-1.66/Build/Cesium/Widgets/widgets.css">
<style>
#map3d {
height: 600px;
width: 1000px;
margin: 0 auto;
position: relative;
}
</style>
</head>
<body>
<div id="map3d">
</div>
</body>
<script src="Cesium-1.66/Build/Cesium/Cesium.js"></script>
<script src="jQuery.js"></script>
<script src="baidu.js"></script>
<script>
viewer = new Cesium.Viewer('map3d', {
selectionIndicator: false,
animation: false,
baseLayerPicker: false,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
useDefaultRenderLoop: true,
showRenderLoopErrors: true,
fullscreenButton: false,
infoBox: false,
imageryProvider: new BaiduImageryProvider({
url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
})
});
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000.0),
}); // 设置初始位置
// 分辨率调整函数
let adjustmentPixel = function () {
// 判断是否支持图像渲染像素化处理
var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
if (supportsImageRenderingPixelated) {
// 直接拿到设备的像素比例因子 - 如我设置的1.25
var vtxf_dpr = window.devicePixelRatio;
// 这个while我们在后面会做一个说明，但不是解决问题的说明
while (vtxf_dpr >= 2.0) {
vtxf_dpr /= 2.0;
}
// 设置渲染分辨率的比例因子
viewer.resolutionScale = vtxf_dpr;
}
};
adjustmentPixel();
viewer.scene.postProcessStages.fxaa.enabled = false;
//viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.fxaa = false;
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
let earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
if (Cesium.defined(earthPosition)) {
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lon = Cesium.Math.toDegrees(cartographic.longitude);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</html>
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;
}
Cesium.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);
};
这篇关于Cesium 加载百度地图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
CAP：Serverless?+AI?让应用开发更简单12-24
-
新能源车企如何通过CRM工具优化客户关系管理，增强客户忠诚度与品牌影响力12-23
-
原创tauri2.1+vite6.0+rust+arco客户端os平台系统|tauri2+rust桌面os管理12-23
-
DevExpress 怎么实现右键菜单（Context Menu）显示中文？-icode9专业技术文章分享12-23
-
怎么通过控制台去看我的页面渲染的内容在哪个文件中呢-icode9专业技术文章分享12-22
-
el-tabs 组件只被引用了一次，但有时会渲染两次是什么原因？-icode9专业技术文章分享12-22
-
wordpress有哪些好的安全插件？-icode9专业技术文章分享12-22
-
wordpress如何查看系统有哪些cron任务？-icode9专业技术文章分享12-22
-
Svg Sprite Icon教程：轻松入门与应用指南12-21
-
Excel数据导出实战：新手必学的简单教程12-20
-
RBAC的权限实战：新手入门教程12-20
-
Svg Sprite Icon实战：从入门到上手的全面指南12-20
-
LCD1602显示模块详解12-20
-
利用Gemini构建处理各种PDF文档的Document AI管道12-20
-
在 uni-app 中怎么实现 WebSocket 的连接、消息发送和接收？-icode9专业技术文章分享12-20
栏目导航
