Vue+Cesium从入门到放弃2：Cssium加载各种地图服务

前言

加载地图是作为一个GIS应用最最基础的内容，任何一个涉及到GIS的框架都提供了丰富的地图加载接口，Cesium也不例外。
Cesium提供的地图加载接口可以分为两类：一是针对常用的在线地图，Cesium提供了直接加载的接口，比如ArcGis(ArcGisMapServerImageryProvider)、MapBox(MapboxImageryProvider)、google earth(GoogleEarthEnterpriseImageryProvider），二是针对不同的地图服务类型（TMS、WMS等），Cesium也提供了相应的接口。

Cesium加载google影像
const viewer=new Cesium.Viewer("cesiumContainer")//下同

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      }))
Cesium加载ArcGIS地图
viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
      }))
Cesium加载天地图
//加载影像底图
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url:'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=你的key', 
        layer:'img',
        style:'default',
        tileMatrixSetID:'w'
      }))

//加载注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=你的key',   
        layer:'cia',
        style:'default',
        tileMatrixSetID:'w',
        format:'tiles',
        maximumLevel: 18
      }))

ps:如果没有key请前往：http://lbs.tianditu.gov.cn/home.html
添加天地图其它图层请访问：http://lbs.tianditu.gov.cn/server/MapService.html

Cesium加载高德地图
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url : 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        //高德路网数据
        //url:'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11'
      }))
Cesium加载腾讯地图
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
        customTags : {
          sx: function(imageryProvider, x, y, level) {
            return x>>4;
          },
          sy:function(imageryProvider, x, y, level) {
            return ((1<<level)-y)>>4;
          }
        }
      }))
Cesium加载百度地图

Cesium加载百度地图是一件比较麻烦的事，网上有大佬写了个BDImageryProvider，可以实现百度地图的加载，有需要可以去搜，或联系博主。

其它地图资源

参考资料：

Cesium加载自己的地图服务

在加载自己的地图服务之前你应该清楚你的地图服务属性哪种类型，TMS、WMS还是WTMS？甚至应该确定服务的版本。下面以Geoserver为例，对不同类型的地图服务加载过程进行说明。

TMS
//方法一
viewer.imageryLayers.addImageryProvider(
        new Cesium.createTileMapServiceImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/tms/1.0.0/test%3Adem@EPSG%3A4326@png/{z}/{x}/{y}.png',
          tilingScheme : new Cesium.GeographicTilingScheme()
        }))

//方法2
viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/tms/1.0.0/test%3Adem@EPSG%3A4326@png/{z}/{x}/{reverseY}.png',
          tilingScheme : new Cesium.GeographicTilingScheme()
        }))

不知道怎么获得url？进入Geoserver首页，点击右侧的TMS，在里面找自己要加载的数据。复制href中的内容然后在后面加{z}/{x}/{y}.png

注意两种方法url的差异

在这里插入图片描述

WMS
//方法一
viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:'http://localhost:8088/geoserver/wms?&'+
            'bbox={westProjected}%2C{southProjected}%2C{eastProjected}%2C{northProjected}&'+
          '&Format=image/png&request=GetMap&layers=test:dem&width=550&height=250&srs=EPSG:3857',
          rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))

//方法二
viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapServiceImageryProvider({
          url:'http://localhost:8088/geoserver/test/wms',
          layers:'dem',
          rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))
WMTS
viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/wmts',
          layer:'test:dem',
          style : '',
          format : 'image/png',
          maximumLevel: 19,
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'],
          tileMatrixSetID:'EPSG:4326'//rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))

点击geoserver主页右边的WMTS，找到要加载的数据，定位到ResourceURL标签，其中的template就是我们要的url
在这里插入图片描述
tileMatrixSetID表示要加载的栅格数据集，同样可以大这个页面找到，如下图
在这里插入图片描述
小结：理论上WMTS也可以UrlTemplateImageryProvider加载，UrlTemplateImageryProvider相比其它接口更加强大，也更加复杂，如果没有特殊的需要，建议不要用它加载WMS和WMTS服务。

WFS

Cesium并没有提供加载WFS服务的接口，Cesium能直接加载的矢量数据必须是geojson格式，因此利用Cesium加载WFS服务的一个可行方案是通过ajax请求WFS，将输出格式设置为geojson，然后利用Cesium加载ajax请求得到的geojson数据。

//利用Ajax请求WFS服务
function addWFSLayer(url,options={},callback=null){
    const defaultOptions= {
      service: 'WFS',
      version: '1.0.0',
      request: 'GetFeature',
      outputFormat: 'application/json'
    }
    if(!options['typeName']){
      alert('typeName参数必须提供')
      return
    }
    for(let key in options){
      defaultOptions[key]=options[key]
    }
    let urlString=url+'?'
    for(let key in defaultOptions){
      urlString+=`&${key}=${defaultOptions[key]}`
    }
    axios.get(urlString).then((res)=>{
      if(res.status==200){
        if(callback){
          callback(res.data)
        }
      }
    }).catch((e)=>{
      console.log(e)
    })
  }
//加载geojson
addWFSLayer('http://localhost:8088/geoserver/tiger/ows',{
        typeName:'tiger%3Atiger_roads'
      },(geojson) =>{
        _this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geojson))
      })
Cesium加载单张图片
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
        url:'static/images/a.PNG',
        rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
      }))

ps:如果不设置rectangle，图片将铺满整个地球。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue