likes
comments
collection
share

Cesium + 天地图 本地部署方案

作者站长头像
站长
· 阅读数 16

演示地址

cesium: v1.111.0

近年来，地理信息系统（GIS）的应用越来越广泛，而Cesium和天地图作为GIS领域的两个重要工具，相结合的本地部署方案备受关注。本文将介绍如何在本地环境中搭建Cesium与天地图的集成方案，为地理可视化提供更灵活、定制化的解决方案。

1. 准备工作

在开始之前，确保你已经完成以下准备工作：

  • 安装Node.js和npm
  • 下载Cesium的最新版本
  • 获取天地图的API密钥

2. Cesium的安装与配置

首先，解压Cesium的压缩包，并进入Cesium-1.111\Build\Cesium目录。然后，新建index.html文件，复制下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Document</title>
    <link href="./Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="./Cesium/Cesium.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // 测试 可以不用注册Cesium账号
      // Cesium.Ion.defaultAccessToken = "Your AccessToken";
      const viewer = new Cesium.Viewer("map");
      const imageryLayers = viewer.imageryLayers;
      imageryLayers.removeAll();
      const imageryProvider1 = new Cesium.UrlTemplateImageryProvider({
        url: "http://localhost:80/v1" + "/{z}/{x}/{y}.png",
        minimumLevel: 0,
        maximumLevel: 10,
      });
      const imageryProvider2 = new Cesium.UrlTemplateImageryProvider({
        url: "http://localhost:80/v2" + "/{z}/{x}/{y}.png",
        minimumLevel: 0,
        maximumLevel: 10,
      });
      imageryLayers.addImageryProvider(imageryProvider1);
      imageryLayers.addImageryProvider(imageryProvider2);
    </script>
  </body>
</html>

3.天地图本地部署

  • 下载天地图瓦片文件(不便演示)

    影像底图

Cesium + 天地图 本地部署方案

影像标注

Cesium + 天地图 本地部署方案

  • 安装Nginx，在Nginx目录下的html目录下新建v1和v2目录，分别存放影像底图和影像标注。
# Nginx 基本配置文件
worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    gzip  on;
    server {
        listen       80;
        server_name  localhost;
        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

启动Nginx。

3. 启动本地服务

在vscode安装Live Server，启动本地 web服务器。现在，打开浏览器访问http://127.0.0.1:5500/index.html，你将看到一个基于Cesium和天地图的地理可视化界面。

Cesium + 天地图 本地部署方案 Cesium + 天地图 本地部署方案

4. 定制化与拓展

通过本地部署，你不仅可以享受Cesium和天地图提供的基本功能，还能更灵活地定制化你的地理信息应用。在项目中添加自定义图层、处理地理数据等都变得更加容易。

总的来说，Cesium与天地图的本地部署方案为GIS开发者提供了强大的工具，使他们能够更好地掌控地理信息可视化的方方面面。希望这个简要的教程能够帮助你成功搭建本地环境，开始你的地理信息之旅！