资讯专栏INFORMATION COLUMN

amap绘制1000+飞机不卡顿

PiscesYE / 2851人阅读

摘要:在高德地图上绘制飞机标记,相信很多人都使用来实现的,但如果这个数据较多的话,地图就会有些卡,严重影响用户使用,那么怎样才能在大数据的情况下不卡呢如果需求较少的话,可以使用麻点层来解决这个问题,但其可扩展性较弱选择来实现这里我们主要讲的是来实

在高德地图上绘制飞机标记,相信很多人都使用marker来实现的,但如果这个数据较多的话, 地图就会有些卡,严重影响用户使用,那么怎样才能在大数据的情况下不卡呢?

如果需求较少的话,可以使用MassMarks麻点层来解决这个问题,但其可扩展性较弱

选择CustomLayer来实现

这里我们主要讲的是CustomLayer来实现,相对以前的多个marker实现,那么使用CustomLayer就好多了。。

下面先看下效果吧

使用customLayer主要的工作还是在于绘制canvas

行看一个简单的示例(绘制飞机和添加事件)




    
    Document
    


    
    
    
    

效果:

基本原理就是上面那样的,用过canvas的同学应该都能看懂,当然也可以先了解下canvas基础 和 canvas API

接下来就请严读完整代码喽~~~
注释也都很清淅。。




    
    Document
    
    


    

其实整个过程也不难,就是考验大家想不想做了。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88431.html

相关文章

  • VUE 记一次高德地图和Echarts(中国地图)

    摘要:效果图准备工作高德地图申请安装中国地图高德地图官方点我进入创建动态创建标签后的是需要的插件中国地图安装开始使用创建组件写入需要的分布指数高低写入高德地图需要的 效果图 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 准备工作 高德地图申请key 安装Echarts 中国地图 高德地图 官方API...

    KoreyLee 评论0 收藏0
  • 高德地图 Javascript API 入门(二)

    摘要:鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域,鼠标左键双击或右键单击结束当前量测操作,并显示本次量测结果。参数设为时,鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时,保留所绘制的覆盖物对象。 高德地图 Javascript API 入门(二) 鼠标工具插件 测量距离 JS map.plugin([AMap.MouseTool],function ()...

    dockerclub 评论0 收藏0
  • 通过Weex 300行代码开发一款简易的跑步App

    摘要:你就可以在目录下用或者开发应用代码了设计原理结合了高德地图多个功能,比如定位,地图缩放,绘制折现,进行点的标记等常用功能。文件源代码打包运行开发完毕后,我们可以运行命令,让它安装到我们的测试手机上。 Weex正如它的目标, 一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升,我们可以通过一套代码,实现web,android, iOS的三个...

    isaced 评论0 收藏0
  • threejs 绘制地球、飞机、轨迹

    摘要:官网首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果。。效果比较简陋,需要后期再处理。。。下面进入主题,代码篇。。 threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 showImg(https://segmentfault.com/img/bVJvcv?w=925&h=683); 这个缩小后的图片,下面我们来看下近距离的...

    yy13818512006 评论0 收藏0

发表评论

0条评论

PiscesYE

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<