leprechaun-amap v1.0.72016

leprechaun-amap

vue2 高德地图组件

• JS_API-V2 参考手册 https://lbs.amap.com/api/jsapi-v2/documentation

地图加载

地图插件

• 所有插件 https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins

已支持插件（有些插件需要 addControl()，官方文档没有明确哪些需要）

使用示例

<AMap
  ref="testMap"
  :load="{
        key: 'xxxxxxxxxxxxxxxxxxxxxx',
        plugins: [
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.HeatMap',
          'AMap.GeoJSON',
        ],
      }"
  @complete="initMap()"
/>

创建地图对象

• 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#map

使用示例

<AMap
  ref="testMap"
  :load="{
        key: 'xxxxxxxxxxxxxxxxxxxxxx',
        plugins: [
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.HeatMap',
          'AMap.GeoJSON',
        ],
      }"
  :mapObj="{
        mapStyle: 'amap://styles/fresh',
        zoom: 10,
        zooms: [8, 18],
        center: [116.419447, 25.049867],
        viewMode: '3D',
        pitch: 60,
      }"
  @complete="initMap()"
/>

限定可视范围

热力图层

• 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#heatmap

使用示例

this.$refs.testMap.initHeatMap({
  data: res.data.map((item) => {
    return { longitude: +item.jd, latitude: +item.wd, count: 1 };
  }),
  crs: "wgs84",
  value_max: 1,
});

添加 Marker

• 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#marker

使用示例

this.$refs.testMap.addMarker({
  data: cz_markerData,
  crs: "bd09",
  icon: {
    image: require("../assets/cz.png"),
    width: 24,
    height: 24,
  },
});

markerData

icon

信息窗 infoWindow

添加覆盖物

• 折线 https://lbs.amap.com/api/jsapi-v2/documentation#polyline

使用示例

this.$refs.testMap.addPolyline({
  data: [
    { longitude: 117.017362, latitude: 25.075884 },
    { longitude: 116.98303, latitude: 25.090809 },
    { longitude: 116.943033, latitude: 25.104645 },
  ],
});

• 多边形 https://lbs.amap.com/api/jsapi-v2/documentation#polygon

使用示例

this.$refs.testMap.addPolyline({
  data: [
    { longitude: 117.017362, latitude: 25.075884 },
    { longitude: 116.98303, latitude: 25.090809 },
    { longitude: 116.943033, latitude: 25.104645 },
  ],
});

• 圆形 https://lbs.amap.com/api/jsapi-v2/documentation#Circle

使用示例

this.$refs.testMap.addCircle({
  longitude: 117.017362,
  latitude: 25.075884,
});

GeoJSON

• 参考文档 https://lbs.amap.com/api/jsapi-v2/documentation#geojson

使用示例

this.$refs.testMap.addGeoJson({
  geoJSON: GeoJson_shangHang,
});

事件

完整使用示例

<!--
 * @Author: ChenWei
 * @Date: 2022-07-13 14:03:43
 * @LastEditors: ChenWei
 * @LastEditTime: 2022-07-19 10:39:11
 * @FilePath: \amap\test\src\components\MapContainer.vue
 * @Description:
 * WeChat:ChenWei990128
 * Copyright (c) 2022 by 福建龙腾大数据信息技术有限公司, All Rights Reserved.
-->
<template>
  <div style="width: 100vw; height: 100vh">
    <AMap
      ref="testMap"
      :load="{
        key: 'xxxxxxxxxxxxxxxxxxxxxxx',
        plugins: [
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.HeatMap',
          'AMap.GeoJSON',
        ],
      }"
      :mapObj="{
        mapStyle: 'amap://styles/fresh',
        zoom: 10,
        zooms: [8, 18],
        center: [116.419447, 25.049867],
        viewMode: '3D',
        pitch: 60,
      }"
      limitBounds
      @complete="initMap()"
    />
  </div>
</template>

<script>
// 替换成npm包
import AMap from "./AMap.vue";
// 引用geoJson对象
import GeoJson_shangHang from "../assets/shanghang";
export default {
  props: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 参考手册 https://lbs.amap.com/api/jsapi-v2/documentation
    async initMap() {
      // 热力图层初始化
      this.initHeatMap();

      // geojson初始化
      this.initGeoJson();

      // 标记点初始化
      this.initMarker();

      // 线面覆盖物初始化
      this.initCover();
    },
    /**
     * @desc 初始化热力图
     */
    initHeatMap() {
      fetch("http://10.56.120.84:9089/jsons/469")
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          this.$refs.testMap.initHeatMap({
            data: res.data.map((item) => {
              return { longitude: +item.jd, latitude: +item.wd, count: 1 };
            }),
            crs: "wgs84",
            value_max: 1,
          });
        });
    },
    /**
     * @desc 初始化标记点
     */
    initMarker() {
      fetch("http://10.56.120.84:9089/jsons/449")
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          // 村 社区
          const cz_markerData = res.data
            .filter((item) => item.administrative_level != "镇")
            .map((item) => {
              return {
                longitude: item.longitude,
                latitude: item.latitude,
                title: item.name,
                introduction: item.introduction,
              };
            });
          this.$refs.testMap.addMarker({
            data: cz_markerData,
            crs: "bd09",
            icon: {
              image: require("../assets/cz.png"),
              width: 24,
              height: 24,
            },
          });
          // 乡镇
          const xz_markerData = res.data
            .filter((item) => item.administrative_level == "镇")
            .map((item) => {
              return {
                longitude: item.longitude,
                latitude: item.latitude,
                title: item.name,
                introduction: item.introduction,
              };
            });
          this.$refs.testMap.addMarker({
            data: xz_markerData,
            crs: "bd09",
            icon: {
              image: require("../assets/xz.png"),
              width: 36,
              height: 36,
            },
          });
        });
    },

    /**
     * @desc 初始化覆盖物
     */
    initCover() {
      this.$refs.testMap.addPolyline({
        data: [
          { longitude: 117.017362, latitude: 25.075884 },
          { longitude: 116.98303, latitude: 25.090809 },
          { longitude: 116.943033, latitude: 25.104645 },
        ],
      });
      this.$refs.testMap.addCircle({
        longitude: 117.017362,
        latitude: 25.075884,
      });
    },
    /**
     * @desc 初始化geojson数据
     */
    initGeoJson() {
      this.$refs.testMap.addGeoJson({
        geoJSON: GeoJson_shangHang,
      });
    },
  },
  components: { AMap },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 45vh;
  background-color: #f3f4f5;
}
</style>