Cesium加载本地服务地图

1 、nginx服务配置

    server {
        listen       8008;
        server_name  localhost;
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';   
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';   
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        location / {
            root   html/arcgis;
            index  index.html index.htm;
        }
    }

本地部署代码 仅支持argis导出的tms

  initOffOnlineMap() {
    const viewer = this.widgetViewer;
    viewer.scene.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: "http://127.0.0.1:8008//{z}/{x}/{y}.png",
        fileExtension: "png",
      })
    );
  }

2、 服务器搭建geoservers部署配置，搭建好服务使用tomcat启动这里不赘述；配置nginx代理配置

   location^~/geoserver/{
    add_headerAccess-Control-Allow-Origin*;
   add_headerAccess-Control-Allow-Methods'GET, POST, OPTIONS';
   add_headerAccess-Control-Allow-Headers'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-    
    Since,Cache-Control,Content-Type,Authorization';
   if($request_method='OPTIONS') {
        return204;
  } 
  proxy_passhttp://127.0.0.1:8080;

本地部署代码

const viewer = this.widgetViewer;
    var imageryProvider = new Cesium.WebMapServiceImageryProvider({
      url: "http://127.0.0.1/geoserver/gwc/service/wms",
      layers: "china:base",
      parameters: {
        service: "WMS",
        format: "image/png",
        transparent: true,
        srs: "EPSG:4326",
      },
    });
    viewer.imageryLayers.addImageryProvider(imageryProvider);

3、 加载在线地图列举一个

    const viewer = this.widgetViewer;
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      })
    );

4、加载本地tomcat服务水晶柱下载天地图导出tms格式

tomcat部署如图

image.png

代码调用

        var url = '/maps/gaode' 
        imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: url,
          fileExtension: 'jpg',
          tilingScheme: new Cesium.GeographicTilingScheme({
            ellipsoid: Cesium.Ellipsoid.WGS84,
          }),
          // maximumLevel: 12,
          // rectangle: new Cesium.Rectangle(
          //   Cesium.Math.toRadians(118.10625629),
          //   Cesium.Math.toRadians(36.93599368),
          //   Cesium.Math.toRadians(119.27306322),
          //   Cesium.Math.toRadians(38.15695448)
          // ),
        }),

补充说明

    如果想展示的是局部范围的数据，我们需要先下载几级低级别的全球数据，然后再下载高级别的局部范围的数据，然后拷贝到同一个文件夹下发布

5、加载本地高程地图tomcat服务水晶柱下载导出.terrain格式的文件目录

tomcat部署如图

image.png

代码调用

        const gaocheng = '/gaocheng/gaocheng'
        terrainProvider: Cesium.createWorldTerrain({
          url: gaocheng,
        }),