代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>局部地图区域</title>
<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
<script src="../Build/Cesium.js"></script>
</head>
<body style="overflow: hidden;height: 95%;">
<div id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
</body>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',{
//需要进行可视化的数据源的集合
animation: false, //是否显示动画控件
shouldAnimate : true,
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
requestRenderMode: true, //启用请求渲染模式
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.com/img_w/wmts?',
layer: 'img',
style: 'default',
format: 'tiles',
tileMatrixSetID: 'w',
credit: new Cesium.Credit('天地图全球影像服务'),
})
});
//全球影像中文注记服务
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
maximumLevel: 13,
minimumLevel: 1,
show: false
}));
//左下角坐标，右上角坐标
var rectangle=Cesium.Rectangle.fromDegrees(112.2588781098,39.5047262435,112.2981585251,39.5233702752);
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url:"../images/label/2.png",
rectangle: rectangle
}))
var layers = viewer.imageryLayers;
viewer._cesiumWidget._creditContainer.style.display="none";
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(112.2770508586,39.5050978677,112.2776657605,39.5193995362) //定位坐标点，建议使用谷歌地球坐标位置无偏差
});
</script>
</html>
