Overview

Fast AMap is a high-performance Vue component library that is built on top of the AMap SDK. The motivation behind creating this library came from a previous project where rendering small squares (100 * 100) on zoom level 16 was required. Using the Polygon overlay of the AMap SDK, rendering 1k+ overlays took about 5 seconds on a 13-inch Mac screen and closer to 30+ seconds on a 27-inch external display. Even the existing Vue component library, “vue-amap”, had performance issues and would sometimes crash the browser. To address these performance concerns, the developer created a custom rendering class specifically for handling the Polygon overlays, which reduced rendering time to around 1 second for 1k+ overlays. However, this approach had its challenges and was not user-friendly due to the need for a lot of configuration code related to rendering. Fast AMap was developed to tackle these issues and provide a more convenient solution.

Features

• High Performance: Fast AMap has been optimized for performance, allowing seamless rendering of large number of overlays.
• Seamless Integration: The library seamlessly integrates with Vue and AMap, making it easy to use within Vue projects.
• Custom Rendering: Fast AMap provides a custom rendering class for handling Polygon overlays, ensuring optimal performance and efficiency.
• Configurability: Fast AMap offers various configuration options to customize the rendering and functionality according to specific requirements.
• Compatibility: The library is compatible with both small screens and larger displays.

Installation

To install Fast AMap, follow these steps:

1. Install the library via npm:

   npm install fast-amap
   

2. Import and register the library as a Vue plugin:

   import Vue from 'vue';
   import FastAMap from 'fast-amap';
   
   Vue.use(FastAMap);
   

3. Initialize and configure the AMap SDK with your API key in your main Vue instance:

   new Vue({
     el: '#app',
     fastAMap: {
       apiKey: 'YOUR_AMAP_API_KEY',
     },
   });
   

4. Use the Fast AMap components within your Vue templates:

   <template>
     <div>
       <fast-amap></fast-amap>
     </div>
   </template>
   

Summary

Fast AMap is a high-performance Vue component library that addresses the performance limitations of existing solutions like “vue-amap”. It offers optimized rendering of large numbers of overlays using a custom rendering class, resulting in significantly improved rendering times. With seamless integration into Vue projects and a range of configuration options, Fast AMap provides a convenient and efficient solution for working with AMap and rendering overlays on maps.