如何进行地图SDK开发(二)——示例文档

news2024/11/17 15:30:11

概述

前面的文章文章我们写到了SDK的开发以及ak认证的实现,在本文我们继续讲讲地图SDK开发中的示例文档的实现。

技术点

  • vue3
  • vite
  • element-plus
  • monaco-editor

实现后效果

image.png

实现

1. 工程初始化

1.1 搭建工程

搭建工程的过程请参照博文(使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))[https://blog.csdn.net/m0_58565372/article/details/128495815].

1.2 添加依赖

运行命令npm i monaco-editor -S添加monaco-editor依赖。

1.3 修改首页布局

修改/src/views/home/index.vue,修改后代码如下:

<template>
  <div class="container">
    <header class="header">
      LzugisMap示例文档
    </header>
    <div class="main-container">
      <div class="file-tree">

      </div>
      <div class="code-container">
        <div class="title-zone">
          源代码编辑器
          <div class="title-tools">
            <a class="btn">还原</a>
            <a class="btn">运行</a>
          </div>
        </div>
        <div class="content-zone"></div>
      </div>
      <div class="run-container">

      </div>
    </div>
    <footer class="footer">
      Copyright © 2015-2022 LZUGIS
    </footer>
  </div>
</template>

<script>

export default {
  name: 'HomePage',
  data() {
    return {}
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
$bg-color: #3d6eff;
$border: 0.1rem solid #cfcfcf;

.container {
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

.header, .footer {
  padding: 0 1rem;
  background-color: $bg-color;
  color: white;
  width: 100%;
}
.header {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.2rem;
  font-weight: bold;
}
.footer {
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 0.8rem;
}
.main-container {
  width: 100%;
  height: calc(100% - 6rem);
  .file-tree, .code-container, .run-container {
    float: left;
    width: calc(50% - 8.1rem);
    height: 100%;
    border-right: $border;
    overflow: hidden;
  }

  .file-tree {
    width: 16rem;
    overflow-y: auto;
  }

  .code-container, .run-container {
    --title-height: 2.4rem;
    .title-zone {
      height: var(--title-height);
      line-height: var(--title-height);
      padding: 0 0.8rem;
      font-weight: bold;
      background-color: #efefef;
      border-bottom: $border;

      .title-tools {
        float: right;
        .btn {
          font-size: 0.9rem;
          color: $bg-color;
          font-weight: normal;
          margin-left: 0.6rem;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
    }

    .content-zone {
      height: calc(100% - 2.4rem);
    }
  }
  .run-container {
    border-right: none;
  }
}
</style>

image.png

1.4. 引入monaco-editor

首先在/src/views/home/index.vuescript添加引入:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';

self.MonacoEnvironment = {
    getWorker(workerId, label) {
        const workerDict = {
            json: new JsonWorker(),
            html: new htmlWorker()
        }
        return workerDict[label] || new EditorWorker();
    },
};

接着在mounted生命周期中调用初始化方法this.init()

export default {
  name: 'HomePage',
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if(!editor) {
        const editorDom = this.$refs.editor
        editor = monaco.editor.create(editorDom, {
          value: '', //编辑器初始显示文字
          language: 'html', //此处使用的python,其他语言支持自行查阅demo
          theme: 'vs', //官方自带三种主题"vs" | "vs-dark" | "hc-black" | "hc-light"
          selectOnLineNumbers: true,//显示行号
          roundedSelection: false,
          readOnly: false, // 只读
          cursorStyle: 'line', //光标样式
          automaticLayout: true, //自动布局
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 15, //字体大小
          autoIndent: true, //自动布局
          quickSuggestionsDelay: 100, //代码提示延时
        });
      }
    }
  }
}

2. 编写示例

2.1 创建示例目录

创建目录/public/examples,所有的示例文件都放在这个目录下面。

2.1 创建第一个示例

如下图,在examples下新建一个01-basic-基础使用的文件夹,并在下面新建一个01-initmap-初始化地图.html的文件。
image.png

说明:

  1. 文件和文件夹都采用编号-编码-名称的方式进行命名;
  2. 编号能够保证自动生成的目录树排序正确;
  3. 编号+编码需要唯一,编码为英文;
  4. 名称是在左侧的目录树上展示的,为中文;

01-initmap-初始化地图.html的内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始化地图</title>
    <link type="text/css" rel="stylesheet" href="http://localhost:8088/lib/lzugis-map.css">
    <style>
        html, body, .map {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="map" id="map"></div>
<script src="http://localhost:8088/lib/lzugis-map.js"></script>
<script>
const lzugisMap = new LzugisMap()
</script>
</body>
</html>

2.2 生成目录树

在工程根目录下创建files-tree.js文件,内容如下:

import fs from 'fs';
import path from 'path';

const dirName = './public'

function readFileList(dir, filesList = []) {
    const pathName = path.basename(dir);
    const files = fs.readdirSync(dir);
    files.forEach(item => {
        let fullPath = path.join(dir, item);
        const stat = fs.statSync(fullPath);
        if (stat.isDirectory()) {
            readFileList(path.join(dir, item), filesList);  //递归读取文件
        } else {
            const fileName = path.basename(fullPath, '.html');
            const [num, code, name] = fileName.split('-')
            fullPath = fullPath.split('public\\').join('')
            filesList.push({
                base: pathName,
                code: [num, code].join('-'),
                name,
                path: fullPath
            });
        }
    });
    return filesList;
}

function getDirTree() {
    let filesList = [];
    readFileList(dirName + '/examples', filesList);
    let dirs = [], dirsDict = {}
    filesList.forEach(f => {
        const base = f.base
        if(!dirs.includes(base)) dirs.push(base)
        if(!dirsDict[base]) dirsDict[base] = []
        dirsDict[base].push(f)
    })
    return dirs.map(d => {
        const children = dirsDict[d]
        const [num, code, name] = d.split('-')
        return {
            code: [num, code].join('-'),
            name,
            children
        }
    })
}
const file = dirName + '/examples-tree.json'
fs.writeFile(file, JSON.stringify(getDirTree()), { encoding: 'utf8' }, err => {})

package.json文件scripts中修改命令,这样每次运行或者打包的时候都会自动生成目录树。

{
  ...,
  "scripts": {
    "dev": "node ./files-tree.js && vite --mode dev",
    "build:sit": "node ./files-tree.js && vite build --mode sit",
    "build": "node ./files-tree.js && vite build -- mode prod",
  }
}

生成的目录树文件为/public/examples-tree.json,文件的内容如下:
image.png

3. 示例实现

3.1 左侧树实现

通过el-collapse,实现左侧树。

<el-collapse v-model="activeNames">
   <el-collapse-item
       v-for="parent of treeData"
       :key="parent.code"
       :title="parent.name"
       :name="parent.code">
     <ul class="tree-c">
       <li
           v-for="child of parent.children"
           :key="child.code"
           @click="gotoPage(child)"
           :class="child.code === selectPage.code ? 'active' : ''">
         {{ child.name }}
       </li>
     </ul>
   </el-collapse-item>
 </el-collapse>

<script>
{
  // 初始化左侧树结构数据
  init() {
      const url = './examples-tree.json'
      fetch(url).then(res => res.json()).then(res => {
        this.treeData = res
        this.activeNames = [res[0].code]
        this.gotoPage(res[0].children[0])
      })
    }
}
</script>

<style lang="scss" scoped>
.tree-c {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  --item-h: 2.4rem;
  li {
    margin-left: 1.2rem;
    cursor: pointer;
    height: var(--item-h);
    line-height: var(--item-h);
    &:last-child {
      margin-bottom: 0.8rem;
    }
    &.active, &:hover {
      color: $bg-color;
    }
  }
}
</style>

<style lang="scss">
.el-collapse {
  --el-collapse-header-height: 42px;
  padding: 0 1rem;
  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>

3.2 实现预览

通过iframe来实现代码的预览。

<iframe frameborder="0" class="run-iframe" ref="preview"></iframe>
<script>
export default {
  name: 'HomePage',
  data() {
    return {
      treeData: [],
      activeNames: '',
      selectPage: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const url = './examples-tree.json'
      fetch(url).then(res => res.json()).then(res => {
        this.treeData = res
        this.activeNames = [res[0].code]
        this.gotoPage(res[0].children[0])
      })
    },

    initEditor(code) {
      if(!editor) {
        const editorDom = this.$refs.editor
        editor = monaco.editor.create(editorDom, {
          value: '', //编辑器初始显示文字
          language: 'html', //此处使用的python,其他语言支持自行查阅demo
          theme: 'vs', //官方自带三种主题"vs" | "vs-dark" | "hc-black" | "hc-light"
          selectOnLineNumbers: true,//显示行号
          roundedSelection: false,
          readOnly: false, // 只读
          cursorStyle: 'line', //光标样式
          automaticLayout: true, //自动布局
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 15, //字体大小
          autoIndent: true, //自动布局
          quickSuggestionsDelay: 100, //代码提示延时
        });
      }
      editor.setValue(code)
      this.runCode(code)
    },

    runCode(code) {
      let html = code || editor.getValue()
      this.$refs.preview.setAttribute("srcdoc", html);
    },

    reset() {
      this.gotoPage(this.selectPage)
    },

    gotoPage(page) {
      this.selectPage = page
      fetch('./' + page.path).then(res => res.text()).then(res => {
        this.initEditor(res)
      })
    }
  }
}
</script>

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

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

相关文章

javaEE初阶 — 线程池

文章目录线程池1 什么是线程池2 标准库中的线程池2.1 什么是工厂模式2.2 如何使用标准库中的线程池完成任务2.3 ThreadPoolExecutor 构造方法的解释3 实现一个线程池线程池 1 什么是线程池 随着并发程度的提高&#xff0c;随着对性能要求标准的提高会发现&#xff0c;好像线程…

[cpp进阶]C++异常

文章目录C语言传统处理错误的方式C异常概念C异常使用异常的抛出和捕获异常的重新抛出异常安全异常规范自定义异常体系C标准库的异常体系异常的优缺点C语言传统处理错误的方式 传统的错误处理机制&#xff1a; 终止程序。assert断言直接终止程序。缺点&#xff1a;过于粗暴&am…

Fiddler抓取手机APP报文

Http协议代理工具有很多&#xff0c;比如Burp Suite、Charles、Jmeter、Fiddler等&#xff0c;它们都可以用来抓取APP报文&#xff0c;其中charles和Burp Suite是收费的&#xff0c;Jmeter主要用来做接口测试&#xff0c;而Fiddler提供了免费版&#xff0c;本文记录一下在Windo…

位运算做加法,桶排序找消失元素,名次与真假表示,杨氏矩阵,字符串左旋(外加两道智力题)

Tips 1. 2. 3. 大小端字节序存储这种顺序只有在放进去暂时存储的时候是这样的&#xff0c;但是一旦我里面的数据需要参与什么运算之类的&#xff0c;会“拿出来”先恢复到原先的位置再参与运算&#xff0c;因此&#xff0c;大小端字节序存储的什么顺序不影响移位运算等等…

【案例教程】CLUE模型构建方法、模型验证及土地利用变化情景预测实践技术

【前沿】&#xff1a;土地利用/土地覆盖数据是生态、环境和气象等领域众多模型的重要输入参数之一。基于遥感影像解译&#xff0c;可获取历史或当前任何一个区域的土地利用/土地覆盖数据&#xff0c;用于评估区域的生态环境变化、评价重大生态工程建设成效等。借助CLUE模型&…

声音产生感知简记

声音产生 人的发音器官包括:肺、气管、声带、喉、咽、鼻腔、口腔、唇。肺部产生的气流冲击声带,产生震动。 声带每开启和闭合一次的时间是基音周期(Pitch period,T),其到数为基音频率(F.=1/T,基频),范围在70-450Hz。基频越高,声音越尖细,如小孩的声音比大人尖,就是…

编译错误2

本文迁移自本人网易博客&#xff0c;写于2015年11月25日&#xff0c;编译错误2 - lysygyy的日志 - 网易博客 (163.com)1、error C2059:语法错误&#xff1a;“<L_TYPE_RAW>”error C2238:意外的标记位于“;”之前.错误代码定位于&#xff1a;BOOL TreeView_GetCheckState…

excel函数公式:常用高频公式应用总结 上篇

公式1&#xff1a;条件计数条件计数在Excel的应用中十分常见&#xff0c;例如统计人员名单中的女性人数&#xff0c;就是条件计数的典型代表。条件计数需要用到COUNTIF函数&#xff0c;函数结构为COUNTIF(统计区域,条件)&#xff0c;在本例第一个公式COUNTIF(B:B,G2)中&#xf…

《栈~~队列~~优先级队列》

目录 前言&#xff1a; 1.stack 1.stack的介绍 2.stack的使用&#xff1a; 3.stack的模拟实现 4.有关stack的oj笔试题 2.queue 1.队列的介绍 2.队列的使用 3.队列的模拟实现 4.有关队列的oj笔试题 3.priority_queue 1.优先级队列的介绍 2.优先级队列的使用 3.优先级队列的模拟实…

挥别2022,坦迎2023。

第一章&#xff1a;CSDN&#xff0c;我来啦&#xff01;第一节&#xff1a;初遇&#xff01;2022-08-13&#xff0c;我和CSDN相遇啦&#xff01;CSDN&#xff0c;你好呀&#xff01;2022年8月13日&#xff0c;是我与你相遇的日子。这是一个值得纪念的时刻。从此之后&#xff0c…

English Learning - L1-10 时态(下) 2023.1.5 周四

English Learning - L1-10 时态&#xff08;下&#xff09; 2023.1.5 周四8 时态8.3 完成时态核心思想&#xff1a;回首往事&#xff08;一&#xff09;现在完成时核心思想用法延续动作延续时间 “动作一直持续了。。。”延续动&#xff08;无延续时间&#xff09; “做过。。…

AtCoder Beginner Contest 284 A - E

题目地址&#xff1a;AtCoder Beginner Contest 284 - AtCoder 一个不知名大学生&#xff0c;江湖人称菜狗 original author: jacky Li Email : 3435673055qq.com Time of completion&#xff1a;2023.1.8 Last edited: 2023.1.8 目录 题目地址&#xff1a;AtCoder Beginner C…

基于FPGA的UDP 通信(一)

引言手头的FPGA开发板上有一个千兆网口&#xff0c;最近准备做一下以太网通信的内容。本文先介绍基本的理论知识。FPGA芯片型号&#xff1a;xc7a35tfgg484-2网口芯片&#xff08;PHY&#xff09;&#xff1a;RTL8211网络接口&#xff1a;RJ45简述以太网什么以太网&#xff1f;以…

k8s之实战小栗子

写在前面 本文一起看一个基于k8s的实战小栗子&#xff0c;在这篇文章 中我们基于docker搭建了一个WordPress网站。本文就通过k8s再来实现一遍。架构图如下&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/9c73ac0c183a429a8f4b1a2feb363527.png 从上图可以…

使用Origin计算数据的上升\下降时间

使用Origin计算上升/下降时间计算上升时间1导入数据&#xff0c;做图2、选择合适的数据范围3、选择上升时间和上升范围两个测量参数&#xff0c;获得结果4、更改区间&#xff0c;并导出数据计算下降时间1、将感兴趣区域移动到下降沿2、更改为测量下降沿参数获得结果上升时间小工…

【Kotlin】空安全 ④ ( 手动空安全管理 | 空合并操作符 ?: | 空合并操作符与 let 函数结合使用 )

文章目录一、空合并操作符 ?:二、空合并操作符与 let 函数结合使用一、空合并操作符 ?: 空合并操作符 ?: 用法 : 表达式 A ?: 表达式 B如果 表达式 A 的值 不为 null , 则 整个表达式的值 就是 表达式 A 的值 ; 如果 表达式 A 的值 为 null , 则 整个表达式的值 就是 表达…

vue-路由的使用方式

1.下载路由 使用npm的下载: # vue2对应版本 npm i vue-router3# vue3对应版本 npm i vue-router42.路由初试化 路由的三种模式: history, 指定路由的模式, 有hash,history,memory三种模式,一般使用第一种和第三种模式 createWebHashHistory hash模式 > http://localhost…

十大字符串函数与内存操作函数

前言&#xff1a;我们知道在C语言的库中有许许多多的库函数&#xff0c;今天我就来介绍一下自己对两大类库函数中一些常用函数的认识和理解&#xff0c;希望对大家有帮助。 说明&#xff1a;下文中会花较大篇幅实现这些库函数的模拟&#xff0c;请大家不要觉得库函数直接用就好…

UNet入门总结

作者&#xff1a;AI浩 来源&#xff1a;投稿 编辑&#xff1a;学姐 Unet已经是非常老的分割模型了&#xff0c;是2015年《U-Net: Convolutional Networks for Biomedical Image Segmentation》提出的模型。 论文连接&#xff1a;https://arxiv.org/abs/1505.04597 在Unet之前…

Android 深入系统完全讲解(4)

4 SystemServer 创建过程 SystemServer 进程非常关键了&#xff0c;我们上层的服务都是在这里以线程的形式存在&#xff0c;比如 AMS&#xff0c;PMS&#xff0c;WindowManagerService&#xff0c;壁纸服务&#xff0c;而关于调试这个服务进程&#xff0c;我们随后就会讲到。 …