首页 > 其他分享 >基于VUE3开发的CAD图可视化平台代码开源了

基于VUE3开发的CAD图可视化平台代码开源了

时间:2023-04-02 17:34:22浏览次数:55  
标签:控件 底图 数据源 地图 可视化 VUE3 图层 CAD

前言

唯杰地图VJMAPCAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案,支持的格式如常用的AutoCADDWG格式文件、GeoJSON等常用GIS文件格式,它使用 WebGL矢量图块自定义样式呈现交互式地图, 提供了全新的大数据可视化可视化功能。

唯杰地图可视化平台旨在打造出一个直观、易于操作的地图展示界面, 为用户提供一种简便、高效、精准的CAD地图Web可视化方案,打造出CAD图WEBGIS低码平台

视频示例教程 唯杰地图可视化之停车场路径规划 https://www.bilibili.com/video/BV1oX4y1r7L3/

唯杰地图可视化平台(vue3+ts)源码可免费下载!!!

概念

一个地图通常由底图、数据源、图层、UI控件所组成。

  • 底图

    底图指处于所有图层和图形最下方的一个图层。 底图可以是CAD做为底图,也可以用互联网地图如天地图、高德地图做为底图

  • 数据源

    地图将数据供给和图层渲染做了解耦,数据源用于定义底层数据的数据格式和加载方式,基于数据源请求的数据内容,不同的图层将其中全部或部分数据进行可视化渲染,以此完成整张地图的绘制。

    数据源包括: GeoJSON、栅格瓦片地址、矢量瓦片地址、视频地址、图像地址等

  • 图层

    图层是构成地图的基本单元之一,它们用于定义地图的外观和行为。图层是一组用于显示数据的可视元素。每个图层都可以包含不同类型的地理数据,并使用各种绘制样式呈现。

    图层包括: 矢量数据图层、栅格图层、热力图图层、背景图层等

    某些图层的数据需要和数据源相绑定,当数据源中的数据发生变化了,相应的图层显示也会发生变化。

  • UI控件 主要用于与地图的交互或信息的展示。如导航条控件、缩放控件、全屏控件、绘图控件、小地图控件等。

 

唯杰地图可视化平台介绍

新建

image-20230401192524209

选择底图

image-20230401192758422

选择底图后,可以在地图样式中对地图样式进行设置, 在地图选项对地图的初始显示位置进行设置。

数据源

 

image-20230401193207438

  • GeoJson数据源:

静态数据:静态的geojson数据,可以直接输入或者在图上拾取获取、或随机生成;

图形查询数据:通过后台查询CAD图的数据获取得指定条件的GeoJSON数据;

图形绘制数据:通过在图上绘制不同的图形获取到绘制的GeoJSON数据;

动态数据:动态数据是指对Geojson进行一定的处理或定时处理后的GeoJSON数据;

  • WMS数据源:

是指通过WMS叠加CAD图或互联网图的栅格或矢量瓦片地址数据源

  • 栅格瓦片数据源

  • 矢量瓦片数据源

  • 图像数据源

  • 视频数据源

做为示例,我们选择geojson静态数据,随机生成了一些geojson点数据

image-20230401193939626

image-20230401194103962

图层

image-20230401194408649

选择确定后

image-20230401194527244

点击图层,可进入图层详细设置界面

image-20230401194625391

控件

image-20230401194940460

逻辑

通过可视化无法配置的逻辑部分,需编写逻辑代码

image-20230401200737549

也可以通过工具栏上面下载html,vue等相关代码工程,在vscode等编辑器中实现逻辑代码编写,这样语法提示,调试体验更佳些。

设置

image-20230401201655916

发布和导出

image-20230401202123805

临时修改时,可保存至本地。发布时将数据保存至服务端即可。

项目管理

回至唯杰地图可视化首页,点击操作按钮,可以对相应项目进行管理

 
image-20230401202333728

标签:控件,底图,数据源,地图,可视化,VUE3,图层,CAD
From: https://www.cnblogs.com/vjmap/p/17280850.html

相关文章

  • vue3 directive自定义指令
    importstorefrom'../store'//新建jsexportdefault{install(app){//权限控制,没有相关的权限,则删除模块app.directive('permission',{mounted(el,val){if(el&&!store.state.rule.includes(val.valu......
  • Vue3学习笔记(7.0)
    Vue3计算属性计算属性关键词:computed计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符的例子:<!--*@Author:[email protected]*@Date:2023-03-3008:30:35*@LastEditors:Mei*@LastEditTime:2023-03-3008:33:36*@FilePath:\vscode\vue_co......
  • Vue3学习笔记(4.0)
    vue.js为两个最为常用的指令提供了特别的缩写://全称<av-bind:href="url"></a>//缩写<a:href="url"></a>v-on缩写//全称<av-on:click="doSomething"></a>//缩写<a@click="doSonthing"></a>条件判断条件判断使......
  • vue3面包屑导航栏
    import{useRoute,useRouter}from"vue-router";import{computed,ref,watch,watchEffect,nextTick}from"vue";constrouter=useRouter()constroute=useRoute()constbreadcrumb=ref([])/***@Date:2023-03-2817:55:20*@descript......
  • vue3+elementPlus 深色主题切换
    首先安装需要的两个依赖npmi@vueuse/corenpminstallelement-plus--save在main.js中引入css文件,自定义深色背景颜色可以看ElementPlus官方网站//引入elementUIimportElementPlusfrom'element-plus'importzhCnfrom'element-plus/dist/locale/zh-cn.mjs'//引入......
  • defineExporse vue3中一个由子组件导出数据,让父组件调用的方法。
    子组件<scriptsetup>import{ref,reactive}from'vue'constisFlag=ref(false)constdata=reactive({name:'tom',age:18})//把数据导出defineExpose({data,isFlag})&......
  • 如何基于AI视觉识别技术实现明厨亮灶可视化监管?
    为保障食品安全,近年来各地市场监督管理局以云计算、大数据、人工智能为技术支撑,叠加视频监控技术,全力打造“互联网+明厨亮灶”智慧食安监管服务体系。实现对后厨的透明化、规范化、智能化管理。今天我们着重介绍下,如何基于AI视觉识别技术实现对餐饮服务单位可视化监管。SkeyeVSS综......
  • R语言SVM支持向量机、文本挖掘新闻语料情感情绪分类和词云可视化
    支持向量机(SVM)是一种机器学习方法,基于结构风险最小化原则,即通过少量样本数据,得到尽可能多的样本数据。支持向量机对线性问题进行处理,能解决非线性分类问题。本文介绍了R语言中的SVM工具箱及其支持向量机(SVM)方法,并将其应用于文本情感分析领域,结果表明,该方法是有效的。在此基础上,对......
  • R语言GAMLSS模型对艾滋病病例、降雪量数据拟合、预测、置信区间实例可视化
    GAMLSS模型是一种半参数回归模型,参数性体现在需要对响应变量作参数化分布的假设,非参数性体现在模型中解释变量的函数可以涉及非参数平滑函数,非参数平滑函数不预先设定函数关系,各个解释变量的非线性影响结果完全取决于样本数据。它克服了GAM模型和广义线性模型(GeneralizedLinearM......
  • [vue3]npm创建环境
    1.npm安装vuecli[root@Python20230401VUE3]#npminstall-g@vue/cli2.查看vue版本[root@Python20230401VUE3]#vue--version@vue/cli5.0.83.创建项目[root@Python20230401VUE3]#vuecreatehello-world4.执行项目$cdhello-world$npmrunserve......