前言

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

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

cesium 之图层管理器篇(附源码下载)的更多相关文章

  1. Cesium专栏-填挖方分析(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  2. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  4. vue集成cesium,webgis平台第一步(附源码下载)

    vue-cesium-platform Vue结合Cesium的web端gis平台 初步效果 笔记本性能限制,运行Cesium温度飙到70度以上.所以平时开发时先开发界面,之后加载Cesium地球 当 ...

  5. cesium 入门开发系列地图鹰眼功能(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...

  6. Cesium专栏-气象雷达动图(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  7. cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  8. cesium结合geoserver利用WFS服务实现图层删除(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  9. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. Python_doc文件写入SQLite数据库

    #docx文档题库包含很多段,每段一个题目,格式为:问题.(答案) #数据库datase.db中tiku表包含kechengmingcheng.zhanngji.timu.daan四个字段 impor ...

  2. 易用性测试、本地化测试、部署测试、无障碍测试、回归测试、冒烟测试、A/B测试

    1.易用性定义: 易用性测试是指测试用户使用软件时是否感觉方便,是否能保证用户使用的测试类型2.本地化测试: ·定义:针对软件的本地化版本实施的针对性测试 ·测试内容: (1)语言,书写习惯 (2)时 ...

  3. CDN及CDN加速原理

    本想自己写这个主题的文章,但网上已经有人写了一篇非常好的文章,觉得难以望其项背.就没有必要再写,直接转载如下: 在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应速度.优化现有Inte ...

  4. bootstrap学习地址2017.6.1

    http://www.runoob.com/bootstrap/bootstrap-tutorial.html

  5. jmeter使用csv进行参数化(一)

    先录制一个脚本,具体录制可以参考笔者的随笔:http://www.cnblogs.com/wuyazi/p/8889770.html 1.准备参数化文本内容:mac没有自带的txt文本编辑器,笔者是在 ...

  6. JS题目合集---新技术层出不穷,打好基础才是上策~

    在IT界中公司对JavaScript开发者的要求还是比较高的,但是如果JavaScript开发者的技能和经验都达到了一定的级别,那他们还是很容易跳到优秀的公司的,当然薪水就更不是问题了.但是在面试之前 ...

  7. 14.app后端如何设计api

    app和后端的交互,一般都是通过后端提供的api实现.api的设计,估计很多刚进入app后端的小伙伴会一无头绪,不知道怎么入门.下面根据自己3年的app后端经验,总结出下几个api设计原则,给小伙伴参 ...

  8. DW自动换行

    查看→代码视图选项→自动换行

  9. 【BZOJ 4010】 [HNOI2015]菜肴制作

    Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...

  10. 【组合数学】Bzoj2916 [Poi1997]Monochromatic Triangles

    Description 空间中有n个点,任意3个点不共线.每两个点用红线或者蓝线连接,如果一个三角形的三边颜色相同,那么称为同色三角形.给你一组数据,告诉你哪些点间有一条红线,计算同色三角形的总数. ...