地图初始化及geojson数据
html部分
<div id="GlobeView"></div>
css
#GlobeView{
position: absolute
width: 100%
height: 100%
}
JS部分
let viewer = new Cesium.Viewer("GlobeView", {
// 添加天地图影像底图
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: TDT_IMG_W,
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
})
});
// 添加天地图标注
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: TDT_CIA_W,
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}))
// 照相机视角跳转到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(12)
}
});
// 添加geoJson数据
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(
"/data/xian.json",
{
stroke: Cesium.Color.CORAL,
fill: Cesium.Color.CHOCOLATE.withAlpha(0.5), //如果把0.5改成0 则填充色设置为空
strokeWidth: 3,
}
)
);
添加WMS在线图层服务
let wmsProvider = new Cesium.WebMapServiceImageryProvider({
url : '服务地址',
layers : '发布服务上的图层名称',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
}
})
viewer.imageryLayers.addImageryProvider(wmsProvider);
WMTS服务
let wmtsyProvider = new Cesium.WebMapTileServiceImageryProvider({
url : '服务地址',
layer : '图层名称',
style : '',
format : 'image/png',
tileMatrixSetID:'EPSG:4326' 坐标系
});
viewer.imageryLayers.addImageryProvider(wmtsyProvider);