Cesium教程 (3) 矢量切片mvt-imagery-provider加载

news2024/11/13 3:35:28

Cesium教程 (3) 矢量切片mvt-imagery-provider加载

目录

0. 矢量切片

1. 开源项目

2. 环境

3. 代码

4. TODO


0. 矢量切片

        WMTS:加载最快,图片格式,样式固定;

        WMS:加载数量大则慢,但可以点击查询等;

        WFS:编辑矢量属性信息,很少用;

        矢量切片:XYZ、TMS的服务方式,想要经常更新样式,且快速渲染,那么矢量切片最合适。其速度在WMTS和WMS之间。标准主要为mvt-pbf。

        矢量切片:mapbox提出的,mapbox-gl、maplibre-gl、openlayers、leaflet都支持,这几个属mapbox功能性能最好。但是mapbox的开源协议从2之后不友好,即使其2.9之后有球的形状,但是对于三维的功能不如cesium更强大,但是cesium不支持mvt的矢量切片,支持小数据量的geojson,超过5000 entities的geojson cesium会崩溃。如果想让cesium能实现类似矢量切片的渲染,只能通过仿照imageryProvider。mapbox有这样的能力,直接通过其加载,再渲染给cesium。

1. 开源项目

        网上搜索的cesium矢量切片:cesium加载mvt格式的矢量切片、cesium加载arcgis server的矢量切片,前者是开源的,后者需要商用,既然有商用的没太大必要,直接用其API即可。所以,我们主要用开源的mvt。

        https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer 基础核心cesium能实现mvt矢量切片渲染的底层关键,很多项目都是通过调用它来进一步实现的。

        https://github.com/hongfaqiu/MVTImageryProvider 推荐!本文所使用的库,依赖的maobox-gl版本样式较老为0.43.0,但是支持到mapbox-gl 1.x版本,不过对于basic样式足够了,应该满足需求。当然这个也是参考了https://github.com/kikitte/MVTImageryProvider实现的。

        https://github.com/reearth/cesium-mvt-imagery-provider 当然也可以用这个!

        https://github.com/davenquinn/cesium-vector-provider

2. 环境

        cesium 1.103及其以下版本

        mvt-imagery-provider (其主要通过这个库 mvt-basic-render 来渲染,这里支持ES6,如果想直接用Mapbox-vector-tiles-basic-js-renderer的mapbox-gl.js 推荐在html script引入,因为其是commonJS)

        vue3

        采用vue-cli,那么webpack打包必不可少,vue.config.js配置vue3配置cesium参考vue3 cesium安装配置教程(共5种方式-推荐第3-4种)_LEILEI18A的博客-CSDN博客

3. 代码

// 主要采用ES6格式的 TS的 mvt-imagery-provider

<template>
    <div id="container">
        <div id="CesiumContainer"></div>
        
    </div>
</template>

<script>
    import {reactive, ref, onMounted} from "vue";
    import * as Cesium from "cesium";
    import "cesium/Source/Widgets/widgets.css";
    // import MVTImageryProvider from "../utils/util.js";
    import MVTImageryProvider from "mvt-imagery-provider";
    export default {
        name: "Data02",
        components: {

        },
        setup(){
            var legend = reactive({});
            const firstCesium = ()=>{
                
                //测试本地geoserver 或者 postgis产生的mvt矢量切片
                const geoserverStyle = {
                    version: 8,
                    sources: {
                        maplibre: {
                            type: "vector",
                            // 'scheme': 'tms',
                            tiles: ['https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf'],
                            maxzoom: 6,
                            minzoom: 0,
                        },
                    },
                    // glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
                    layers: [
                        // {
                        //     id: "00",
                        //     'source': 'maplibre',
                        //     'source-layer': 'countries',
                        //     type: "fill",
                        //     paint: {
                        //         "fill-color": "#fdaf6b",
                        //     },
                        // }
                        {
                            "id": "countries-fill",
                            "type": "fill",
                            "paint": {
                                "fill-outline-color": "#000000",
                                "fill-antialias": true,
                                "fill-color": [
                                    "match",
                                    [
                                        "get",
                                        "ADM0_A3"
                                    ],
                                    [
                                        "ARM",
                                        "ATG",
                                        "AUS",
                                        "BTN",
                                        "CAN",
                                        "COG",
                                        "CZE",
                                        "GHA",
                                        "GIN",
                                        "HTI",
                                        "ISL",
                                        "JOR",
                                        "KHM",
                                        "KOR",
                                        "LVA",
                                        "MLT",
                                        "MNE",
                                        "MOZ",
                                        "PER",
                                        "SAH",
                                        "SGP",
                                        "SLV",
                                        "SOM",
                                        "TJK",
                                        "TUV",
                                        "UKR",
                                        "WSM"
                                    ],
                                    "#D6C7FF",
                                    [
                                        "AZE",
                                        "BGD",
                                        "CHL",
                                        "CMR",
                                        "CSI",
                                        "DEU",
                                        "DJI",
                                        "GUY",
                                        "HUN",
                                        "IOA",
                                        "JAM",
                                        "LBN",
                                        "LBY",
                                        "LSO",
                                        "MDG",
                                        "MKD",
                                        "MNG",
                                        "MRT",
                                        "NIU",
                                        "NZL",
                                        "PCN",
                                        "PYF",
                                        "SAU",
                                        "SHN",
                                        "STP",
                                        "TTO",
                                        "UGA",
                                        "UZB",
                                        "ZMB"
                                    ],
                                    "#EBCA8A",
                                    [
                                        "AGO",
                                        "ASM",
                                        "ATF",
                                        "BDI",
                                        "BFA",
                                        "BGR",
                                        "BLZ",
                                        "BRA",
                                        "CHN",
                                        "CRI",
                                        "ESP",
                                        "HKG",
                                        "HRV",
                                        "IDN",
                                        "IRN",
                                        "ISR",
                                        "KNA",
                                        "LBR",
                                        "LCA",
                                        "MAC",
                                        "MUS",
                                        "NOR",
                                        "PLW",
                                        "POL",
                                        "PRI",
                                        "SDN",
                                        "TUN",
                                        "UMI",
                                        "USA",
                                        "USG",
                                        "VIR",
                                        "VUT"
                                    ],
                                    "#C1E599",
                                    [
                                        "ARE",
                                        "ARG",
                                        "BHS",
                                        "CIV",
                                        "CLP",
                                        "DMA",
                                        "ETH",
                                        "GAB",
                                        "GRD",
                                        "HMD",
                                        "IND",
                                        "IOT",
                                        "IRL",
                                        "IRQ",
                                        "ITA",
                                        "KOS",
                                        "LUX",
                                        "MEX",
                                        "NAM",
                                        "NER",
                                        "PHL",
                                        "PRT",
                                        "RUS",
                                        "SEN",
                                        "SUR",
                                        "TZA",
                                        "VAT"
                                    ],
                                    "#E7E58F",
                                    [
                                        "AUT",
                                        "BEL",
                                        "BHR",
                                        "BMU",
                                        "BRB",
                                        "CYN",
                                        "DZA",
                                        "EST",
                                        "FLK",
                                        "GMB",
                                        "GUM",
                                        "HND",
                                        "JEY",
                                        "KGZ",
                                        "LIE",
                                        "MAF",
                                        "MDA",
                                        "NGA",
                                        "NRU",
                                        "SLB",
                                        "SOL",
                                        "SRB",
                                        "SWZ",
                                        "THA",
                                        "TUR",
                                        "VEN",
                                        "VGB"
                                    ],
                                    "#98DDA1",
                                    [
                                        "AIA",
                                        "BIH",
                                        "BLM",
                                        "BRN",
                                        "CAF",
                                        "CHE",
                                        "COM",
                                        "CPV",
                                        "CUB",
                                        "ECU",
                                        "ESB",
                                        "FSM",
                                        "GAZ",
                                        "GBR",
                                        "GEO",
                                        "KEN",
                                        "LTU",
                                        "MAR",
                                        "MCO",
                                        "MDV",
                                        "NFK",
                                        "NPL",
                                        "PNG",
                                        "PRY",
                                        "QAT",
                                        "SLE",
                                        "SPM",
                                        "SYC",
                                        "TCA",
                                        "TKM",
                                        "TLS",
                                        "VNM",
                                        "WEB",
                                        "WSB",
                                        "YEM",
                                        "ZWE"
                                    ],
                                    "#83D5F4",
                                    [
                                        "ABW",
                                        "ALB",
                                        "AND",
                                        "ATC",
                                        "BOL",
                                        "COD",
                                        "CUW",
                                        "CYM",
                                        "CYP",
                                        "EGY",
                                        "FJI",
                                        "GGY",
                                        "IMN",
                                        "KAB",
                                        "KAZ",
                                        "KWT",
                                        "LAO",
                                        "MLI",
                                        "MNP",
                                        "MSR",
                                        "MYS",
                                        "NIC",
                                        "NLD",
                                        "PAK",
                                        "PAN",
                                        "PRK",
                                        "ROU",
                                        "SGS",
                                        "SVN",
                                        "SWE",
                                        "TGO",
                                        "TWN",
                                        "VCT",
                                        "ZAF"
                                    ],
                                    "#B1BBF9",
                                    [
                                        "ATA",
                                        "GRL"
                                    ],
                                    "#FFFFFF",
                                    "#EAB38F"
                                ]
                            },
                            "filter": [
                                "all"
                            ],
                            "layout": {
                                "visibility": "visible"
                            },
                            "source": "maplibre",
                            "maxzoom": 24,
                            "source-layer": "countries"
                        },
                    ]
                };
               
                const provider = new MVTImageryProvider({
                    style: 'https://demotiles.maplibre.org/style.json',
                    // style: geoserverStyle,
                });

                let viewer = new Cesium.Viewer("CesiumContainer", {
                    // infoBox: false,
                    // imageryProvider: new Cesium.TileCoordinatesImageryProvider(),
                    imageryProvider: provider,
                });
                // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
            
                // 去掉logo
                viewer.cesiumWidget.creditContainer.style.display = "none"; 
                
                // 去掉背景图层
                // viewer.imageryLayers.removeAll();
        
                // 鼠标右键 倾斜操作
                viewer.scene.screenSpaceCameraController.tiltEventTypes = [
                    Cesium.CameraEventType.RIGHT_DRAG
                ];
                // 鼠标滑轮 放缩操作
                viewer.scene.screenSpaceCameraController.zoomEventTypes = [
                    Cesium.CameraEventType.WHEEL,
                    // Cesium.CameraEventType.PINCH
                ];
                // 鼠标左键 3D下聚焦局部时给人感觉是平移-本质是地球旋转(范围小-旋转类似平移)
                viewer.scene.screenSpaceCameraController.rotateEventTypes = [
                    Cesium.CameraEventType.LEFT_DRAG
                ];
                
            };
            onMounted(() => {
                firstCesium()
            });
            return {
                legend,
            }
        }
    }
</script>

<style lang="scss" scoped>
    #container {
        position: relative;
        height: 100%;
    }
    #CesiumContainer {
        height: 100%;
        width: 100%;
    }
    #legend {
        position: absolute;
        bottom: 100px;
        right: 20px;
    }
</style>

采用https://demotiles.maplibre.org/style.json加载的,但是不直观

采用自定义json style,即:代码中的geoserverStyle,对于mapbox style基本样式、以及匹配规则可百度即可:对于样式要求mapbox-gl>0.43的,就实现不了了。

4. TODO

        [1] 探索cesium-mvt-imagery-provider这个项目,更新的时间也挺新的,类似本文的推荐探索过程。

        [2] 直接探索Mapbox-vector-tiles-basic-js-renderer,虽然其采用的mapbox版本比较老,但是对于日常需求满足。参考多个mvt-imagery-provider项目,引入Mapbox-vector-tiles-basic-js-renderer中dist的mapbox-gl.js(commonJS引入),按照cesium1.105最新版本改写相关代码,渲染通过前面的mapbox-gl.js实现。主要是根据cesium ImageryProvider的readyPromise 采用哪个函数代替,其已弃用。

        [3] 对于小数据量用geojson,对于影像采用静态WMTS代理,对于大矢量数据,推荐采用postgis动态实现mvt切片(成熟技术),然后前端cesium+mvt-provider实现矢量的渲染点击查看。对于空间分析暂时通过sql 分页 geojson实现高亮等!

        [4] 如果确定肯定不涉及三维的大数据(倾斜、点云、三维矢量等),那么直接采用mapbox-gl,虽然其有开源协议限制,但是自定义样式即可!其也有球的形状了,另外可通过第三方库实现3dtiles三维的加载。

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

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

相关文章

htmlCSS-----CSS选择器(上)

目录 前言&#xff1a; 1.初级选择器 &#xff08;1&#xff09;ID选择器 &#xff08;2&#xff09;class选择器 &#xff08;3&#xff09;标签选择器 &#xff08;4&#xff09;通配选择器 前言&#xff1a; CSS选择器是CSS页面处理的重要组成部分&#xff0c;前面讲到…

MMPose关键点检测实战

安装教程 https://github.com/TommyZihao/MMPose_Tutorials/blob/main/2023/0524/%E3%80%90A1%E3%80%91%E5%AE%89%E8%A3%85MMPose.ipynb git clone https://github.com/open-mmlab/mmpose.git -b tutorial2023 -b代表切换到某个分支&#xff0c;保证分支和作者的教程一致 ra…

基于SpringBoot+Thymeleaf+Mybatis+Html校园二手交易平台

基于SpringBootThymeleafMybatisHtml校园二手交易平台 一、系统介绍1、系统主要功能&#xff1a;2、环境配置 二、功能展示1.主页(客户)2.登陆&#xff08;客户&#xff09;3.我的购物车(客户)4.我的订单&#xff08;客户&#xff09;5.主页&#xff08;管理员&#xff09;6.订…

mybatisplus数据权限插件学习初探 动态表名更换插件 防止全表更新与删除插件

文章目录 学习链接 mybatisplus数据权限插件学习初探前言案例建表用户表订单表 环境准备UserUserMapperUserMapper.xmlOrdersOrdersMapperOrdersMapper.xml 配置UserTypeEnumUserContextHolderCustomizeDataPermissionHandlerMybatisPlusConfig 测试测试类bossdeptManagerclerk…

Redis通信协议、过期回收策略

Redis通信协议-RESP协议 Redis是一个CS架构的软件&#xff0c;通信一般分两步&#xff08;不包括pipeline和PubSub&#xff09;&#xff1a; 客户端&#xff08;client&#xff09;向服务端&#xff08;server&#xff09;发送一条命令 服务端解析并执行命令&#xff0c;返回…

二级指针骚操作实现链表虚拟头节点

重点是不用像其他文章里那样&#xff0c;用一个普通节点成员变量当头节点&#xff0c;节省一点空间占用&#xff0c;反正我觉得有点骚。就不详细交代技术背景了&#xff0c;简而言之&#xff0c;就是链表中第一个节点前没有节点了&#xff0c;只有一个指向它的指针&#xff0c;…

强化学习基础篇[3]:DQN、Actor-Critic详解

【强化学习原理+项目专栏】必看系列:单智能体、多智能体算法原理+项目实战、相关技巧(调参、画图等、趣味项目实现、学术应用项目实现 专栏详细介绍:【强化学习原理+项目专栏】必看系列:单智能体、多智能体算法原理+项目实战、相关技巧(调参、画图等、趣味项目实现、学术应…

从实习到秋招成为一名安全工程师,我是怎么做的

前言 借朋友口述总结了安全招聘面试经历分享&#xff0c;希望更多的人看到这篇文&#xff0c;从中得到启发&#xff0c;找到自己心仪的工作。 基本情况 签了字节的三方&#xff0c;秋招终于告一段落。从八月份边实习边准备秋招到现在&#xff0c;经历了许多&#xff0c;这篇帖…

Linux :: 【简单开发篇 :: vim 编辑器:(1)】:: vim 编辑器的基本认识与三种 vim 常用模式 | 使用:打开编辑、退出保存关闭vim

前言&#xff1a;本篇是 Linux 基本操作篇章的内容&#xff01; 笔者使用的环境是基于腾讯云服务器&#xff1a;CentOS 7.6 64bit。 学习集&#xff1a; C 入门到入土&#xff01;&#xff01;&#xff01;学习合集Linux 从命令到网络再到内核&#xff01;学习合集 目录索引&am…

yolov8Pose实战

目录 前言一、yolov8环境搭建二、测试训练模型&#xff0c;评估模型&#xff0c;并导出模型实测检测效果 测试人体姿态估计 前言 YOLO系列层出不穷&#xff0c;从yolov5到现在的yolov8仅仅不到一年的时间。追踪新技术&#xff0c;了解前沿算法&#xff0c;一起来测试下yolov8在…

【密码学复习】第十章 身份鉴别

身份鉴别的定义 定义&#xff1a;身份鉴别&#xff0c;又称为身份识别、身份认证。它是证实客户的真实身份与其所声称的身份是否相符的过程。 口令身份鉴别 固定口令&#xff08;四&#xff09; 注册环节&#xff1a;双因子认证 ① 接收用户提供的口令pw&#xff08;PIN&…

车辆救援道路救援预约汽修托运小程序

道路救援&#xff1a;指汽车道路紧急救援&#xff0c;为故障车主提供包括诸如&#xff1a;拖吊、换水、充电、换胎、送油以及现场小修等服务(Road-Side Service)&#xff1b; 同时也指交通事故道路救援&#xff0c;包括伤员救治、道路疏导等。 随着我国巨大的汽车拥有量&…

1计算机系统概述_1.2计算机系统层次结构

1.2 计算机系统层次结构 计算机系统&#xff08;CO 自命名&#xff09; 1、CO的组成 硬件系统和软件系统共同构成了一个完整的计算机系统 ——硬件&#xff1a;有形的物理设备&#xff0c;是CO中实际物理装置的总称 ——软件&#xff1a;在硬件上运行的程序和相关的数据及文…

SpringCloud:分布式缓存之Redis哨兵

Redis提供了哨兵&#xff08;Sentinel&#xff09;机制来实现主从集群的自动故障恢复。 1.哨兵原理 1.1.集群结构和作用 哨兵的结构如图&#xff1a; 哨兵的作用如下&#xff1a; 监控&#xff1a;Sentinel会不断检查您的master和slave是否按预期工作自动故障恢复&#xff…

人工智能(pytorch)搭建模型9-pytorch搭建一个ELMo模型,实现训练过程

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型9-pytorch搭建一个ELMo模型&#xff0c;实现训练过程&#xff0c;本文将介绍如何使用PyTorch搭建ELMo模型&#xff0c;包括ELMo模型的原理、数据样例、模型训练、损失值和准确率的打印以及…

labelimg闪退解决方法(之前使用过labelimg,但新一次使用,打开文件夹无反应,再次打开闪退的问题)及标注经验

问题描述&#xff1a; 之前使用过labelimg进行好多次的标注&#xff0c;但新一次运行使用&#xff0c;发现打开目录无反应&#xff0c;再次打开闪退的问题&#xff0c;重启电脑并且从新运行labelimg仍然无效。 解决方法&#xff1a; 关闭labelimg&#xff0c;然后删除文件C…

一文纵览Umi‘s Friends生态,GameFi浪潮的变革者

以“P2E”为特性的 GameFi&#xff0c;代表着游戏时代的新盈利模式&#xff0c;它将 NFT 或其他形式的代币化资产作为游戏内容&#xff0c;游戏内资产的寿命会&#xff0c;则随着这些资产继续存在于玩家的钱包中而延长&#xff08;即便游戏关闭&#xff09;&#xff0c;资产的互…

class文件中,常量池、方法表、属性表,异常表等等相关数据解析!小白就跟我一起对照学【class字节码文件分析】

前言&#xff1a;前段时间读《深入java虚拟机》介绍到class文件的时候&#xff0c;由于理论知识较多&#xff0c;人总感觉疲惫不堪&#xff0c;就泛泛阅读了一下。在工作中使用起来知识点知道&#xff0c;但是总是需要查阅各种资料。今天有时间&#xff0c;继续整理常量池后面的…

session与cookie

session是一种会话机制。当客户端发送登录请求时&#xff0c;服务端会生成一个sessionId存储在cookie中返回给客户端&#xff0c;客户端通过响应数据中的set-cookie字段来获取cookie并保存。如果客户端再向同一网站发送请求时&#xff0c;会自动携带cookie&#xff0c;相当于一…

离散数学_十章-图 ( 5 ):连通性 - 下

&#x1f4f7;10.5 图的连通性 4. 有向图的连通性4.1 强连通4.2 弱连通4.3 &#xff08;有向图的&#xff09;强连通分支 5. 通路与同构6. 顶点间通路个数的计算 4. 有向图的连通性 根据是否考虑边的方向&#xff0c;在有向图中有两种连通性概念&#xff1a; 4.1 强连通 强连…