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

本篇實作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之家小專欄

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

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢