vue3+ts使用高德地图实现某个区域热力图立体和不立体

原创

已于 2023-04-10 09:57:14 修改 · 590 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2023-04-08 14:55:35 首次发布

本文介绍了如何在Vue3项目中结合TypeScript，利用@amap/amap-jsapi-loader库来集成高德地图，并展示某个区域的热力图效果，包括立体和非立体两种形式。

需要下载

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

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import hotdata from "./hotData"; //这个是热力图的数据
import { ref } from "vue";
const heatmap = ref<any>(null);

AMapLoader.load({
  key: "自己的key",
  version: "2.0",
plugins: ["AMap.HeatMap"],
}).then((AMap) => {
    var map;//这里面map一定要是var map=null，否则会报错的
  map = new AMap.Map("map", {
    viewMode: "3D",//这个模式取决于热力图是否为3D
    pitch: 70,
    resizeEnable: true,
    center: [116.418261, 39.921984],
    zoom: 11.5,
    
  });
    var heatmap;

    map.plugin(