Cesium使用UrlTemplateImageryProvider加载第三方定义的瓦片

MartinYangHJ

已于 2024-01-12 14:34:49 修改

阅读量899

点赞数 10

分类专栏： JS 前端框架文章标签： Cesium

于 2024-01-10 16:10:49 首次发布

本文链接：https://blog.csdn.net/yhj198927/article/details/135506212

版权

JS 同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

前端框架

41 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML页面中通过Cesium库创建一个定制的3D地图视图，使用UrlTemplateImageryProvider加载自定义瓦片，并将视野定位到北极中心点。展示了基础的JavaScript代码实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Document</title>
<link href="../Build/CesiumUnminified/Widgets/widgets.css" rel="stylesheet">
</link>
<script src="../Build/CesiumUnminified/Cesium.js"></script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>

<body>
<div id="cesiumContainer"></div>
<script>
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
timeline: false,
baseLayerPicker: false,
vrButton: false,
homeButton: false,
fullscreenButton: false,
navigationHelpButton: false,
geocoder: false,
sceneModePicker: false,
//使用第三方定义的瓦片,baseLayer的类型为ImageryLayer
baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
url: "http://yoururl/g1/tile.g?m=1&x={x}&y={y}&z={z}"
})),
})
//视野定位到北极中心点
viewer.camera.setView({
destination:Cesium.Cartesian3.fromDegrees(180,90,17263256.248715397)
});
</script>
</body>