Cesium + 天地图 本地部署方案

演示地址

cesium: v1.111.0

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

1. 准备工作

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

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

2. Cesium的安装与配置

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

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.天地图本地部署

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

    影像底图

影像标注

  • 安装Nginx,在Nginx目录下的html目录下新建v1和v2目录,分别存放影像底图影像标注
conf 复制代码
# 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和天地图的地理可视化界面。

4. 定制化与拓展

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

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

相关推荐
qq_415216252 小时前
html pc和移动端共用一个页面,移动端通过缩放达到适配页面,滚动飘窗
前端·html
ss2733 小时前
手写MyBatis第36弹:MyBatis执行流程中SQL命令类型解析
前端·javascript·html
vivi_and_qiao14 小时前
HTML的form表单
java·前端·html
艾欧泽亚白魔法师19 小时前
Cesium虚线圆
cesium
荻酷社区2 天前
HTML+CSS+JavaScript实现的AES加密工具网页应用,包含完整的UI界面和加密/解密功能
javascript·css·html
Spider_Man2 天前
懒加载那些事儿:图片也有“拖延症”?
前端·javascript·html
一点一木3 天前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
晴空雨3 天前
Emmet 完全指南:让 HTML/CSS 开发效率提升 10 倍
前端·html
然我3 天前
一篇吃透移动端适配!从原理到实战,面试题也帮你整理好了 📱
前端·css·html
Summer不秃4 天前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html