vue-mapvgl vue3 版本正式发布
vue-mapvgl 是一个基于vue和百度地图mapvgl封装的vue地图组件库,提供了常用组件封装,格外提供基础的模型加载和操作能力。
本次更新
- 组件全面升级支持vue3
- 代码使用typescript重写
- 增加IDE提示文件,快捷开发
- 文档全面更新,使用vuepress 2.0版本重新编写。文档地址
- 支持treeshake
破坏性变更
- 库加载方式调整,需使用vue3的方式进行注册库
- 移除bmapManager,获取地图实例的方式将只支持ref和绑定init事件
- 移除所有组件events属性,事件绑定使用v-on形式
- 所有图层增加init事件,用于获取图层实例对象
NPM安装
npm install vue-bmap-gl@next --save npm install vue-mapvgl@next --save
引入组件
import App from './App.vue' import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl'; import 'vue-bmap-gl/dist/style.css' import VueMapvgl from 'vue-mapvgl' initBMapApiLoader({ ak: 'YOUR_KEY' }) createApp(App) .use(VueBMap) .use(VueMapvgl) .mount('#app')
示例
<template> <div class="map-container"> <el-bmap :center="center" :zoom="zoom" :tilt="75" > <el-bmapv-view> <el-bmapv-bar-layer :visible="visible" type="light" :data="data" :edge-count="50" :size="200" @init="initLayer" /> </el-bmapv-view> </el-bmap> </div> <div class="control-container"> <button @click="switchVisible"> {{ visible ? '隐藏图层' : '显示图层' }} </button> </div> </template> <script lang="ts"> import {defineComponent} from "vue"; export default defineComponent({ name: "Map", components: { }, data(){ return { zoom: 15, center: [121.5273285, 31.21515044], visible: true, data: [{ geometry: { type: 'Point', coordinates: [121.5273285, 31.21515044], }, height: 100 },{ geometry: { type: 'Point', coordinates: [121.5473285, 31.21515044], }, height: 300 }] } }, methods: { switchVisible(){ this.visible = !this.visible; }, initLayer(layer){ console.log('init: ', layer) } } }) </script>
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
HMS Core 6.3.0 版本发布公告
新增内容风控检测,若用户输入内容不符合国家法律法规要求,风控将会拦截,无法翻译手语动作。 查看详情>> 新增受众同步至HUAWEI Ads功能,实现精准投放高价值用户,提升广告效率; 新增服务端Java SDK,开发者可以快速集成使用API接口能力。 查看详情>> 新增人脸遮挡功能,实现对目标人脸的动态遮挡,有效保护人脸隐私; 新增曲线变速功能,可自定义调整视频播放速度,实现非线性变速; 新增裁剪功能,支持修改图片、视频尺寸。 查看详情>> 新增单麦降噪功能,满足用户个性化使用需求; 新增原子能力SDK的集成方式,可自定义UI,开发者能根据App需求自定义使用界面。 查看详情>> 提供将拍摄图像转换为PBR材质的贴图功能,目前可以支持diffuse map、normal map、specular map、roughness map、height map五种贴图; 更新了种类丰富的材质库,包括混凝土、砖、石膏、黏土、金属、木材等16个种类的常见材质,支持查询、预览和下载等功能。 查看详情>> 新增Maker旋转功能。开发者可根据...
- 下一篇
面试官常问的HTTP知识点
互联网中的数据是通过数据包来传输的,IP通过DNS查询IP地址进而把数据包送达目的主机,UDP接过数据包,通过端口号把数据包送往具体的应用,而使用TCP可保证数据的完整性 当传输层TCP/IP协议将数据传输到网络上时,浏览器可通过HTTP协议进行文本传输,物联网可通过MQTT协议进行交互 一、UDP UDP传输非常快,适合在线视频、互动游戏这类强交互的场景 对于数据可靠性有要求的场景则不太适合,它有个大缺点:不能保证数据可靠性 不提供重发机制,直接丢弃当前的包 发送之后不售后,无法确认是否到达目的地 无法还原数据包成完整的文件 但它的兄弟TCP可以代劳 二、TCP TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。解决了丢失数据包的问题,并且提供了组装数据包的能力。这不得不感谢发送端不仅给它提供了源端口号和目标端口号,还提供了序列号,引入了数据包排列机制 1、连接过程 1.1、建立连接 TCP是面向连接的,在数据通信之前就做好两端的准备工作,在客户端和服务端通过三个数据包来确认连接的建立 一开始,客户端和服务端都处于 close状态,接着服务端主动监听某个端口,处于liste...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS6,CentOS7官方镜像安装Oracle11G
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题