Vue3+TypeScript+Vite集成mars3d.layer.WeiVectorTileLayer加载本地shp文件

news2024/9/20 16:23:08

前景提要,在新建的vite项目中,想要实现mars3d的矢量瓦片方式加载geojson数据。加载本地shp文件。

代码说明:

1.在项目中集成mars3d后,构造map后开始在map上增加读取数据的操作:

mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/340000_full.json" })
    .then(function (geojson) {
      showBJXLine(geojson.features[0])
    })

2.然后使用集成的第三方let CesiumVectorTile的js文件,转换成矢量瓦片的方式geojson。

3.转换时,需要按照mars3d的格式封装好这个js文件,参考以下代码:

1.src\assets\js\CesiumVectorTile.js


 2.src\assets\js\WeiVectorTileLayer.js

//按mars3d规范,将CesiumVectorTile封装下
import { CesiumVectorTile } from "./CesiumVectorTile.js";
import * as mars3d from "mars3d";

class WeiVectorTileLayer extends mars3d.layer.BaseTileLayer {
  //构建ImageryProvider
  async _createImageryProvider(options) {
    return createImageryProvider(options);
  }
}
async function createImageryProvider(options) {
  let provider = new CesiumVectorTile.VectorTileImageryProvider(options); //CesiumVectorTile.js中
  await provider.readyPromise;
  return provider;
}
WeiVectorTileLayer.createImageryProvider = createImageryProvider;

//注册下
const layerType = "weiVectorTile"; //图层类型
mars3d.LayerUtil.register(layerType, WeiVectorTileLayer);
mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider);

//对外接口
mars3d.layer.WeiVectorTileLayer = WeiVectorTileLayer;

3. 在map中addLayer,实现相关效果。

加载本地shp文件

完整的工程参考:

通过百度网盘分享的文件:mars3d-weiVectorTileLayer.zip
链接:https://pan.baidu.com/s/1-szMP0R35CgGzfUvL33d_w?pwd=28ol
提取码:28ol

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

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

相关文章

Git学习尚硅谷(003 git分支操作)

尚硅谷Git入门到精通全套教程(涵盖GitHub\Gitee码云\GitLab) 总时长 4:52:00 共45P 此文章包含第15p-第p18的内容 文章目录 git分支操作分支介绍分支的好处 分支的操作查看分支创建分支切换分支&修改分支合并分支正常合并分支冲突合并 git分支操作…

10,sql约束(2)

MySQL中primary key和unique的区别 在sql、oracle中的constrain有两种约束,都是对列的唯一性限制:unique与primary key,它们的区别如下: 1、unique key要求列唯一,但不包括Null字段,也就是约束的列可以为空…

docker制作达梦数据库驱动的Python镜像记录

docker制作达梦数据库驱动的Python镜像记录 使用Sqlalchemy ORM 操作达梦 提供构建好的docker镜像 docker pull chongjing001/python:3.12 使用虚拟环境(source /venv/bin/activate) 后pip其他库 镜像中安装Python参考上一篇 下载DM8安装包 版本选择 官网 Linux安装包只有 r…

完整指南:CNStream流处理多路并发框架适配到NVIDIA Jetson Orin (二) 源码架构流程梳理、代码编写

目录 1 视频解码代码编写----利用jetson-ffmpeg 1.1 nvstream中视频解码的代码流程框架 1.1.1 类的层次关系 1.1.2 各个类的初始化函数调用层次关系 1.1.3 各个类的process函数调用层次关系 1.2 编写视频解码代码 1.2.1 修改VideoInfo结构体定义 1.2.2 修改解封装代码 …

Kafka【五】Buffer Cache (缓冲区缓存)、Page Cache (页缓存)和零拷贝技术

【1】Buffer Cache (缓冲区缓存) 在Linux操作系统中,Buffer Cache(缓冲区缓存)是内核用来优化对块设备(如磁盘)读写操作的一种机制(故而有一种说法叫做块缓存)。尽管在较新的Linux内核版本中&a…

Spring Cloud全解析:熔断之Hystrix服务监控

Hystrix服务监控 Hystrix除了熔断降级之外,还提供了准实时的调用监控,持续的记录所有通过Hystrix发起的请求的执行信息,并以统计报表的形式展示出来,包括有每秒执行多少请求,多少成功,多少失败等&#xff…

【C++】vector类:模拟实现(适合新手手撕vector)

在实现本文的vector模拟前,建议先了解关于vector的必要知识:【C】容器vector常用接口详解-CSDN博客https://blog.csdn.net/2301_80555259/article/details/141529230?spm1001.2014.3001.5501 目录 一.基本结构 二.构造函数(constructor&…

【算法】位运算

【ps】本篇有 10 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1)位1的个数 .1- 题目解析 .2- 代码编写 2)比特位计数 .1- 题目解析 .2- 代码编写 3)汉明距离 .1- 题目解析 .2- 代码编写 4)只出现一次的数字 .…

3000字带你了解SD提示词用法,一点就通,小白轻松上手(附提示词生成器)(1.4 SD提示词运用)

提示词是什么 提示词是我们向AI模型发出的指令。正确的提示词能让AI准确反馈所需的输出,而优质的提示词则能使AI生成的内容更优质、更符合你的期望。这与编写程序代码颇为相似,准确的代码逻辑是程序正常运行的前提,而优秀的代码则能减少运行…

知识付费小程序源码轻松实现一站式运营,开启知识变现之旅

技术栈: 以下是一个简单的知识付费小程序的示例代码: app.js:小程序的入口文件 App({onLaunch: function () {// 在小程序启动时执行的代码},globalData: {// 存储全局数据userInfo: null // 用户信息} })pages/index/index.js&#xff1…

【学术会议征稿】第四届智能电网与能源互联网国际会议(SGEI 2024)

第四届智能电网与能源互联网国际会议(SGEI 2024) 2024 4th International Conference on Smart Grid and Energy Internet 为交流近年来国内外在智能电网和能源互联网领域的理论、技术和应用的最新进展,展示最新成果,由沈阳工业…

Visual Studio 2022 下载和安装

文章目录 概述一,下载步骤二,安装过程 概述 Visual Studio 提供 AI 增强功能,例如用于上下文感知代码补全的 IntelliSense 和可利用开源代码中的 AI 模式的 IntelliCode。 集成的 GitHub Copilot 提供 AI 支持的代码补全、聊天辅助、调试建议…

ElasticSearch学习笔记(三)RestClient操作文档、DSL查询文档、搜索结果排序

文章目录 前言5 RestClient操作文档5.4 删除文档5.4 修改文档5.5 批量导入文档 6 DSL查询文档6.1 准备工作6.2 全文检索查询6.3 精准查询6.4 地理坐标查询6.5 复合查询6.5.1 相关性算分6.5.2 布尔查询 7 搜索结果处理7.1 排序7.1.1 普通字段排序7.1.2 地理坐标排序 前言 Elast…

qmt量化交易策略小白学习笔记第59期【qmt编程之期权数据--获取指定期权品种的详细信息--原生Python】

qmt编程之获取期权数据 qmt更加详细的教程方法,会持续慢慢梳理。 也可找寻博主的历史文章,搜索关键词查看解决方案 ! 基于BS模型计算欧式期权理论价格 基于Black-Scholes-Merton模型,输入期权标的价格、期权行权价、无风险利率…

Mac 安装Hadoop教程(HomeBrew安装)

1. 引言 本教程旨在介绍在Mac 电脑上安装Hadoop,便于编程开发人员对大数据技术的熟悉和掌握。 2.前提条件 2.1 安装JDK 想要在你的Mac电脑上安装Hadoop,你必须首先安装JDK。具体安装步骤这里就不详细描述了。你可参考Mac 安装JDK8。 2.2 配置ssh环境…

从腰子的营养成分来分析腰子能否“壮阳”,健康地吃腰子。

文章目录 引言I 腰子的营养优点缺点吃腰子无“壮阳”效果II 健康地吃腰子食用前充分清洗浸泡高尿酸及痛风群体慎吃适量吃引言 很多人认为动物内脏有着“以形补形”的好处,如吃动物腰子,能补肾、壮阳,这让很多人对“腰子”非常热爱。 腰子的营养到底如何?经常吃腰子对身体…

优思学院:FMEA与FTA故障树方法对比:工程师必须知道的关键点!

故障树分析(Fault Tree Analysis, FTA)以某个不希望发生的产品故障事件或严重的系统风险(即顶事件)为分析对象,通过自上而下的分层次因果逻辑分析,逐步找出导致故障事件的必要且充分的直接原因,…

日程安排组件DHTMLX Scheduler v7.1 - 支持RFC-5545格式

DHTMLX Scheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天、周、月三个种视图显示。 此版本包括几个备受期待的特性,可以帮助用户增强DHTMLX…

基于php+vue+uniapp的医院预约挂号系统小程序

开发语言:PHP框架:phpuniapp数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:PhpStorm 系统展示 后台登录界面 管理员功能界面 用户管理 医生管理 科室分类管理 医生信息管理 预…

30s到0.8s,记录一次接口优化成功案例!

大家好,我是沐子,推荐一个程序员免费学习的编程网站 我爱编程网(www.love-coding.com) ** 场景** 在高并发的数据处理场景中,接口响应时间的优化显得尤为重要。本文将分享一个真实案例,其中一个数据量达到…