高德地图Loca 数据可视化 API 2.0的用法

1.安装

npm i @amap/amap-jsapi-loader --save

2.使用

<template>

  <div id="Sharingrouter">

    <div id="container" ref="container"></div>

  </div>

</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";

var map;

export default {

  data() {

    return {

      aMap: null,

    };

  },

beforeDestroy() {

    // 销毁地图

    this.aMap.destroy();

    this.aMap = null

  },

  mounted() {

    this.init();

  },

  methods: {

    init() {

      AMapLoader.load({

        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填

        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

        plugins: [],

        Loca: {

          // 是否加载 Loca， 缺省不加载

          version: "2.0.0", // Loca 版本，缺省 1.3.2

        },

      })

        .then((AMap) => {

          this.aMap = new AMap.Map("container", {

            // resizeEnable: true,

            // zoom: 12, //地图显示的缩放级别

             zoom: 5.29,

            // showLabel: false,

            viewMode: '3D',

            pitch: 48,

            center: [104.780269, 34.955403],

            mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',

          });

          var loca = new Loca.Container({

            map: this.aMap,

          });

          // 呼吸点

          var scatter = new Loca.ScatterLayer({

            loca,

            zIndex: 10,

            opacity: 0.6,

            visible: true,

            zooms: [5, 10],

          });

          var pointGeo = new Loca.GeoJSONSource({

            url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json",

          });

          scatter.setSource(pointGeo);

          scatter.setStyle({

            unit: "meter",

            size: [100000, 100000],

            borderWidth: 0,

            texture:

              "https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",

            duration: 2000,

            animate: true,

          });

          loca.add(scatter);

          // ------------------

          // 弧线

        var pulseLink = new Loca.PulseLinkLayer({

            // loca,

            zIndex: 10,

            opacity: 1,

            visible: true,

            zooms: [2, 22],

            depth: true,

        });

        var geo = new Loca.GeoJSONSource({

            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',

        });

        pulseLink.setSource(geo);

        pulseLink.setStyle({

            unit: 'meter',

            dash: [40000, 0, 40000, 0],

            lineWidth: function () {

                return [20000, 1000];

            },

            height: function (index, feat) {

                return feat.distance / 3 + 10;

            },

            // altitude: 1000,

            smoothSteps: 30,

            speed: function (index, prop) {

                return 1000 + Math.random() * 200000;

            },

            flowLength: 100000,

            lineColors: function (index, feat) {

                return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];

            },

            maxHeightScale: 0.3, // 弧顶位置比例

            headColor: 'rgba(255, 255, 0, 1)',

            trailColor: 'rgba(255, 255,0,0)',

        });

         loca.add(pulseLink);

         loca.animate.start();

        })

        .catch((e) => {

          console.log(e);

        });

    },

  },

};

</script>

<style  scoped>

#container {

  width: 100%;

  height: 100%;

  position: absolute;

  cursor: pointer;

}

</style>

注意：

   使用多个，key必须一致

   禁止多种API加载方式混用

   去掉html中的引入：<script type="text/javascript" src="http://webapi.amap.com/maps?     v=1.4.15&key=key&plugin=AMap.Geocoder"></script>

如果自定义图片定位不准，请修改偏移量，高德地图默认为图片左上角（0，0），偏移量的值和图片的值一样（px）