vue中引入高德地图Loca数据可视化
目录
引言：
关键词：
正文：
一、如何安装或者引入：
二、如何引入：
三、如何使用：
四、完整代码：
五、效果图
参考：
引言：
前面我的文章介绍了vue中引入高德地图实例的，详情可以去参考，由于需求增加，地图要做的更加美观、数据更加符合真实的空间数据呈现，依旧选择高德地图的API，这里我们选择引入高德地图 在vue中加载 数据可视化 Loca api 2.0版本。
关键词：
vue、高德地图、LOCA、数据可视化
正文：
Loca 数据可视化 API 2.0（以下简称为LOCA API 2.0）是一个基于高德地图JS API 2.0的高性能地图数据可视化库。其中Loca 2.x版本的要比1.3版本的相比，性能提升了和渲染效果更好，这是因为它们不同的架构模式和渲染管线；而且，2.0版本还引入了自定义镜头动画、图层动效、光照和材质等能力。此处注意一下你的版本兼容性！
一、如何安装或者引入：
方式一：
通过npm引入：
npm i @amap/amap-jsapi-loader --save方式二：
通过标签CDN引入：
二、如何引入：
通过npm安装的依赖引入，如下：
import AMapLoader from '@amap/amap-jsapi-loader';三、如何使用：
注意版本号要选择 2.0！
AMapLoader.load({"key": "ec5517c7d9a73dae44xxxxxxxxxxx", //申请好的Web端开发者Key，首次调用load时必填"version": "2.0", //指定要加载的JSAPI的版本，缺省时默认为1.4.15"plugins": ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],"Loca":{ //是否加载 Loca,缺省不加载"version": '2.0.0' //Loca 版本,缺省1.3.2}
}).then((AMap)=>{this.map = new AMap.Map('container', {zoom: 15.82,center: [81.214768,43.836157],pitch: 80,rotation: 205,showLabel: true, //不显示地名showBuildingBlock: true, //显示建筑物viewMode: '3D', //查看视野});this.loca = new Loca.Container({map: this.map});//....其他配置代码，参考下文全量代码})四、完整代码：
五、效果图
参考：
1.、参考手册-LOCA 数据可视化 API 2.0 | 高德地图API
2.、某片区房价信息-标牌点-示例详情-Loca API 2.0 | 高德地图API
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！