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 = 0;//最小层级
var Maxlevel = 8;//最大层级
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) / 360let title_X = Math.floor(x * Math.pow(2, level))let lat_rad = lat * Math.PI / 180let y = (1 - Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI) / 2let 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++) {// 将下载任务推入队列++sumbag.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: 0,maximumLevel:8,});

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

  new Promise(async (resolve, reject) => {this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {selectionIndicator: false,infoBox: false,contextOptions: {// 硬件反走样，默认值为 1msaaLevel: 8,requestWebgl2: true,},animation: false,timeline: false, // 底部时间线fullscreenButton: false, // 全屏vrButton: false, // VRsceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）baseLayerPicker: false, // 图层选择器（地形影像服务）navigationHelpButton: false, // 导航帮助(手势，鼠标)geocoder: false, // 位置查找工具homeButton: false, // 视角返回初始位置});this.viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 设置地球颜色this.viewer.cesiumWidget.creditContainer.style.display = "none"; // 去除logowindow.viewer = this.viewer;//加载离线地图let imgLayer = new Cesium.UrlTemplateImageryProvider({url: "SameUrlPath/{z}/{x}/{y}.png",layer: "imgLayer",minimumLevel:0,maximumLevel:8,});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, //代理websocketschangeOrigin: true, // 虚拟的站点需要更管originpathRewrite: { //重写路径 比如'/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 assetsCESIUM_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, //代理websocketschangeOrigin: true, // 虚拟的站点需要更管originpathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc''^/SameUrlPath': ''}}}}}
})

 

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024.1.21周报

2024.1.21周报

目录 摘要 ABSTRACT 一、文献阅读 一、题目 二、摘要 三、Introduction 四、模型 一、连续时间模型 二、离散时间模型 五、结论 二、实验代码 Navier–Stokes equation 总结 摘要 本周我阅读了一篇题目为Physics-informed neural networks: A deep learning fra…
阅读更多...
快速傅立叶变换FFT学习笔记

快速傅立叶变换FFT学习笔记

什么是FFT&#xff1f; FFT&#xff08;Fast Fourier Transformation&#xff09; 是离散傅氏变换&#xff08;DFT&#xff09;的快速算法&#xff0c;即快速傅氏变换。FFT使计算机计算离散傅里叶变换所需要的乘法次数大为减少&#xff0c;特别是被变换的抽样点数N越多&#x…
阅读更多...
图像数据增广

图像数据增广

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

ctfshow-反序列化(web271-web276)

目录 web271 web272-273 web274 web275 web276 为什么不用分析具体为什么能成功 ,后面会有几个专题 会对php框架进行更深入的了解 这里面会专门的研究 为什么能够实现RCE 前面作为初步的熟悉 首先知道一下他的框架 知道框架的风格 知道啥版本可以用什么来打 首先先不用太研…
阅读更多...
2024最新软件测试面试题合集

2024最新软件测试面试题合集

1、前端和后端有什么区别 前端能够从 App 屏幕和浏览器上看到的东西。例如&#xff0c;你所看到的内容、按钮、图片&#xff0c;它们都属于前端。 后端就是那些你在屏幕上看不到但又被用来为前端提供支持的东西。网站的后端涉及搭建服务器、保存和获取数据&#xff0c;以及用于…
阅读更多...
自定义注解与拦截器实现不规范sql拦截（自定义注解填充插件篇）

自定义注解与拦截器实现不规范sql拦截（自定义注解填充插件篇）

在自定义注解与拦截器实现不规范sql拦截&#xff08;拦截器实现篇&#xff09;中提到过&#xff0c;写了一个idea插件来辅助对Mapper接口中的方法添加自定义注解&#xff0c;这边记录一下插件的实现。 需求简介 在上一篇中&#xff0c;定义了一个自定义注解对需要经过where判…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05 1. Recursive Algirithm 递归算法2. Data Fusion 数据融合Covarince Matrix协方差矩阵State Space状态空间方程 Observation观测器3. Step by step : Deriatio…
阅读更多...
【Java】面向对象之继承超级详解！！

【Java】面向对象之继承超级详解！！

文章目录 前言一、继承1.1 继承的概念1.1.1继承的语法 1.2 父类成员访问1.2.1 子类中访问父类的成员变量1.子类和父类中没有同名的成员变量2.子类和父类中有同名的成员变量 1.2.2子类中访问父类的成员方法成员方法名不同成员方法名字相同 1.3 super关键字1.4 子类构造方法1.5 继…
阅读更多...
Python零基础教程5.1——Python官方自带Turtle.demo

Python零基础教程5.1——Python官方自带Turtle.demo

官方装13最为致命 牛&#xff01;Python自带画图demo引言DEMO有什么&#xff1f;总结 牛&#xff01;Python自带画图demo 引言 我的电脑不是换新了嘛 所以 不得不重新下载Python 这一下 不得了 我下载了Python3.11.7这个版本 然后按照惯例 打开IDEL 平平无奇 但 我一不小心…
阅读更多...
特斯拉开年再降价，2024年的汽车市场还会好吗？

特斯拉开年再降价，2024年的汽车市场还会好吗？

“等等派”再度胜利&#xff01;1月12日&#xff0c;特斯拉中国官宣Model 3和Model Y降价。其中&#xff0c;Model 3焕新版下降15500元&#xff0c;Model 3长续航焕新版下调11500元&#xff1b;特斯拉Model Y后轮驱动版售价下调7500元&#xff0c;特斯拉Model Y长续航版售价下调…
阅读更多...
《GitHub Copilot 操作指南》课程介绍

《GitHub Copilot 操作指南》课程介绍

第1节&#xff1a;GitHub Copilot 概述 一、什么是 GitHub Copilot 什么是 GitHub Copilot GitHub Copilot是GitHub与OpenAI合作开发的编程助手工具&#xff0c;利用机器学习模型生成代码建议。它集成在开发者的集成开发环境&#xff08;IDE&#xff09;中&#xff0c;可以根…
阅读更多...
Excel象限图

Excel象限图

Excel象限图 1、背景描述2、象限图&#xff08;散点图&#xff09;3、象限图&#xff08;气泡图&#xff09; 1、背景描述 平常我们在工作中做图表时&#xff0c;使用最多的就是柱状形、折线图、饼图&#xff0c;这些图表主要为了展示趋势、对比和构成&#xff0c;但有时候我们…
阅读更多...
旅游项目day12

旅游项目day12

1. ES
阅读更多...
文本生成中的解码器方法

文本生成中的解码器方法

一.解码器的基本介绍 在文本生成任务中&#xff0c;解码器是生成序列的关键组件。解码器的目标是从先前生成的标记或隐藏状态中生成下一个标记。有几种方法用于设计文本生成中的解码器&#xff0c;以下是一些常见的解码器方法&#xff1a; Teacher Forcing&#xff08;教师强…
阅读更多...
自己动手造一个状态机

自己动手造一个状态机

自己动手造一个状态机 引言有限自动状态机 (FSM)五要素应用场景优势 开源产品造个轮子改造点Looplab fsm示例演示实现解析 改造过程 引言 有限自动状态机 (Finite-state machine , FSM) 通常用来描述某个具有有限个状态的对象&#xff0c;并且在对象的生命周期中组成了一个状态…
阅读更多...
flink基本概念

flink基本概念

1. Flink关键组件: 这里首先要说明一下“客户端”。其实客户端并不是处理系统的一部分&#xff0c;它只负责作业的提交。具体来说&#xff0c;就是调用程序的 main 方法&#xff0c;将代码转换成“数据流图”&#xff08;Dataflow Graph&#xff09;&#xff0c;并最终生成作业…
阅读更多...
堆详解与优先级队列

堆详解与优先级队列

导言&#xff1a; 我们知道队列是一种先进先出(FIFO)的数据结构&#xff0c;但是现实情况中&#xff0c;操作的数据有可能会有优先级&#xff0c;优先级高的数据要先出队。例如&#xff0c;医院的军人优先等等。而为此应运而生的就是优先级队列&#xff0c;java中可以使用Prio…
阅读更多...
力扣hot100 相交链表 超全注释 满级表达

力扣hot100 相交链表 超全注释 满级表达

Problem: 160. 相交链表 文章目录 思路复杂度&#x1f496; Ac Code 思路 &#x1f468;‍&#x1f3eb; 参考题解 &#x1f469;‍&#x1f3eb; 参考图解 复杂度 时间复杂度: O ( n m ) O(nm) O(nm) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( 1 ) O(1) O(…
阅读更多...
详谈c++智能指针！！！

详谈c++智能指针！！！

文章目录 前言一、智能指针的发展历史1.C 98/03 的尝试——std::auto_ptr2.std::unique_ptr3.std::shared_ptr4.std::weak_ptr5.智能指针的大小6.智能指针使用注意事项 二、智能指针的模拟实现三、C11和boost中智能指针的关系 前言 C/C 语言最为人所诟病的特性之一就是存在内存…
阅读更多...
Docker是什么

Docker是什么

docker本质 Docker 本质其实是 LXC 之类的增强版&#xff0c;它本身不是容器&#xff0c;而是容器的易用工具。容器是 linux 内核中的技术&#xff0c;Docker 只是把这种技术在使用上简易普及了。Docker 在早期的版本其核心就是 LXC 的二次封装发行版。 Docker 作为容器技术的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023