Vue2中CesiumV1.113.0加载离线地图

news2024/11/23 4:44:00
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) / 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: 0,
          maximumLevel:8,
        });

 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: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, //代理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': ''
          }
        }
      }
    }
  }
})

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【python应用】—利用python构造邮件、解析邮件、发送邮件、接收邮件(email、smtplib、imaplib模块)

文章目录 一、前言1、邮件构成二、email模块1、email模块的Message类Message类常用方法2、email.mine模块:构建电子邮件信息MIMEBase类实现3、email.parser模块:解析电子邮件信息4、email.header模块:丰富、解析邮件头5、email.utils模块:其他工具6、email.iterators模块:…

小程序学习-21

目前小程序分包大小有以下限制&#xff1a; 整个小程序所有分包大小不超过 20M单个分包/主包大小不能超过 2M 独立分包&#xff1a;"independent": true

若依前后台分离vue项目放开前台页面拦截配置

若依前后台分离vue项目放开前台页面拦截配置 使用场景某些页面不需要权限就能直接访问的页面 , 例如做个单点登录之类的。这里只需要修改2处即可 ssologin.vue代码 <template> </template> <script> export default {name: "SsoLogin",data() {r…

Python + Selenium —— ActionChains动作链!

当你需要执行复杂的操作时&#xff0c;比如将一个元素按住拖动到另一个元素上去&#xff0c;需要移动鼠标然后点击并按下键盘某个按键等等。 当然&#xff0c;在 Web 页面上&#xff0c;这种操作好像比较少。 但是&#xff0c;如果遇到了怎么办呢&#xff1f;这就需要用到 Ac…

JAVAEE初阶 网络编程(三)

TCP回显服务器 一. TCP的API二. TCP回显服务器的代码分析三. TCP回显服务器代码中存在的问题四. TCP回显服务器代码五. TCP客户端的代码六.TCP为基准的回显服务器的执行流程 一. TCP的API 二. TCP回显服务器的代码分析 这的clientSocket并不是表示用户端的层面东西&#xff0c;…

Git--基本操作介绍(2)

Git 常用的是以下 6 个命令&#xff1a;git clone、git push、git add 、git commit、git checkout、git pull. 说明&#xff1a; workspace&#xff1a;工作区staging area&#xff1a;暂存区/缓存区local repository&#xff1a;版本库或本地仓库remote repository&#xf…

Leetcode—25.K 个一组翻转链表【困难】

2023每日刷题&#xff08;八十二&#xff09; Leetcode—25.K 个一组翻转链表 算法思想 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val…

论文精读--ResNet

ResNet论文 撑起计算机视觉半边天的ResNet【论文精读】_哔哩哔哩_bilibili Abstract Deeper neural networks are more difficult to train. We present a residual learning framework to ease the training of networks that are substantially deeper than those used pre…

代码随想录算法训练营第四十二天|01背包问题、01背包问题(滚动数组)、416. 分割等和子集

题目&#xff1a;01背包问题 文章链接&#xff1a;代码随想录 视频链接&#xff1a;LeetCode:背包问题 题目链接&#xff1a;卡码题目链接 图释&#xff1a; //二维dp数组实现 #include <bits/stdc.h> using namespace std;int n, bagweight;// bagweight代表行李箱空…

​​快速排序(四)——挖坑法,前后指针法与非递归

目录 ​一.前言 二.挖坑法 三.前后指针法 四.递归优化 五.非递归 六.结语 一.前言 本文我们接着上篇文章的重点快排&#xff0c;现在继续讲解对快排优化的挖坑法&#xff0c;前后指针法以及非递归方法&#xff0c;下面是上篇文章快排链接&#xff1a;https://mp.csdn.net…

如何用AirServer进行手机投屏?,Airserver 永久激活注册码

AirServer一款投屏神器&#xff0c;可以帮你轻松地将iPhone、iPad投屏到Mac。是不是经常看到游戏主播用AirServer投屏&#xff1f;此外&#xff0c;AirServer也是视频Up主必备工具之一&#xff01;用来录制演示教程不错。除了实现单个手机投屏到电脑或荧幕。如果你有多画面投屏…

Python - 【Socket】消息粘包处理demo(一)

一. 前言 在网络编程中&#xff0c;粘包是指TCP协议在传输过程中&#xff0c;多条数据被合并成一条数据发送或者一条数据被拆分成多个数据发送的现象。 二. 粘包问题的常规处理方法&#xff1a; 使用固定长度的包头 可以在发送数据前先发送一个固定长度的包头&#xff0c;包…

实现单链表的增删改查

实现单链表的增删改查的功能&#xff1a;头部插入删除/尾部插入删除&#xff0c;查找&#xff0c;在指定位置之前插入数据&#xff0c;删除pos节点&#xff0c;在指定位置之后插入数据&#xff0c;删除pos之后的节点&#xff0c;销毁链表。 SListNode.h #pragma once #includ…

美,英,法,德、意大利和西班牙的geojson,以及区域json

美&#xff0c;英&#xff0c;法&#xff0c;德、意大利和西班牙的geojson文件 json地址 https://pan.baidu.com/s/1nio1bV_j-jAEVqgEHXWsNw?pwdqwer#list/path/GEOJSON 感谢大佬提供的 大佬连接 大佬的知乎原地址 国内geojson获取工具地址 http://da![在这里插入图片描述](h…

【wu-framework-parent 1.2.2-JDK17-SNAPSHOT 新版本中的 ACW】

版本: 1.2.2-JDK17-SNAPSHOT 项目地址&#xff1a;https://gitee.com/wujiawei1207537021/wu-framework-parent/tree/master/wu-smart-intergration/wu-smart-acw 演示地址&#xff1a;http://124.222.48.62:30193/wu-smart-acw-ui/index.html admin/admin docker启动 dock…

智能控制箱解决方案

一、建设背景 在数字时代的浪潮中&#xff0c;智能化的管理和操作已经成为各行业的共同追求。唯众物联网智能控制箱&#xff0c;是一款功能性强、使用安装简单的智能网络传输、温湿度监测、门锁控制综合系统。系统由I/O网络模块、传感器、管理后端、移动端APP组成&#xff0c;辅…

docker-compose搭建redis哨兵模式

文件存放如下图&#xff1a; docker-compose.yml文件内容如下&#xff1a; version: 3.3 services:master:image: redis:3.2.12restart: alwayscontainer_name: redis-mastercommand: redis-server /usr/local/redis/conf/redis.confports:- 6380:6380volumes:- /root/redis/…

【源码】医院绩效管理系统,针对医、护、技、药、管不同岗位,可设置不同的核算方法、核算参数

医院绩效管理系统源码 医院绩效管理系统以国家医院绩效管理考核政策法规为依据&#xff0c;结合医院管理实践&#xff0c;以经济管理指标为核心&#xff0c;医疗质量、安全、效率、效益管理为重点&#xff0c;特别强调持续改进&#xff08;PDCA&#xff09;管理理念。实现医院绩…

从专线到云桥通SD-WAN企业组网开通速度对比

云桥通SD-WAN企业组网和专线是企业在建立和管理广域网连接时广泛采用的两种技术和解决方案。 云桥通SD-WAN企业组网基于软件定义网络技术&#xff0c;通过引入虚拟化、智能路由和网络功能虚拟化等技术&#xff0c;实现对多种网络连接的集中管理和控制。云桥通SD-WAN企业组网能够…

Cyber RT 服务通信

场景&#xff1a; 用户乘坐无人出租车过程中&#xff0c;可能临时需要切换目的地&#xff0c;用户可以通过车机系统完成修改&#xff0c;路径规划模块需要根据新的目的地信息重新规划路径&#xff0c;并反馈修正后的结果给用户&#xff0c;那么用户的修正请求数据与修正结果是如…