高德地图海量点

1.先建个js文件

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

const initMap = async (config) => {

return new Promise((resolve, reject) => {

AMapLoader.load({

key: "0650fbe85c708dc3388fe803d0e5d861",

// key: config.key,

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

plugins: [],

Loca: {

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

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

},

}).then((AMap) => {

resolve(AMap)

}).catch(err => {

reject(err)

})

})

}

export default initMap

2. vue组件

复制代码
<template>
  <div class="box">
    <div :id="id" class="container" ref="container"></div>
  </div>
</template>

<script>
import initMap from "../../utils/initMap";
export default {
  data() {
    return {
      id: "maps",
      mapsFlag: false,
      markerList: [],
      aMap: null,
      url1: require("../../assets/img/background_img/bg_nav.png"),
      url2: require("../../assets/img/background_img/bg_header.png")
    };
  },
  /* 必传
    id
    center
  */
  props: {
    center: {
      type: Array,
      default: () => []
    },
    mapStyle: {
      type: String,
      // default: "amap://styles/ebfa0ae6f5c3e8c2f7c1b31f3912c232",
      default: "amap://styles/835378d49c95f3bb1522a957afdad78c"
    },
    // 拖拽
    dragEnable: {
      type: Boolean,
      default: false
    },
    // 缩放
    zoomEnable: {
      type: Boolean,
      default: false
    },
    // 双击变大
    doubleClickZoom: {
      type: Boolean,
      default: false
    },
    // ctrl
    keyboardEnable: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    flyingLineObj: {
      handler(newName, oldName) {
        setTimeout(() => {
          this.init();
        }, 1000);
      },
      deep: true
    }
  },
  methods: {
    async init() {
      let that = this;
      initMap()
        .then(AMap => {
          this.aMap = new AMap.Map(this.id, {
            zoom: 5,
            viewMode: "3D",
            pitch: 48,
            center: this.center,
            mapStyle: this.mapStyle,
            dragEnable: this.dragEnable,
            zoomEnable: this.zoomEnable,
            doubleClickZoom: this.doubleClickZoom,
            keyboardEnable: this.keyboardEnable
          });

          // 创建 Loca 实例
          var loca = new Loca.Container({
            map: this.aMap
          });
          // 创建数据源
          let events = [
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            },
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            },
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            }
          ];
          // 图层的数据源
          var dataSource = new Loca.GeoJSONSource({
            data: {
              type: "FeatureCollection",
              features: events
            }
          });
          // 创建圆点图层
          var pointLayer = new Loca.PointLayer({
            zIndex: 10,
            opacity: 1,
            visible: true,
            blend: "lighter"
          });
          // 图层添加数据
          pointLayer.setSource(dataSource);

          // 设置样式
          pointLayer.setStyle({
            radius: 30,
            color: "red",
            borderWidth: 10,
            borderColor: "#fff",
            unit: "px"
          });
          // 添加到地图上
          loca.add(pointLayer);
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  components: {}
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 1000px;
  border-radius: 12px;
  background: rgb(8, 34, 97);
}
.container {
  width: 100%;
  height: 100%;
  background: rgb(8, 34, 97);
}
::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}
::v-deep .amap-copyright {
  opacity: 0;
}
</style>
相关推荐
前端小万3 分钟前
一次紧急的现场性能问题排查
前端·性能优化
一只乔哇噻5 分钟前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
钮钴禄·爱因斯晨15 分钟前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
excel18 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手19 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360221 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep21 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo24 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
六点半88831 分钟前
【C++】C++11 篇二
开发语言·c++
DDDDDDDRDDR38 分钟前
C++容器:list
开发语言·c++·stl