WebGIS-Editor 开发笔记 - 框架组件

q7gs7

已于 2024-03-20 16:39:46 修改

阅读量134

点赞数 3

分类专栏： webgis-editor 文章标签：前端 ui vue.js

于 2024-03-20 16:32:31 首次发布

本文链接：https://blog.csdn.net/q7GS7/article/details/136880767

版权

webgis-editor 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了gis-web-ui组件，一个基于Vue2.0的可定制UI面板，支持拖动、自定义SVG图标和扩展组件库。文章详细指导了安装、引入、使用方法以及SVG图标的处理和配置过程。

摘要由CSDN通过智能技术生成

gis-web-ui 组件

gis-web-ui 组件是基于vue2.0 开发的组件，可以通过配置快速搭建可拖动UI 面板，支持导入自定义svg 图标，支持扩展组件库

1. 安装

# 安装    
yarn add gis-web-ui

2. 引入

import 'gis-web-ui/dist/style.css'
import { GisWebUi } from 'gis-web-ui'
// 注册全局组件
Vue.use(GisWebUi)
// 挂载全局变量
Vue.prototype.$Panel = GisWebUi.GisDialog
Vue.prototype.$Bus = GisWebUi.Bus
Vue.prototype.$Event = GisWebUi.Event

3. 使用

<gis-dialog-list />

 initPanel() {
    const panelData = [
      {
        title: '工具栏',
        name: 'GisFeature',
        data: {},
        conf: {
          type: 'tp1'
        },
        show: true,
        style: {
          width: 400,
          height: 280,
          top: 0,
          left: 0,
          margin: '0px',
          border: 'none',
          borderRadius: 0,
          background: '#0e0e1499'
        },
        drag: {
          enabled: true
        }
      }
    ]
    this.$Panel.createFromJson(panelData)
  }

4. 图标

1、创建文件夹

# 创建文件夹
mkdir -p src/assets/icons/svg

2、创建文件

# 创建文件
# touch src/assets/icons/svgo.yml
touch src/assets/icons/index.js

3、文件内容

// src/assets/icons/svgo.yml
// src/assets/icons/index.js
(context => context.keys().map(context))(require.context('@/assets/icons/svg', false, /\.svg$/))

4、注册

// main.js
import '@/assets/icons/index.js'

5、配置

# 安装 svg-sprite-loader
npm install svg-sprite-loader -D

// vue.config.js
chainWebpack: (config) => {
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }