本文目的
本文使用Cesium中Sandcastle (built version)中的示例演示如何使用Cesium进行图层管理。
效果图如下所示：
本文目录
0.前置环境
安装好node.js和http-server，能使用npm。
1.cesium部署与安装
1.去github下载cesium.cesium地址如下
github.com/CesiumGS/ce… 该地址执行以下3中的命令可以看到cesium中的Sandcastle中的所有示例，这些示例演示了如何使用cesium。
如果github下载过慢，使用如下链接对cesium中github地址进行加速下载toolwa.com/github/
2.vscode打开cesium
3.执行如下命令
npm install
安装cesium中所有依赖包
npm run build
在Sources文件夹下生成cesium.js索引所有cesium的源代码
npm run release
npm run release命令则相当于combine、minifyRelease、generateDocumentation三个命令的集合。他会同时做了三件事：1. 在Build/CesiumUnminified目录下生成调试版的Cesium.js文件； 2. 在Build/Cesium目录下生成压缩优化好的(生产环境下）的Cesium.js文件； 3. 并且还生成了Cesium的api文档，文档放在Build/Documentation目录下。
npm start
启动后可以查看cesium中自带的示例Sandcastle，里面有很多示例可以学习
2.cesium中添加自己的图层和数据
使用vscode新建html文件： 图层管理.html
文件结构如下，只需关注画红框的部分，其中scripts文件夹中内容是将npm run release命令生成的Build文件夹中的Cesium文件夹复制过去即可。
图层管理.html文件中的代码如下：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium App</title>
<script src="./scripts/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
<style>
@import url(./templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
#toolbar table tr {
transform: translateY(0);
transition: transform 0.4s ease-out;
}
#toolbar table tr.up {
transform: translateY(33px);
transition: none;
}
#toolbar table tr.down {
transform: translateY(-33px);
transition: none;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody data-bind="foreach: layers">
<tr data-bind="css: { up: $parent.upLayer === $data, down: $parent.downLayer === $data }">
<td><input type="checkbox" data-bind="checked: show"></td>
<td>
<span data-bind="text: name, visible: !$parent.isSelectableLayer($data)"></span>
<select data-bind="visible: $parent.isSelectableLayer($data), options: $parent.baseLayers, optionsText: 'name', value: $parent.selectedLayer"></select>
</td>
<td>
<input type="range" min="0" max="1" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
</td>
<td>
<button type="button" class="cesium-button" data-bind="click: function() { $parent.raise($data, $index()); }, visible: $parent.canRaise($index())">
▲
</button>
</td>
<td>
<button type="button" class="cesium-button" data-bind="click: function() { $parent.lower($data, $index()); }, visible: $parent.canLower($index())">
▼
</button>
</td>
</tr>
</tbody>
</table>
</div>
</head>
<body>
<script>
//天地图影像服务，必须添加自己的key
var tdtImagerLayerProvider = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=fb788337399e78058af0869a899ba0f8",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
});
//天地图注记服务，必须添加自己的key
var tdtNoteLayerProvider = 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&tk=fb788337399e78058af0869a899ba0f8",
layer:"tiandituImgMarker",
style:"default",
format:"image/jpeg",
tileMatrixSetID:"tiandituImgMarker",
show:true,
maximumLevel:16
});
//自定义影像
var myImage=new Cesium.WebMapServiceImageryProvider({
url:'http://10.2.x.x:8080/geoserver/SuqianImage/wms?',
layers:'SuqianImage:suqian16',
parameters:{
service:'WMS',
format:'image/png',
transparent:true,
},
});
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZDBiN2JhNy1hNjcxLTRkYzUtYmI3Yy03NjE2NzNhZTk4MzciLCJpZCI6MzMyNzQsImlhdCI6MTU5ODM1MTI5Mn0.2V7kvN34qfN3JgJvPfCKBqyPwa_tOmwMzJqGZsAxM8s';
var viewer = new Cesium.Viewer('cesiumContainer',{
//imageryProvider: tdtImagerLayerProvider,
});
//隐藏版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
//begin视图viewer加载数据
// //添加注记图层
// var imageryLayers = viewer.imageryLayers;
// var tdtNoteLayer = imageryLayers.addImageryProvider(tdtNoteLayerProvider);//添加注记图层
// imageryLayers.raiseToTop(tdtNoteLayer);//将注记图层置顶
// //imageryLayers.lowerToBottom(tdtNoteLayer);//将注记图层置底
// imageryLayers.alpha= 0.3;//改变透明度
// imageryLayers.brightness= 1.5;//改变亮度
//end视图viewer加载数据
//viewer.imageryLayers.get(0).show = false;//显示蓝色地球
var promise = Cesium.GeoJsonDataSource.load('./vector/宿迁矢量路网_json/宿迁道路_FeaturesToJSON_网页转换.json'); //显示管线数据 直接加载json数据 比把json转化成czml在加载快很多
promise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
for (var o = 0; o < entities.length; o++) {
var r = entities[o];
r.nameID = o; //给每条线添加一个编号，方便之后对线修改样式
r.polyline.width = 10; //添加默认样式
(r.polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower: .1, //一个数字属性，指定发光强度，占总线宽的百分比。
color: Cesium.Color.DARKCYAN.withAlpha(.9)
}), 10)
}
var temp = new Array();
window.Hightlightline = function (nameid) {
var exists = temp.indexOf(nameid);
if (exists <= -1) {
Highlight(nameid,50, 50);
temp.push(nameid); // 添加线nameID到数组，
}
else //已经是高亮状态了 再次点击修改为原始状态
{
Highlight(nameid,10, 10);
temp.splice(exists, 1); //删除对应的nameID
}
}
window.Highlight = function (nameid,width1, width2) {
for (var o = 0; o < entities.length; o++) {
var m = entities[o];
if (nameid == o) {
m.polyline.width = width1;
//m.polyline.width = 10;
(m.polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower: .1, //一个数字属性，指定发光强度，占总线宽的百分比。
color: Cesium.Color.DARKCYAN.withAlpha(.9)
}), width2)
}
}
}
});
//viewer.flyTo(promise);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
var pickedFeature = viewer.scene.pick(movement.position);
if (typeof (pickedFeature) != "undefined") //鼠标是否点到线上
{
var name_id = pickedFeature.id.nameID; //获取每条线的nameID
Hightlightline(name_id);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//begin图层
// var viewer = new Cesium.Viewer("cesiumContainer", {
// baseLayerPicker: false,
// });
var imageryLayers = viewer.imageryLayers;
var viewModel = {
layers: [],
baseLayers: [],
upLayer: null,
downLayer: null,
selectedLayer: null,
isSelectableLayer: function (layer) {
return this.baseLayers.indexOf(layer) >= 0;
},
raise: function (layer, index) {
imageryLayers.raise(layer);
viewModel.upLayer = layer;
viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
updateLayerList();
window.setTimeout(function () {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
lower: function (layer, index) {
imageryLayers.lower(layer);
viewModel.upLayer =
viewModel.layers[
Math.min(viewModel.layers.length - 1, index + 1)
];
viewModel.downLayer = layer;
updateLayerList();
window.setTimeout(function () {
viewModel.upLayer = viewModel.downLayer = null;
}, 10);
},
canRaise: function (layerIndex) {
return layerIndex > 0;
},
canLower: function (layerIndex) {
return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
},
};
var baseLayers = viewModel.baseLayers;
Cesium.knockout.track(viewModel);
function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren't really special. It's possible to have multiple of them
// enabled at once, just like the other layers, but it doesn't make much sense because
// all of these layers cover the entire globe and are opaque.
addBaseLayerOption("Bing Maps Aerial", undefined); // the current base layer
addBaseLayerOption(
"Bing Maps Road",
Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.ROAD,
})
);
addBaseLayerOption(
"ArcGIS World Street Maps",
new Cesium.ArcGisMapServerImageryProvider({
url:
"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
})
);
addBaseLayerOption(
"OpenStreetMaps",
new Cesium.OpenStreetMapImageryProvider()
);
addBaseLayerOption(
"Stamen Maps",
new Cesium.OpenStreetMapImageryProvider({
url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
fileExtension: "jpg",
credit:
"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
})
);
addBaseLayerOption(
"Natural Earth II (local)",
new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
})
);
addBaseLayerOption(
"USGS Shaded Relief (via WMTS)",
new Cesium.WebMapTileServiceImageryProvider({
url:
"http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS",
layer: "USGSShadedReliefOnly",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "default028mm",
maximumLevel: 19,
credit: "U. S. Geological Survey",
})
);
// Create the additional layers
addAdditionalLayerOption(
"United States GOES Infrared",
new Cesium.WebMapServiceImageryProvider({
url:
"https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?",
layers: "goes_conus_ir",
credit: "Infrared data courtesy Iowa Environmental Mesonet",
parameters: {
transparent: "true",
format: "image/png",
},
})
);
addAdditionalLayerOption(
"United States Weather Radar",
new Cesium.WebMapServiceImageryProvider({
url:
"https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",
layers: "nexrad-n0r",
credit: "Radar data courtesy Iowa Environmental Mesonet",
parameters: {
transparent: "true",
format: "image/png",
},
})
);
addAdditionalLayerOption(
"TileMapService Image",
new Cesium.TileMapServiceImageryProvider({
url: "./images/cesium_maptiler/Cesium_Logo_Color",
}),
0.2
);
addAdditionalLayerOption(
"Single Image",
new Cesium.SingleTileImageryProvider({
url: "./images/Cesium_Logo_overlay.png",
rectangle: Cesium.Rectangle.fromDegrees(
-115.0,
38.0,
-107,
39.75
),
}),
1.0
);
addAdditionalLayerOption(
"Grid",
new Cesium.GridImageryProvider(),
1.0,
false
);
addAdditionalLayerOption(
"Tile Coordinates",
new Cesium.TileCoordinatesImageryProvider(),
1.0,
false
);
addAdditionalLayerOption(
"天地图",
new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=fb788337399e78058af0869a899ba0f8",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
}),
1.0,
false
);
addAdditionalLayerOption(
"天地图注记",
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&tk=fb788337399e78058af0869a899ba0f8",
layer:"tiandituImgMarker",
style:"default",
format:"image/jpeg",
tileMatrixSetID:"tiandituImgMarker",
show:true,
maximumLevel:16
}),
1.0,
false
);
}
function addBaseLayerOption(name, imageryProvider) {
var layer;
if (typeof imageryProvider === "undefined") {
layer = imageryLayers.get(0);
viewModel.selectedLayer = layer;
} else {
layer = new Cesium.ImageryLayer(imageryProvider);
}
layer.name = name;
baseLayers.push(layer);
}
function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
var layer = imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = name;
Cesium.knockout.track(layer, ["alpha", "show", "name"]);
}
function updateLayerList() {
var numLayers = imageryLayers.length;
viewModel.layers.splice(0, viewModel.layers.length);
for (var i = numLayers - 1; i >= 0; --i) {
viewModel.layers.push(imageryLayers.get(i));
}
}
setupLayers();
updateLayerList();
//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout
.getObservable(viewModel, "selectedLayer")
.subscribe(function (baseLayer) {
// Handle changes to the drop-down base layer selector.
var activeLayerIndex = 0;
var numLayers = viewModel.layers.length;
for (var i = 0; i < numLayers; ++i) {
if (viewModel.isSelectableLayer(viewModel.layers[i])) {
activeLayerIndex = i;
break;
}
}
var activeLayer = viewModel.layers[activeLayerIndex];
var show = activeLayer.show;
var alpha = activeLayer.alpha;
imageryLayers.remove(activeLayer, false);
imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
baseLayer.show = show;
baseLayer.alpha = alpha;
updateLayerList();
});
//end图层
</script>
</body>>
</html>>
