Vue2中CesiumV1.113.0加载离线地图

Vue2中CesiumV1.113.0加载离线地图，本文以天地图为例。

1.使用nodejs获取天地图

 新建nodejsdownmap项目文件夹，初始化项目
npm init -y

 src/index.js
// An highlighted block
var Bagpipe = require('bagpipe')
var fs = require("fs");
var request = require("request");
var bou = [-180, -85, 180,85];//下载范围

var Minlevel = 1;//最小层级
var Maxlevel = 10;//最大层级
var token = '天地图token';//天地图key(如果失效去天地图官网申请)
var zpath = './text'; // 瓦片目录
var speed = 200;//并发数
var mapstyle = 'vec_w';//地图类型(img_w:影像底图 cia_w:影像标注 vec_w:街道底图 cva_w街道标注,备注，自己再api找相对于的)

var all = [];
var user_agent_list_2 = [
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0",
    "Mozilla/5.0 (X11; U; Linux x86_64; zh-CN; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11",
    "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.133 Safari/534.16",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 TaoBrowser/2.0 Safari/536.11",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.71 Safari/537.1 LBBROWSER",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; QQBrowser/7.0.3698.400)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E)",
    "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.84 Safari/535.11 SE 2.X MetaSr 1.0",
    "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SV1; QQDownload 732; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/4.4.3.4000 Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 UBrowser/4.0.3214.0 Safari/537.36"
]


/**
 * 计算经纬度转换成瓦片坐标
 * @param {Number} lng 经度 
 * @param {Number} lat 纬度
 * @param {Number} level 层级 
 */
function calcXY(lng, lat, level) {
    let x = (lng + 180) / 360
    let title_X = Math.floor(x * Math.pow(2, level))
    let lat_rad = lat * Math.PI / 180
    let y = (1 - Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI) / 2
    let title_Y = Math.floor(y * Math.pow(2, level))
    return { title_X, title_Y }
}
/**
 * 计算每个层级的瓦片坐标
 * @param {Arr} bounding 范围
 * @param {Number} Minlevel 最小层级
 * @param {Number} Maxlevel 最大层级
 */
function mainnAllXY(bounding, Minlevel, Maxlevel) {
    for (i = Minlevel; i <= Maxlevel; i++) {
        alli = {}
        let p1 = calcXY(bounding[2], bounding[3], i);
        let p2 = calcXY(bounding[0], bounding[1], i);
        alli.t = i // 层级
        alli.x = [p2.title_X, p1.title_X] // 瓦片横坐标范围（左至右）
        alli.y = [p1.title_Y, p2.title_Y] // 瓦片纵坐标范围（下至上）
        all.push(alli)
    }

    createDir()
}
mainnAllXY(bou, Minlevel, Maxlevel)

function createDir() {
    fs.access(zpath, fs.constants.F_OK, err => {
        // 创建tiles文件夹
        if (err) fs.mkdir(zpath, err => { })
        for (let z = 0; z <= all.length - 1; z++) {
            fs.access(`${zpath}/${all[z].t}`, fs.constants.F_OK, err => {
                // 创建tiles/Z文件夹 ,Z是层级
                if (err) fs.mkdir(`${zpath}/${all[z].t}`, err => { })
                for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {
                    fs.access(`${zpath}/${all[z].t}/${x}`, fs.constants.F_OK, err => {
                        // 创建tiles/Z/X文件夹 ,X是瓦片横坐标
                        if (err) fs.mkdir(`${zpath}/${all[z].t}/${x}`, err => { })
                    })
                }
            })
        }
        // 文件夹可能较多，等待2s开始下载
        setTimeout(() => {
            task()
        }, 2000)
    })
}

/**
 * 创建下载队列
 */

var sum = 0;
var bag = new Bagpipe(speed, { timeout: 1000 })
function task() {
    for (let z = 0; z <= all.length - 1; z++) {
        for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {
            for (let y = all[z].y[0]; y <= all[z].y[1]; y++) {
                // 将下载任务推入队列
                ++sum
                bag.push(download, x, y, all[z].t)
            }
        }
    }
}



/**
 * 下载图片方法
 * @param {Number} x 
 * @param {Number} y 
 * @param {Number} z 
 */
function download(x, y, z) {
    var ts = Math.floor(Math.random() * 8)//随机生成0-7台服务器
    let imgurl = `http://t${ts}.tianditu.gov.cn/DataServer?T=${mapstyle}&x=${x}&y=${y}&l=${z}&tk=${token}`;
    var ip = Math.floor(Math.random() * 256)//随机生成IP迷惑服务器
        + "." + Math.floor(Math.random() * 256)
        + "." + Math.floor(Math.random() * 256)
        + "." + Math.floor(Math.random() * 256)
    var v = Math.floor(Math.random() * 9)
    var options = {
        method: 'GET',
        url: imgurl,
        headers: {
            'User-Agent': user_agent_list_2[v],
            'X-Forwarded-For': ip,
            "Connection": 'keep-alive'
        },
        timeout: 5000,
        forever: true
    };

    request(options, (err, res, body) => {
        if (err) {
            bag.push(download, x, y, z)
            console.log("request错误", err)
        }
    }).pipe(fs.createWriteStream(`${zpath}/${z}/${x}/${y}.png`).on('finish', () => {
        console.log(`图片下载成功,第${z}层`)
        console.log(--sum)
    }).on('error', (err) => {
        console.log('发生异常:', err);
    }));
}
 package.json
{
  "name": "mapdownload",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "bagpipe": "^0.3.5",
    "request": "^2.88.0",
    "tile-lnglat-transform": "^1.3.2"
  },
  "scripts": {
    "start": "node ./src/index"
  }
}

安装插件

npm i

下载地图切片

npm start

2.iis发布离线地图切片 

3.Cesium加载离线天地图切片

  //加载离线地图
        let imgLayer = new Cesium.UrlTemplateImageryProvider({
          url: "SameUrlPath/{z}/{x}/{y}.png",
          layer: "imgLayer",
          minimumLevel: 1,
          maximumLevel:10,
        });

 SameUrlPath为前端代理后的地址，由于直接使用iis发布后的地址会报跨域错误，所以需要前端代理。

  new Promise(async (resolve, reject) => {
        this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
          selectionIndicator: false,
          infoBox: false,
          contextOptions: {
            // 硬件反走样，默认值为 1
            msaaLevel: 8,
            requestWebgl2: true,
          },
          animation: false,
          timeline: false, // 底部时间线
          fullscreenButton: false, // 全屏
          vrButton: false, // VR
          sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
          baseLayerPicker: false, // 图层选择器（地形影像服务）
          navigationHelpButton: false, // 导航帮助(手势，鼠标)
          geocoder: false, // 位置查找工具
          homeButton: false, // 视角返回初始位置
        });
        this.viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 设置地球颜色
        this.viewer.cesiumWidget.creditContainer.style.display = "none"; // 去除logo
        window.viewer = this.viewer;
        //加载离线地图
        let imgLayer = new Cesium.UrlTemplateImageryProvider({
          url: "SameUrlPath/{z}/{x}/{y}.png",
          layer: "imgLayer",
          minimumLevel: 1,
          maximumLevel:10,
        });
        viewer.imageryLayers.addImageryProvider(imgLayer);
        // 加载地形数据
        viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
          url: "https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=天地图token", //"data/sjzTerrain/", //"http://192.168.1.143:8963/",// Cesium.IonResource.fromAssetId(1), //"http://192.168.1.143:8963/"
          requestWaterMask: true, // 控制水的流动效果
          requestVertexNormals: true, //请求地形照明数据
        });
        viewer.scene.globe.enableLighting = true;
        resolve(viewer);
      }).then(() => {
       
      });

 SameUrlPath为前端代理

  devServer: {
      // host: "localhost",
      //port: "8080",
      hot: true,
      open: false,
      client: {
        overlay: {
          errors: true,
          warnings: false,
        },
      },
      proxy: {
        '/SameUrlPath': {
          target: 'http://192.168.1.143:8769/',
          ws: true, //代理websockets
          changeOrigin: true, // 虚拟的站点需要更管origin
          pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
            '^/SameUrlPath': ''
          }
        }
      }
    }

vue.config.js

const { defineConfig } = require('@vue/cli-service')

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    name: 'vue-cesium',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      new NodePolyfillPlugin(),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/cesium/Build/Cesium/Workers',
            to: 'cesium/Workers'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/ThirdParty',
            to: 'cesium/ThirdParty'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Assets',
            to: 'cesium/Assets'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Widgets',
            to: 'cesium/Widgets'
          }
        ]
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium')
      })
    ],
    module: {
      rules: [
        {
          test: /.js$/,
          include: /(cesium)/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader'
          }
        }
      ]
    },
    devServer: {
      // host: "localhost",
      //port: "8080",
      hot: true,
      open: false,
      client: {
        overlay: {
          errors: true,
          warnings: false,
        },
      },
      proxy: {
        '/SameUrlPath': {
          target: 'http://192.168.1.143:8769/',
          ws: true, //代理websockets
          changeOrigin: true, // 虚拟的站点需要更管origin
          pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
            '^/SameUrlPath': ''
          }
        }
      }
    }
  }
})

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/339889.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

项目解决方案：某城区(区县)社会面视频监控资源接入汇聚解决方案

项目解决方案：某城区(区县)社会面视频监控资源接入汇聚解决方案

目 录 一、概述 二、建设目标及需求 1.建设目标 2.需求分析 2.1 总体需求 2.2 需求细化 三、方案设计 1.设计依据 2.设计原则 3.设计方案 3.1.方案描述 3.2.组网说明 四、产品介绍 1.视频监控综合资源管理平台介绍 2.视频录像服务器和存储 2.1…
阅读更多...
基于SpringBoot的SSM整合案例

基于SpringBoot的SSM整合案例

项目目录: 数据库表以及表结构 user表结构 user_info表结构 引入依赖 父模块依赖: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.12.RELEASE</version>…
阅读更多...
自动弹性，QPS线性提升｜一文读懂云原生数仓AnalyticDB弹性技术原理

自动弹性，QPS线性提升｜一文读懂云原生数仓AnalyticDB弹性技术原理

前言 在全球经济增长放缓的大背景之下&#xff0c;企业在加强数字化建设的过程中&#xff0c;实现效益最大化成为一个绕不开的话题。阿里云瑶池旗下的云原生数仓AnalyticDB MySQL湖仓版&#xff08;以下简称AnalyticDB MySQL&#xff09;在发布之初提供了定时弹性功能&#xf…
阅读更多...
本地读取Excel文件并进行数据压缩传递到服务器

本地读取Excel文件并进行数据压缩传递到服务器

在项目开发过程中&#xff0c;读取excel文件&#xff0c;可能存在几百或几百万条数据内容&#xff0c;那么对于大型文件来说&#xff0c;我们应该如何思考对于大型文件的读取操作以及性能的注意事项。 类库&#xff1a;Papa Parse - Powerful CSV Parser for JavaScript 第一步…
阅读更多...
漏洞复现-SpringBlade export-user SQL 注入漏洞（附漏洞检测脚本）

漏洞复现-SpringBlade export-user SQL 注入漏洞（附漏洞检测脚本）

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…
阅读更多...
什么是ORM？

什么是ORM？

ORM&#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;是一种编程技术&#xff0c;它的目标是实现面向对象编程语言与关系型数据库之间的数据映射和转换。ORM系统允许开发人员使用面向对象的方式来操作数据库&#xff0c;而无需直接编写复杂的SQL查询…
阅读更多...
Cesium叠加超图二维服务、三维场景模型

Cesium叠加超图二维服务、三维场景模型

前言 Cesium作为开源的库要加超图的服务则需要适配层去桥接超图与Cesium的数据格式。这个工作iClient系列已经做好&#xff0c;相比用过超图二维的道友们可以理解&#xff1a;要用Openlayer加载超图二维&#xff0c;那就用iClient for Openlayer库去加载&#xff1b;同样的要用…
阅读更多...
mac自带录屏

mac自带录屏

1、打开 快捷键&#xff1a;Shift Command5 可以在指定存储位置 2、结束 快捷键&#xff1a; CommandControlEsc&#xff08;也可以点击顶部工具栏的结束按钮&#xff09;
阅读更多...
图像数据增广

图像数据增广

目录 一、常用的图像增广方法 1、随机翻转 2、随机裁剪 3、随机颜色变换 二、图像代码实现 1、定义图像显示辅助函数 2、随机翻转 3、随机裁剪 4、随机颜色变换 5、结合多种图像增广方法 三、使用图像增广进行训练 1、下载数据集 2、读取图像并增广 3、多GPU训练 …
阅读更多...
麦芯(MachCore)应用开发教程2 --- 时序

麦芯(MachCore)应用开发教程2 --- 时序

黄国强 2024/01/22 正如计算机的本质是状态机一样&#xff0c;设备也是一个状态机。笔者之前文章“什么是时序”用 switch/case 实现了状态机。在麦芯中&#xff0c;我们用Lambda实现了状态机。相对于switch/case&#xff0c;Lambda更优雅&#xff0c;更符合面向对象。先上代码…
阅读更多...
单元化（Set）架构设计详解：异地多活、突破扩展上限的优选方案

单元化（Set）架构设计详解：异地多活、突破扩展上限的优选方案

文章目录 一、单元化架构基础1、扩展性&#xff08;Scalability&#xff09;概述2、扩展性 - 横向扩展&#xff08;Horizontal Scale&#xff09;3、扩展性 - 纵向扩展&#xff08;Vertical Scale&#xff09;4、扩展性 - 扩展魔方5、一致性 - 数据库事务一致性&#xff08;ACI…
阅读更多...
【中文版ChatGPT4.0！国内可直接用】

【中文版ChatGPT4.0！国内可直接用】

中文版ChatGPT4.0&#xff01;国内可直接用 文心一言微软Copilot迅捷AI写作 在国内使用ChatGPT 4.0可能需要支付每月20美元的费用&#xff0c;约合人民币145元。如果不愿意付费&#xff0c;也可以考虑使用其他免费的AI工具。 目前有许多公司在研发出色的AI大模型&#xff0c;这…
阅读更多...
Python进阶-Anaconda使用总结

Python进阶-Anaconda使用总结

本文是 Anaconda 的使用总结&#xff0c;旨在帮助用户快速搭建 Python 环境、进行数据科学和机器学习工作。首先&#xff0c;介绍了在 Windows 系统上安装 Anaconda 的步骤&#xff0c;包括下载安装程序、配置环境变量以及验证安装。随后&#xff0c;详细列举了 Anaconda 的常用…
阅读更多...
新版AndroidStudio dependencyResolutionManagement出错

新版AndroidStudio dependencyResolutionManagement出错

在新版AndroidStudio中想像使用4.2版本或者4.3版本的AndroidStudio来构造项目&#xff1f;那下面这些坑我们就需要来避免了&#xff0c;否则会出各种各样的问题。 一.我们先来看看新旧两个版本的不同。 1.jdk版本的不同 新版默认是jdk17 旧版默认是jdk8 所以在新版AndroidSt…
阅读更多...
processing集训day03

processing集训day03

编程英语 load 加载 image 图像 hawthorn 山楂 true 真 false 假 if 如果 distance 距离 collision 碰 图片显示 显示图片步骤&#xff1a; 1、准备好图片 2、定义图片变量 3、载入图片至变量 4、进行图片显示 Processing 所支持的图片格式有很多&#xff0c;常见的有…
阅读更多...
全栈没有那么难！15 分钟搞明白 Express.js

全栈没有那么难！15 分钟搞明白 Express.js

Express 是老牌的 Node.js 框架&#xff0c;以简单和轻量著称&#xff0c;几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架&#xff0c;如 Egg.js、Nest.js 等都与 Express 息息相关。 Express 框架使用标准 Node.js 语法&#xff0c;主要由以下 3 个核心部分…
阅读更多...
Elasticsearch8使用统一的CA为HTTP层更新证书

Elasticsearch8使用统一的CA为HTTP层更新证书

官方文档参考&#xff1a; Update certificates with the same CA | Elasticsearch Guide [8.10] | Elastic 使用统一的CA为HTTP层更新证书&#xff0c;包括3部分&#xff1a;在ES集群内某个节点上生成证书&#xff1b;将生成的证书拷贝给集群内其他节点&#xff1b;更新kiban…
阅读更多...
大模型相关学习资料整理

大模型相关学习资料整理

1. 核心2框架 1. semantic-kernel【微软】 https://learn.microsoft.com/en-us/semantic-kernel/overview/ 2. LangChain https://www.langchain.asia/ https://python.langchain.com/docs/get_started/introduction 2. 技术点 1. Function Call https://platform.opena…
阅读更多...
Dell戴尔XPS 8930笔记本电脑原装Win10系统 恢复出厂预装OEM系统

Dell戴尔XPS 8930笔记本电脑原装Win10系统 恢复出厂预装OEM系统

链接&#xff1a;https://pan.baidu.com/s/1eaTQeX-LnPJwWt3fBJD8lg?pwdajy2 提取码&#xff1a;ajy2 原厂系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 文件格式&#xff1a;esd/wim/swm 安装方式&am…
阅读更多...
11- OpenCV：自定义线性滤波（卷积，卷积边缘）

11- OpenCV：自定义线性滤波（卷积，卷积边缘）

目录 一、卷积 1、卷积概念 2、卷积如何工作 3、常见算子&#xff08;卷积核 Kenel&#xff09; 4、自定义卷积模糊 5、代码演示 二、卷积边缘 1、卷积边缘问题 2、处理边缘 3、相关的API说明 4、代码演示 一、卷积 1、卷积概念 &#xff08;1&#xff09;在OpenC…
阅读更多...
最新文章

Copyright @ 2022~2023