mapvgl使用优化

1.在html中直接引入

(1)这种方式的问题就是所有页面都会渲染它
(2)使用异步加载加个async,和其他资源同步加载提速。

  <script
      async
      src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.159/dist/mapvgl.min.js"
    ></script> 
    <!-- 如果使用到Three.js相关的图层需要引用 -->
   <script
      async
      src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.159/dist/mapvgl.threelayers.min.js"
    ></script> 

2.优化方法:直接下载使用

(1)下载版本 “vue-mapvgl”: “^1.0.3”
(2)安装 pnpm i -S vue-mapvgl
(3)引入 import { mapvgl } from “vue-mapvgl”;
(4)使用

   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用百度地图中的MapVGL可以实现高性能的地图可视化。下面是一个简单的使用MapVGL的React组件示例: ```javascript import React, { Component } from 'react'; import BMapGL from 'BMapGL'; import { MapvglView } from '@mapvgl/mapvgl'; class MapvglDemo extends Component { componentDidMount() { const { center, zoom } = this.props; const map = new BMapGL.Map('map', { enableMapClick: false }); map.centerAndZoom(new BMapGL.Point(center[0], center[1]), zoom); const mapvglView = new MapvglView({ map }); const data = [ { geometry: { type: 'Point', coordinates: [116.3956, 39.9299] } }, { geometry: { type: 'Point', coordinates: [117.210813, 39.14393] } }, { geometry: { type: 'Point', coordinates: [121.526176, 31.216496] } }, ]; const layer = new mapvglView.Layer({ zIndex: 1, data: data, type: 'point', shape: 'circle', size: 10, color: 'rgba(255, 0, 0, 0.8)', strokeColor: 'rgba(255, 255, 255, 1)', strokeWidth: 2, isHotspot: true, isInteractive: true, }); mapvglView.addLayer(layer); } render() { return <div id="map" style={{ height: '400px' }} />; } } export default MapvglDemo; ``` 在上面的代码中,我们首先引入了百度地图的BMapGL库和MapVGL的React组件MapvglView。在组件的`componentDidMount`生命周期函数中,我们创建了一个百度地图实例,并将其传递给MapvglView的构造函数中,然后创建了一个点图层,并将其添加到MapvglView中。最后,我们在render函数中返回了一个div元素作为地图容器。 需要注意的是,为了让MapVGL正常工作,你需要在HTML文件中引入MapVGLJavaScript文件和CSS文件。具体可以参考MapVGL的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值