### Automatic Import Setup (Latest Version) Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Guides on setting up automatic component and API imports for @vuemap/vue-amap@latest using Vite. It requires installing specific unplugin plugins and configuring the Vite build process. ```shell npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver ``` -------------------------------- ### Automatic Import Setup (VueAMap v1) Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Guides on setting up automatic component and API imports for @vuemap/vue-amap v1. It requires installing specific unplugin plugins, including a specific version of @vuemap/unplugin-resolver. ```shell npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1 ``` -------------------------------- ### Install Core and Extension Libraries Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md Installs the core @vuemap/vue-amap library, the loca related library, and extra libraries for threejs integration. ```shell npm i -S @vuemap/vue-amap // Install loca related library npm i -S @vuemap/vue-amap-loca // Install other extension libraries, mainly threejs related npm i -S @vuemap/vue-amap-extra ``` -------------------------------- ### Install @vuemap/vue-amap via npm Source: https://github.com/yangyanggu/vue-amap/blob/dev/docs/README.md Installs the core @vuemap/vue-amap library, the loca library, and optional extra libraries like threejs. This is the recommended installation method for most projects. ```shell // Install amap base library npm install @vuemap/vue-amap --save // Install loca library npm install @vuemap/vue-amap-loca --save // Install extension library (threejs) npm install @vuemap/vue-amap-extra --save ``` -------------------------------- ### Install @vuemap/vue-amap Core Library Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Installs the core @vuemap/vue-amap library using npm. This is the primary package for using the Vue components. ```shell npm i -S @vuemap/vue-amap ``` -------------------------------- ### Quick Start: Initialize VueAMap Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Demonstrates how to import and initialize VueAMap in a Vue 3 application. It includes loading the API with a key and security code, and registering the plugin. ```javascript import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css'; // Initialize VueAMap initAMapApiLoader({ // Gaode API key key: 'YOUR_KEY', securityJsCode: 'securityJsCode', // New keys require a security code // Loca: { // version: '2.0.0' // } // Uncomment if you need to use Loca components }); createApp(App).use(VueAMap) ``` -------------------------------- ### Install @vuemap/vue-amap-extra Extension Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Installs the @vuemap/vue-amap-extra library, which primarily includes three.js related functionalities for map integration. ```shell npm i -S @vuemap/vue-amap-extra ``` -------------------------------- ### Install @vuemap/vue-amap-loca Extension Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Installs the @vuemap/vue-amap-loca library, which provides encapsulation for Gaode's loca visual component. ```shell npm i -S @vuemap/vue-amap-loca ``` -------------------------------- ### Automatic Component Import Setup Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md Guides on setting up automatic component and API import using unplugin-vue-components, unplugin-auto-import, and @vuemap/unplugin-resolver for Vite or Webpack projects. It specifies version compatibility for the resolver plugin. ```shell # For @vuemap/vue-amap@latest version npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver # For @vuemap/vue-amap@1 version npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1 ``` -------------------------------- ### Vite Configuration for Auto Imports Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md Provides a Vite configuration example to integrate @vuemap/unplugin-resolver for automatic importing of VueAMap components and APIs. This setup simplifies component usage in Vue projects. ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import {VueAmapResolver} from '@vuemap/unplugin-resolver' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [VueAmapResolver()], }), Components({ resolvers: [VueAmapResolver()], }), ] }) ``` -------------------------------- ### Install Core and Extension Libraries Source: https://github.com/yangyanggu/vue-amap/blob/dev/README_en.md Installs the main @vuemap/vue-amap library, along with optional loca and extra extension libraries for enhanced functionality. ```shell npm i -S @vuemap/vue-amap npm i -S @vuemap/vue-amap-loca npm i -S @vuemap/vue-amap-extra ``` -------------------------------- ### Include @vuemap/vue-amap via CDN Source: https://github.com/yangyanggu/vue-amap/blob/dev/docs/README.md Includes the vue-amap library and its CSS via unpkg.com. This method is suitable for quick testing or projects that do not use a module bundler. ```html ``` -------------------------------- ### Quick Start: Initialize AMap API and Vue Plugin Source: https://github.com/yangyanggu/vue-amap/blob/dev/README_en.md Demonstrates how to import the VueAMap plugin and initialize the AMap API loader with your API key and security code. This is essential for using map components. ```javascript // import import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css'; // init initAMapApiLoader({ // AMap key key: 'YOUR_KEY', securityJsCode: 'securityJsCode', // The new version of the key needs to be used in conjunction with a secure key //Loca:{ // version: '2.0.0' //} // If you need to use the Loca component library, you need to load Loca }); createApp(App).use(VueAMap) ``` -------------------------------- ### Install Auto Import Dependencies Source: https://github.com/yangyanggu/vue-amap/blob/dev/README_en.md Installs necessary packages for automatic component and API import functionality, including unplugin-vue-components, unplugin-auto-import, and the @vuemap/unplugin-resolver. ```shell # Use @vuemap/vue-amap@latest version npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver # Use @vuemap/vue-amap@1 version npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1 ``` -------------------------------- ### Basic Map Component Usage Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md A simple example of using the `` component in a Vue template. It demonstrates binding zoom level and center coordinates to component props. ```vue ``` -------------------------------- ### Initialize VueAMap with API Key (TypeScript) Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md Demonstrates how to import and initialize VueAMap in a TypeScript-based Vue 3 application, including loading the AMap API with a provided key. This is a common setup for main.ts files. ```typescript import App from './App.vue' import {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css' initAMapApiLoader({ key: 'YOUR_KEY' }) createApp(App) .mount('#app') ``` -------------------------------- ### Auto Import Setup: Initialize AMap and Configure Vite Source: https://github.com/yangyanggu/vue-amap/blob/dev/README_en.md Configures Vite for automatic imports of Vue components and APIs using @vuemap/unplugin-resolver. It also shows the necessary initialization of the AMap API loader in the main application file. ```typescript /* main.ts */ import App from './App.vue' import {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css' initAMapApiLoader({ key: 'YOUR_KEY' }) createApp(App) .mount('#app') /* vite.config.ts */ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import {VueAmapResolver} from '@vuemap/unplugin-resolver' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [VueAmapResolver()], }), Components({ resolvers: [VueAmapResolver()], }), ] }) ``` -------------------------------- ### Initialize VueAMap with API Key Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md Demonstrates how to import and initialize VueAMap in a Vue 3 application, including loading the AMap API with a provided key and security code. It also shows how to use the VueAMap plugin. ```javascript // Import vue-amap import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css'; // Initialize vue-amap initAMapApiLoader({ // Gaode's key key: 'YOUR_KEY', securityJsCode: 'securityJsCode', // New key requires security code // Loca:{ // version: '2.0.0' //} // If you need to use the loca component library, you need to load Loca }); createApp(App).use(VueAMap) ``` -------------------------------- ### VueAMap Initialization with Auto Import Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md Shows how to initialize VueAMap and import its CSS within the main application file when using automatic imports. The API key is configured via initAMapApiLoader. ```typescript import App from './App.vue' import {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css' initAMapApiLoader({ key: 'YOUR_KEY' }) createApp(App) .mount('#app') ``` -------------------------------- ### Vue Component Usage: Map Container Source: https://github.com/yangyanggu/vue-amap/blob/dev/README.md A basic example of using the `` component in a Vue template to render a map. It shows how to bind properties like zoom level and center coordinates. ```vue ``` -------------------------------- ### AmapLocaScatter Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/scatter-layer.md API documentation for the AmapLocaScatter component, covering its configurable attributes and emitted events for map point visualization. ```APIDOC AmapLocaScatter Component Description: Displays points on a large ground surface, supporting three types: colored circles, icons, and animated icons. To enable animation, use `loca.animate.start();`. Attributes (Properties): - initEvents: Boolean - Description: Whether to create events, automatically creating click and mousemove events for the loca layer. Defaults to true. - defaultStyleValue: Object - Description: Default style values. Refer to property descriptions below for details. - visible: Boolean - Description: Whether the point marker is visible. Defaults to true. - zIndex: Number - Description: The stacking order of point markers. When multiple point markers exist on the map, this property makes higher-level point markers display on top. Default zIndex: 12. - sourceUrl: String - Description: The URL of the data source, typically an interface address. The returned data must be in geojson format. - sourceData: Object - Description: The data object. If you do not want to use URL requests, you can directly provide the requested geojson object. Only one of sourceUrl and sourceData will take effect, with sourceUrl taking precedence by default. - layerStyle: Object - Description: Layer style configuration. - zooms: Array - Description: The zoom level range for the layer. Defaults to [2, 20]. - opacity: Number - Description: The overall opacity of the layer. Defaults to 1. - visibleDuration: Number - Description: Transition time for layer visibility changes. Defaults to 0. - geoBufferSource: [ArrayBuffer, String] - Description: Data source in protocol-buffers (PBF) format, which can significantly compress data volume and reduce data transmission time. Currently only supports GeoJSON PBF implementation based on mapbox/geobuf. - extraOptions: Object - Description: Additional extension properties that will be directly copied to the initialization options. If a key matches a prop, it will be overwritten by the prop. Events: - init: Loca.ScatterLayer - Parameters: Loca.ScatterLayer instance - Description: Emitted when the layer is initialized. - click: Feature, event - Parameters: The clicked feature and the event object. Returns undefined if no marker is clicked. - Description: Triggered when a marker is clicked. - mousemove: Feature, event - Parameters: The feature under the mouse cursor and the event object. Returns undefined if the cursor is not over a marker. - Description: Triggered when the mouse moves over a marker. ``` -------------------------------- ### Project Contribution Request Source: https://github.com/yangyanggu/vue-amap/blob/dev/src/vue-amap/README.md A friendly request for project stars, often found in README files to encourage community support. ```html 觉得有用可以给个star ``` -------------------------------- ### AmapThreeLightSpot Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-extra/three-light-spot.md Defines the configurable attributes and events for the AmapThreeLightSpot component. Attributes control the visual properties of the light source, such as color, intensity, and position, while events handle component lifecycle interactions like initialization. ```APIDOC AmapThreeLightSpot: Attributes: color: String Description: The color of the light. intensity: Number Description: The intensity of the light. Defaults to 1. distance: Number Description: The distance from the light source where the intensity becomes zero. A value of 0 means the light never fades (infinite distance). Defaults to 0. angle: Number Description: The scattering angle of the light beam, with a maximum of Math.PI/2. penumbra: Number Description: The penumbra of the spotlight cone, a value between 0 and 1. Defaults to 0. decay: Number Description: The rate of decay of light along the distance. Defaults to 1. position: {x:number, y:number, z:number} Description: The 3D coordinates (x, y, z) of the light source. target: Object3D Description: The target object for the light. Events: init: ThreeLightSpot Description: Emitted when the instance initialization is complete. The parameter is the initialized ThreeLightSpot instance. ``` -------------------------------- ### AmapLocaPointLight API Reference Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/point-light.md Defines the AmapLocaPointLight component, which adds point light effects to Amap layers. It specifies configurable attributes for light properties and an event for instance initialization. ```APIDOC AmapLocaPointLight: description: 点光,对于可以接受光照的图层(PolygonLayer 等)会增加点光的影响。点光源通常用来突出展示场景中的某些物体。 position: [longitude, latitude, altitude] attributes: color (String): 点光颜色. intensity (Number): 光照强度. position (Array): 点光位置, format: [经纬度, 经纬度, 高度米]. Example: [116.39079, 39.90624, 10000]. distance (Number): 距离表示从光源到光照强度为 0 的位置, 0 表示光不会消失. extraOptions (Object): 额外扩展属性, 会直接将属性拷贝到初始化的options中, 当key与props内的一样时会被props覆盖. events: init (Loca.PointLight): 实例初始化时触发, 回调参数为 Loca.PointLight 实例. ``` -------------------------------- ### AmapThreeGltf Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-extra/three-gltf.md Details the attributes and events for the AmapThreeGltf Vue component, enabling configuration of glTF model loading, appearance, and interaction handling within an AMap context using Three.js. ```APIDOC AmapThreeGltf Component API: Attributes: url: String - Model address, only supports glTF format. scale: Number | Array[x,y,z] - Scaling factor for the model. Can be a single number for uniform scaling or an array for XYZ scaling. position: Array - Geographic coordinates [longitude, latitude] for the model's placement. visible: Boolean - Controls the visibility of the model. Defaults to true. rotation: Object - Object to adjust model orientation. Specific properties depend on Three.js Euler or Quaternion usage. angle: Number - Rotation angle around the Y-axis, primarily used for adjusting vehicle model orientation. moveAnimation: {duration: number, smooth: boolean} - Configuration object for enabling and customizing model movement animations. - duration: The duration of the animation in seconds. - smooth: Whether to use smooth animation easing. configLoader: Function - A callback function to configure the Three.js loader, allowing extensions like Draco decompression. useModelCache: Boolean - Enables or disables model caching. When enabled, subsequent loads of the same model URL will use cloned instances instead of re-downloading. Defaults to false. showPopup: Boolean - Determines whether to display a popup associated with the model. Defaults to false. Requires `el-amap-layer-three`'s `create-css-render` attribute to be true. popupHeight: Number - The height of the popup. Defaults to 0. popupScale: Number | Array[number] - Scaling factor for 3D popups. Only effective when `popupType` is '3D'. popupType: '2D' | '3D' - The type of information popup to display. Can be '2D' or '3D'. Events: init: (Object3D, component instance) - Emitted when the component instance and its associated 3D object are initialized. click: (Object3D) - Emitted when the model is clicked. The clicked Three.js Object3D is passed as a parameter. mouseover: (Object3D) - Emitted when the mouse cursor hovers over the model. The hovered Three.js Object3D is passed. mouseout: (Object3D) - Emitted when the mouse cursor leaves the model. The Three.js Object3D that was hovered is passed. ``` -------------------------------- ### AmapLayerFlexible API Documentation Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/layer/data/flexible.md Details the attributes and events for the AmapLayerFlexible component, a flexible slicing layer for Amap. Developers can customize tile creation and manage layer properties. ```APIDOC AmapLayerFlexible: Description: 灵活切片图层,继承自AMap.TileLayer,开发者可通过构造时传入给其传入createTile字段来指定每一个切片的内容 (Flexible slicing layer, inherits from AMap.TileLayer, developers can specify the content of each slice by passing a createTile field during construction). Related Example: https://lbs.amap.com/api/jsapi-v2/example/selflayer/flex-canvas/ Attributes: cacheSize: Number Description: 缓存瓦片数量 (Number of cached tiles) createTile: Function Description: 由开发者实现,由API自动调用,xyz分别为切片横向纵向编号和层级,切片大小 256。假设每次创建的贴片为A(支持img或者canvas),当创建或者获取成功时请回调success(A),不需要显示或者失败时请回调fail() (Implemented by the developer, automatically called by the API, xyz are the horizontal and vertical slice numbers and level, slice size 256. Assume each created tile is A (supports img or canvas), when creation or retrieval is successful, callback success(A), if not to be displayed or failed, callback fail()). tileSize: Number Description: 切片大小,取值: 256,表示切片大小为256x256, 128,表示切片大小为128x128, 64,表示切片大小为64x64。默认值为256 (Slice size, values: 256, means slice size is 256x256, 128, means slice size is 128x128, 64, means slice size is 64x64. Default is 256). zooms: Array Description: 支持的缩放级别范围,默认范围 [2-30] (Supported zoom level range, default range [2-30]). visible: Boolean Description: 是否显示,默认 true (Whether to display, default true). zIndex: Number Description: 图层叠加的顺序值,1 表示最底层。默认 zIndex:4 (Layer stacking order value, 1 means bottom layer. Default zIndex: 4). opacity: Number Description: 透明度,默认 1 (Opacity, default 1). reEventWhenUpdate: Boolean Description: 是否在组件更新时重新注册事件,主要用于数组更新时,解决绑定了事件但事件的对象不会更新问题,默认false (Whether to re-register events when the component updates, mainly used for array updates to solve the problem where bound events do not update the event object, default false). extraOptions: Object Description: 额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖 (Extra extension properties, properties will be directly copied to the initialized options, when the key is the same as in props, it will be overwritten by props). Events: init: Parameters: AMap.TileLayer.Flexible Description: 实例初始化结束 (Instance initialization finished). complete: Parameters: None Description: 图块切片加载完成事件 (Tile slice loading completion event). ``` -------------------------------- ### AmapLayerBuildings Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/layer/official/buildings.md Detailed API reference for the AmapLayerBuildings Vue component, including its properties (attributes) and events for customizing 3D building layer rendering. ```APIDOC AmapLayerBuildings Component API: Attributes: wallColor: Array,String Description: 楼块侧面颜色,支持 rgba、rgb、十六进制等 roofColor: Array,String Description: 楼块顶面颜色,支持 rgba、rgb、十六进制等 heightFactor: Number Description: 楼块的高度系数因子,默认为 1,也就是正常高度 styleOpts: Object Description: 楼块的围栏和样式设置 zooms: Array Description: 图层缩放等级范围,默认 [2, 20] visible: Boolean Description: 是否显示,默认 true zIndex: Number Description: 图层叠加的顺序值,1 表示最底层。默认 zIndex:4 opacity: Number Description: 透明度,默认 1 reEventWhenUpdate: Boolean Description: 是否在组件更新时重新注册事件,主要用于数组更新时,解决绑定了事件但事件的对象不会更新问题,默认false extraOptions: Object Description: 额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖 Events: init(AMap.Buildings) Description: 实例初始化结束 complete() Description: 图块切片加载完成事件 ``` -------------------------------- ### AmapLocaGrid Events Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/grid-layer.md Describes the events emitted by the AmapLocaGrid component, providing information about layer initialization and user interactions. ```APIDOC AmapLocaGrid Events: - init: Emitted when the grid layer instance is initialized. Parameters: - Loca.GridLayer: The initialized grid layer instance. - click: Emitted when a grid cell is clicked. Parameters: - Feature: The data feature corresponding to the clicked grid cell. - event: The mouse event object. Returns: - undefined: If no grid cell is clicked. - mousemove: Emitted when the mouse cursor moves over a grid cell. Parameters: - Feature: The data feature corresponding to the grid cell under the cursor. - event: The mouse event object. Returns: - undefined: If the cursor is not over a grid cell. ``` -------------------------------- ### AmapMassMarks API Documentation Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/marker/mass-marks.md Provides details on the AmapMassMarks component's configurable attributes and available events for managing large numbers of points on a map. ```APIDOC AmapMassMarks: Description: Component for rendering a large number of points (mass points) on an Amap map. Attributes: data: Array Description: The dataset for the mass points. Each item should contain coordinates and potentially styling information. visible: Boolean Description: Controls the visibility of the mass points. Defaults to true. zIndex: Number Description: The stacking order of the mass points. Higher values appear on top. Defaults to 12. zooms: Array Description: The zoom level range for displaying the mass points. Defaults to [2, 20]. Points are hidden outside this range. cursor: String Description: The cursor style when hovering over a mass point. Defaults to 'pointer'. styles: Array, Object Description: Defines the styling for the mass points. Can be a single style object applied to all points, or an array of styles to be selected based on point data. reEventWhenUpdate: Boolean Description: If true, re-registers event listeners when the component updates, useful for array updates to ensure events are bound to new objects. Defaults to false. extraOptions: Object Description: An object containing additional properties to be merged directly into the component's initialization options. Properties matching props will be overridden by props. Events: init: (instance: AMap.MassMarks) Description: Fired when the AMap.MassMarks instance is initialized. complete: Description: Fired when the mass points have finished loading. click: (event: MapsEvent) Description: Fired when a mass point is clicked with the left mouse button. dblclick: (event: MapsEvent) Description: Fired when a mass point is double-clicked with the left mouse button. mousemove: (event: MapsEvent) Description: Fired when the mouse pointer moves over a mass point. mouseover: (event: MapsEvent) Description: Fired when the mouse pointer moves over a mass point. mouseout: (event: MapsEvent) Description: Fired when the mouse pointer moves out of a mass point. mousedown: (event: MapsEvent) Description: Fired when the mouse button is pressed down on a mass point. mouseup: (event: MapsEvent) Description: Fired when the mouse button is released after pressing down on a mass point. touchstart: (event: MapsEvent) Description: Fired when a touch event begins on a mass point (mobile devices). touchend: (event: MapsEvent) Description: Fired when a touch event ends on a mass point (mobile devices). ``` -------------------------------- ### AmapLayerCustomXyz Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/layer/data/custom-xyz.md Documentation for AmapLayerCustomXyz component, detailing its attributes (properties) and events. This layer is based on GLCustomLayer and supports tile coordinate system correction with WGS84, GCJ02, and BD09. ```APIDOC AmapLayerCustomXyz Component API: Attributes: url: string Description: Tile address, supports {s} {x} {y} {z}. Example: `http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}` subdomains: string[] Description: Subdomain array, required when {s} is set in url. tileType: 'xyz' | 'bd09' Description: Tile division type, defaults to `xyz`. 'xyz' indicates tiles are numbered from the top-left corner, while Baidu tiles start from the center. Requires differentiation between normal and Baidu tiles. proj: 'wgs84' | 'gcj02' | 'bd09' Description: Coordinate system used by the tiles, defaults to `gcj02`. zooms: [number,number] Description: Layer zoom level range, defaults to [2, 18]. opacity: number Description: Layer opacity, defaults to 1. visible: boolean Description: Whether the layer is visible, defaults to true. zIndex: number Description: Layer level, defaults to 120. debug: boolean Description: When debug is enabled, tile numbers will be displayed on the tiles. mask: number[][] | number[][][] | number[][][][] Description: Tile mask, data structure is consistent with AMap.Map's mask parameter. cacheSize: number Description: Tile cache quantity, defaults to 512. Does not limit the number of cached tiles. reEventWhenUpdate: Boolean Description: Whether to re-register events when the component updates. Primarily used for array updates to resolve issues where bound events do not update their objects. Defaults to false. extraOptions: Object Description: Additional extended properties, which will be directly copied to the initialization options. If a key matches a prop, it will be overwritten by the prop. tileMaxZoom: number Description: Maximum zoom level of tiles on the server. When the map zoom exceeds this level, this level will be used directly as the maximum level tile. Defaults to 18. altitude: number Description: Altitude of loaded tiles. When this value is set, tiles will float in 3D mode. Defaults to 0. Events: init: CustomXyzLayer Description: Instance initialization completion. ``` -------------------------------- ### AmapLayerThree Component API Documentation Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-extra/three-layer.md Details the attributes and events for the AmapLayerThree component. Attributes configure layer properties like lights, HDR, and rendering. Events provide callbacks for layer initialization and user interactions like clicks. ```APIDOC AmapLayerThree Component Attributes: lights: Array Description: Configuration data for lights. Specific parameters are detailed separately. hdr: Object Description: Configuration for HDR functionality. Specific parameters are detailed separately. alpha: Boolean Description: Whether the canvas should include alpha (transparency). Defaults to true. antialias: Boolean Description: Whether to perform anti-aliasing. Defaults to false. zooms: Array Description: Supported zoom level range. Defaults to [2-20]. visible: Boolean Description: Whether to display the layer. Defaults to true. zIndex: Number Description: The stacking order of the layer. 1 indicates the bottom layer. Defaults to 120. opacity: Number Description: Opacity of the layer. Defaults to 1. axesHelper: Boolean Description: Whether to enable the debug arrows. Defaults to false. createCanvas: Boolean Description: Whether to create a new canvas for Three.js rendering. Defaults to false. webGLRendererParameters: WebGLRendererParameters Description: Data passed when creating the WebglRenderer. createCssRender: Boolean Description: Whether to create a CSS render. The popup for gltf components only takes effect when cssRender is enabled. Defaults to false. AmapLayerThree Component Events: init: AMap.CustomLayer Description: Triggered when the instance initialization is complete. Passes the AMap.CustomLayer instance. click: Object3D Description: Triggered when the layer is clicked. Passes the clicked custom object. mouseover: Object3D Description: Triggered when the mouse moves over a custom object on the layer. Passes the hovered object. mouseout: Object3D Description: Triggered when the mouse moves out of a custom object on the layer. Passes the object that was left. ``` -------------------------------- ### AmapLocaLink Component API Documentation Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/link-layer.md Provides detailed API documentation for the AmapLocaLink Vue component, which is used to create link layers in Amap. It covers component attributes for data sources, styling, visibility, and events for user interactions. ```APIDOC AmapLocaLink Component API This component is used to create and manage link layers within Amap using the Loca library. ## Attributes | Attribute | Type | Description | |---|---|---| | initEvents | Boolean | Whether to create events, automatically creates click and mousemove events for the loca layer. Defaults to true. | | defaultStyleValue | Object | Default style configuration. Refer to the property descriptions below for details. | | visible | Boolean | Whether the point marker is visible. Defaults to true. | | zIndex | Number | The stacking order of point markers. When multiple point markers exist on the map, this property ensures higher-level markers are displayed on top. Default zIndex is 12. | | sourceUrl | String | The URL of the data source, typically an API endpoint. The returned data must be in GeoJSON format. | | sourceData | Object | Data object. If you do not want to use the URL method to request data, you can directly provide the fetched GeoJSON object. Only one of `sourceUrl` and `sourceData` will be effective, with `sourceUrl` taking precedence. | | layerStyle | Object | Layer style configuration. | | zooms | Array | The zoom level range for the layer. Defaults to [2, 20]. | | opacity | Number | The overall opacity of the layer. Defaults to 1. | | visibleDuration | Number | The transition time for layer visibility changes. Defaults to 0. | | geoBufferSource | [ArrayBuffer, String] | Data source in Protocol Buffers (PBF) format, which can significantly compress data volume and reduce data transmission time. Currently only supports GeoJSON PBF implementation based on mapbox/geobuf. | | extraOptions | Object | Extra extension properties, which will be directly copied to the initialization options. If a key matches a prop, it will be overwritten by the prop. | ## Events | Event Name | Parameters | Description | |---|---|---| | init | Loca.LinkLayer | The initialized Loca LinkLayer instance. | | click | Feature, event | Returns the corresponding feature when a marker is clicked, otherwise returns undefined. | | mousemove | Feature, event | Returns the corresponding feature when the mouse moves over a marker, otherwise returns undefined. | ``` -------------------------------- ### AmapThreeTiles3d Component API Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-extra/three-tiles3d.md Provides details on the attributes and events for the AmapThreeTiles3d Vue component, used for loading 3dtiles with Three.js. ```APIDOC AmapThreeTiles3d Component API: ## Attributes - **url** (String): The address for the 3dtiles data. - **position** (Array): The central point position of the model. - **scale** (Number | {x: Number, y: Number, z: Number}): Scaling factor for the model. Can be a single number or an object specifying x, y, z scaling. - **visible** (Boolean): Controls the visibility of the component. Defaults to true. - **rotation** (Object {x: Number, y: Number, z: Number}): Rotation angles to adjust the model's orientation. - **translate** (Object {x: Number, y: Number, z: Number}): Offset settings for the model. - **dracoDecoderPath** (String): Path to the DRACOLoader decoder. Defaults to a CDN path: https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/. - **fetchOptions** (Object): Parameters for fetching files using the fetch API. - **mouseEvent** (Boolean): Enables mouse interaction events. Defaults to false. - **debug** (Boolean): Enables debug mode, displaying processing information at the top of the page. Defaults to false. - **autoFocus** (Boolean): Automatically centers the map on the model after loading. Only effective when 'position' is not provided. - **configLoader** ((loader: GLTFLoader) => void): A callback function to configure the loader, e.g., for adding Draco extensions. ## Events - **init**: Emitted when the component instance is initialized. Passes the Object3D and the component instance as parameters. - **click**: Emitted when the component is clicked. Passes the clicked Object3D. - **mouseover**: Emitted when the mouse hovers over the component. Passes the hovered Object3D. ``` -------------------------------- ### AmapLocaHeatmap Events Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/heatmap-layer.md Details the events emitted by the AmapLocaHeatmap component, including initialization, click, and mousemove events with their respective parameters. These events allow for dynamic interaction with the heatmap layer. ```APIDOC AmapLocaHeatmap Events: - init: Loca.HeatMapLayer Description: Emitted when the heatmap layer is initialized. Passes the initialized Loca.HeatMapLayer instance. - click: Feature, event Description: Triggered when a marker is clicked. Returns the corresponding feature data if a marker is clicked, otherwise returns undefined. The event object provides additional details about the click event. - mousemove: Feature, event Description: Triggered when the mouse moves over a marker. Returns the corresponding feature data if the mouse is over a marker, otherwise returns undefined. The event object provides additional details about the mouse movement. ``` -------------------------------- ### AmapControlScale API Reference Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/control/scale.md Provides details on the attributes and events for the AmapControlScale component, which is used to display a scale control on the map. ```APIDOC AmapControlScale: Inherits from: AMap.Control Description: Located at the bottom right corner of the map, users can control its display and hiding. Attributes: position: Type: String, Object Description: Control docking position. Can be an object like { top: 5, left: 5, right: 5, bottom: 5 } or a string like 'LT' (Left Top), 'RT' (Right Top), 'LB' (Left Bottom), 'RB' (Right Bottom). offset: Type: Array Description: Offset relative to the map container's top-left corner. Positive values indicate offset towards the bottom right. Defaults to AMap.Pixel(10, 10). animateEnable: Type: Array Description: This attribute seems mislabeled or incorrectly described in the source. Based on common patterns, it might relate to animation or event handling, but the provided description is unclear. visible: Type: Boolean Description: Whether the control is visible. Defaults to true. reEventWhenUpdate: Type: Boolean Description: Whether to re-register events when the component updates. Primarily used for array updates to ensure bound events update correctly. Defaults to false. extraOptions: Type: Object Description: Additional extended properties that will be directly copied to the initial options. If a key matches a prop, it will be overridden by the prop. Events: show: Parameters: [] Description: Triggered when the control is shown. hide: Parameters: [] Description: Triggered when the control is hidden. ``` -------------------------------- ### AmapLocaPrism Attributes and Events Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap-loca/prism-layer.md Details the configurable attributes and available events for the AmapLocaPrism component, used for defining the behavior and appearance of prism layers. ```APIDOC AmapLocaPrism: Attributes: cullface: String | Specifies face culling for performance. Options: 'back', 'front', 'none'. Default: 'back'. acceptLight: Boolean | Determines if the face accepts lighting. Default: true. shininess: Number | Controls the roughness of the 3D mesh. Higher values mean rougher surfaces. Default: 30. hasSide: Boolean | Defines if sides and bottom are rendered when a face has thickness. Default: true. depth: Boolean | Enables or disables depth testing, which might affect zIndex. Default: true. initEvents: Boolean | Initializes click and mousemove events for the loca layer. Default: true. defaultStyleValue: Object | Sets default styling properties. visible: Boolean | Controls the visibility of the point marker. Default: true. zIndex: Number | Determines the stacking order of point markers. Higher values appear on top. Default: 12. sourceUrl: String | URL for the data source, expecting GeoJSON format. sourceData: Object | Direct GeoJSON object for data if not using sourceUrl. sourceUrl takes precedence. layerStyle: Object | Defines the style for the layer. zooms: Array | Range of zoom levels for the layer. Default: [2, 20]. opacity: Number | Overall opacity of the layer. Default: 1. visibleDuration: Number | Transition time for layer visibility changes. Default: 0. geoBufferSource: ArrayBuffer | String | Data source in protocol-buffers (PBF) format for compressed data. extraOptions: Object | Additional properties to be copied to the initial options, may be overridden by props. Events: init: Loca.PrismLayer | Emitted when the instance is initialized, providing the Loca.PrismLayer instance. click: Feature, event | Triggered on clicking a marker, returns the corresponding feature and event object, or undefined if no marker is clicked. mousemove: Feature, event | Triggered when the mouse moves over a marker, returns the corresponding feature and event object, or undefined if no marker is hovered. ``` -------------------------------- ### AmapLayerImage Attributes and Events Source: https://github.com/yangyanggu/vue-amap/blob/dev/ide-api/component/vue-amap/layer/data/image.md Details the configurable attributes and emitted events for the AmapLayerImage component, enabling customization of image layers on the map. ```APIDOC AmapLayerImage Component Documentation: **Attributes:** - `url` (String): 图片地址链接 - `zooms` (Array): 支持的缩放级别范围,默认范围 [2-30] - `bounds` (Array, AMap.Bounds): 图片的范围大小经纬度,如果传递数字数组类型: [minlng,minlat,maxlng,maxlat] - `visible` (Boolean): 是否显示,默认 true - `zIndex` (Number): 图层叠加的顺序值,1 表示最底层。默认 zIndex:6 - `opacity` (Number): 透明度,默认 1 - `reEventWhenUpdate` (Boolean): 是否在组件更新时重新注册事件,主要用于数组更新时,解决绑定了事件但事件的对象不会更新问题,默认false - `extraOptions` (Object): 额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖 **Events:** - `init` (AMap.ImageLayer): 实例初始化结束 - `complete` (): 加载完成事件 ```