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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波