加载自定义影像数据

一、创建服务器

1、上面的方法用的是Express框架自己写的服务器，现在发现安装http-server可以直接通过简单指令创建服务器，我们可以先全局安装

npm install http-server -g

2、然后通过以下指令创建监听4400端口的服务器，http-server可以简写成hs

http-server -p 端口号（4400）

二、加载数据

1、因为有些数据不能直接访问，会被墙，报跨域请求错误，我们添加谷歌中国地图

//加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
 var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"; 
 var Google = new Cesium.UrlTemplateImageryProvider({url:url})

2、将数据图层变换控件关闭，并加载自己的数据

var viewer = new Cesium.Viewer('cesiumContainer',{
// 将图层选择的控件关掉，才能添加其他影像数据
baselLayerPicker:false,
imageryProvider:Google
});

3、在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="Build/Cesium/Cesium.js"></script>
        <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <style>
            body{
                margin:0px;         
            }
            #cesiumContainer {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
        <script>
            //加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
            var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"; 
            var Google = new Cesium.UrlTemplateImageryProvider({url:url})
            
            //Viewer第一个参数容器就是需要上面的div容器承载
            var viewer = new Cesium.Viewer('cesiumContainer',{
              // 将图层选择的控件关掉，才能添加其他影像数据
              baselLayerPicker:false,
              imageryProvider:Google
            });
        </script>
    </body>
</html>

加载自定义影像数据

猜你喜欢