「AntV」Vue3与TS框架下使用L7
1. 引言
Vue是常用的前端框架,TypeScript(简称TS) 是 JavaScript 的超集,可以提高代码的可维护性和可读性
本文基于Vite、Vue3和TypeScript搭建L7开发环境并示例
2. 环境安装
这里使用Vue 官方的项目脚手架工具创建Vue开发环境(其他方式也可,如直接使用Vite创建)
在CMD(或Shell)中,切换到存放代码的目录,并执行:
npm init vue@latest
接着选择一系列创建选项,通常默认即可:
Need to install the following packages: create-vue@3.6.4 Ok to proceed? (y) y Vue.js - The Progressive JavaScript Framework √ Project name: ... L7Test √ Package name: ... l7test √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No √ Add ESLint for code quality? ... No / Yes Scaffolding project in E:\Code\test\L7Test... Done. Now run: cd L7Test npm install npm run dev
然后根据提示依次执行命令:
cd L7Test
npm install
npm run dev
一个Vue模板就搭建完成:
使用VS Code(其他也可)打开刚刚创建的项目,删除掉src/components
下的默认文件,并清除App.vue
的默认内容:
在Terminal(CMD或Shell也可)中安装L7:
npm install @antv/l7
在App.vue
中编写代码加载L7地图:
<script setup lang="ts"> import { Scene } from "@antv/l7"; import { GaodeMap } from "@antv/l7-maps"; const scene = new Scene({ id: "map", map: new GaodeMap({ center: [120.19382669582967, 30.258134], pitch: 0, style: "dark", zoom: 10, }), }); </script> <template> <div id="map"></div> </template> <style scoped> #map { height: 100%; width: 100%; } </style>
- 注:L7使用TS编写,使用TS有良好的代码提示和检测功能
结果如下:
至此环境安装完成
3. 示例
官方示例:所有图表 | L7 (antgroup.com),基本演示了绝大部分的图表,并且示例代码和上述App.vue
中的script
标签下差不多,可以直接复制使用,如下图所示:
直接将示例中的代码复制到App.vue
的script
中即可运行:
<script setup lang="ts"> import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', center: [ 121.417463, 31.215175 ], zoom: 11 }) }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') .then(res => res.text()) .then(data => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', y: 'lat', x: 'lng' } }) .size(0.5) .color('#080298'); scene.addLayer(pointLayer); }); }); </script> <template> <div id="map"></div> </template> <style scoped> #map { height: 100%; width: 100%; } </style>
结果如下:
具体函数API的使用,可以查阅API手册:场景 Scene | L7 (antgroup.com)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)