cesium 之圖層管理器篇（附源碼下載）

前言

cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。

內容概覽

1.基於cesium 實現圖層管理器效果
2.源代碼 demo 下載

本篇實現 cesium 圖層管理器功能，效果圖如下：

• 圖層配置文件信息

 

/*地圖圖層菜單目錄構造*/
/*
*name-圖層名稱
*layerurl-圖層服務配置
*type代表地圖服務類型:
0代表ArcGisMapServerImageryProvider;
1代表createOpenStreetMapImageryProvider;
2代表WebMapTileServiceImageryProvider;
3代表createTileMapServiceImageryProvider;
4 代表UrlTemplateImageryProvider;
5 代表WebMapServiceImageryProviderr(WMS);
6 代表kml,kmz;
7 代表geoJson;
*layerid-圖層id
*/
MapConfig.Layers = [
{ id: 1, pId: 0, name: "基礎圖層",checked:false },
{
id: 11,
pId: 1,
name: "海島",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_HD",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 12,
pId: 1,
name: "地質鑽孔",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_ZDZK",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 13,
pId: 1,
name: "漁業資源",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_YYZY",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 14,
pId: 1,
name: "海洋生態保護",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_HYSTBH",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 15,
pId: 1,
name: "岸線資源",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_AXZY",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 16,
pId: 1,
name: "海洋規划",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_HYGH",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
{
id: 17,
pId: 1,
name: "行政區划",//WMS-T
layerurl: "http://gisserver:18081/geoserver/gwc/service/wms",
layerid: "NAD_XZQH",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},
/*{
id: 13,
pId: 1,
name: "水東港路網",//WMS
layerurl: "http://gisserver:18081/geoserver/DEGSRPT/wms",
layerid: "GEO_MM_ROAD",
IsWebMercatorTilingScheme:true,//是否創建摩卡托投影坐標系,默認是地理坐標系
type: 5,
checked: false
},*/
 
/*{ id: 2, pId: 0, name: "業務圖層",checked:false },
{
id: "facilities.kml",
pId: 2,
name: "點-kml",//kml
layerurl: GLOBAL.domainResource+"/systems/common-bx-gis/models/cesium/SampleData/kml/facilities/facilities.kml",
type: 6,
checked: false
},*/
/*{
id: "gdpPerCapita2008.kmz",
pId: 2,
name: "kmz",//kmz
layerurl: GLOBAL.domainResource+"/systems/common-bx-gis/models/cesium/SampleData/kml/gdpPerCapita2008.kmz",
type: 6,
checked: false
},*/
/*{
id: "simplestyles.geojson",
pId: 2,
name: "geoJson",//geoJson
//layerurl: GLOBAL.domainResource+"/systems/common-bx-gis/models/cesium/SampleData/simplestyles.geojson",
layerurl: GLOBAL.domainResource+"/systems/common-bx-gis/models/cesium/SampleData/tf.geojson",
type: 7,
checked: false
},*/
];

• 圖層管理器核心代碼

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波