当前位置：网站首页>Cesium-1.72 learning (earth model creation online offline tile)

Cesium-1.72 learning (earth model creation online offline tile)

2022-06-30 16:17:00 【Eternal wolf tooth】

Insert picture description here

1、 On-line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Quick start  cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMTdmMTdmNS00NzZhLTQwOGMtODQwYy1kZjAyMzNiOTg0ZTYiLCJpZCI6MzMwMjQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTc4OTE3ODl9.yqF540oYBpSme38SIPKUP4t14FA6hXCLFHnvOqPf_Fw'; var viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D  and  Columbus View (CV)  Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button , //terrainProvider: Cesium.createWorldTerrain()// terrain  }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source  </script>

Online loading uses network loading bing Map , Application required Cesium.Ion.defaultAccessToken
Address ：cesium Official website , Register login
Insert picture description here

2、 Offline installation package resources

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Quick start  cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider:new Cesium.UrlTemplateImageryProvider({
      url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D  and  Columbus View (CV)  Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button  }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source  </script>

The offline in the installation package is loaded 3 Level map

3、 Offline Tile Map , Self built map service .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Quick start  cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider:new Cesium.UrlTemplateImageryProvider({
      url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service  //url:'http://localhost:6379/basemap_0-10/{z}/{y}/{x}.png', // Server map service  /** * springboot *  The server   Cross domain configuration  * @Configuration public class MyCorsConfig implements WebMvcConfigurer { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"). //  Allow cross domain domain names , It can be used * Indicates that any domain name is allowed to use  allowedMethods("*"). //  Allow any method （post、get etc. ） allowedHeaders("*"). //  Allow any request header  allowCredentials(true). //  close cookie Information  exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); // maxAge(3600) Show in 3600 Seconds , There is no need to send a pre inspection request , You can cache the result  } }; } } */ fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D  and  Columbus View (CV)  Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button  }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source  </script>

function springboot Set up a map service , Tile Map access across domains , Cross domain configuration is required on the map server .
Case code ：https://github.com/zhangxuhui1992/cesium

原网站

版权声明
本文为[Eternal wolf tooth]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160502158357.html