vue 高德地图（1）

vue-amap

npm install vue-amap
main.js

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 高德地图
VueAMap.initAMapApiLoader({
        key: '密钥',
        plugin: [
            'AMap.Scale',
            'AMap.Icon',
            'AMap.Marker',
            'AMap.CircleMarker',
            'AMap.MassMarks',
            'AMap.OverView',
            'AMap.ToolBar',
            'AMap.ControlBar',
            'AMap.MapType',
            'AMap.Geolocation',
            'AMapUI.loadUI',
            'AMap.Autocomplete',
            'AMap.PlaceSearch',
            'AMap.PolyEditor',
            'AMap.Polygon',
            'AMap.TileLayer',
            'AMap.DistrictSearch',
            'AMap.Object3DLayer',
            'AMap.LngLat',
            'AMap.CircleEditor'
        ],
        uiVersion: '1.0.11', // 版本号
    })

map.vue

<template>
  <div class="amap-page-container">
    <el-amap
      vid="amap-demo"
      ref="amap"
      :center="center"
      :amap-manager="amapManager"
      :zoom="zoom"
      :events="events"
      :address-info="addressInfo"
      :view-mode="viewMode"
      :scroll-wheel="scrollWheel"
      :resize-enable="resizeEnable"
      style=" width: 100%; height: 550px; margin: auto;"
    >
      <!-- 标记点 -->
      <!-- <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker> -->
    </el-amap>
  </div>
</template>

<script>
import VueAMap from "vue-amap";
import {
  options,
  ancientTown,
  lakeMeilan,
  marketTown,
  arealabelMarker,
  equipmentMarker,
} from "assets/locus.js";//假数据存储
import icon3 from "assets/icon_3.png";
let amapManager = new VueAMap.AMapManager();
export default {
  name: "amap-demo",
  data() {
    return {
      show: true,
      ancientTownAreaShow: true,
      lakeMeilanAreaShow: true,
      nearbyInfo: [], //周边建筑物信息
      addressInfo: "shanghai", //城市信息
      center: [121.362017, 31.404342], //中心点
      zoom: 14, //地图缩放
      maxZoom: 18,
      pitch: 0,
      traffic: 1,
      pitch: 80,
      rotation: -15,
      viewMode: "3D", //开启3D视图,默认为关闭
      resizeEnable: true, //是否监控地图容器尺寸变化
      rotateEnable: true, //是否旋转
      buildingAnimation: true, //楼块出现是否带动画
      zoomEnable: false, //禁止缩放
      dragEnable: false, //禁止拖拽
      scrollWheel: false,
      amapManager,
      events: {
        init: (map) => this.infoInitHandler(map),
        click: (e) => {
          // console.log(this.$refs.amap.$$getInstance());
          if (this.show) {
            //渲染静态设备点
            this.$options.methods.renderEquipmentMarker(
              this.$refs.amap.$$getInstance()
            );
          }
          this.show = false
        },
      },
    };
  },
  methods: {
    infoInitHandler(map) {
      //主题色
      map.setMapStyle("amap://styles/951cc986438c8f30c881415e5318fed8");

      //图标
      let markerAreaIcon = new AMap.Icon({
        size: new AMap.Size(10, 10),
        image: icon3,
        imageSize: new AMap.Size(10, 10),
        // imageOffset: new AMap.Pixel(-95, -3),
      });

      new AMap.TileLayer.RoadNet({
        zIndex: 20,
      });
      new AMap.TileLayer({
        zIndex: 6,
        opacity: 0.5,
        visible: true,
        getTileUrl:
          "https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]",
      });
      //遮罩
      new AMap.DistrictSearch({
        extensions: "all",
        subdistrict: 0,
      }).search("", function (status, result) {
        let outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ];
        let pathArray = [outer];
        pathArray.push.apply(pathArray, options.areas[0].path);
        let polygons = new AMap.Polygon({
          bubble: true,
          strokeWeight: 2,
          strokeColor: "#00eeff",
          strokeOpacity: 0.1,
          fillColor: "#000",
          fillOpacity: 0.8,
          path: pathArray,
          map: map,
        });
        polygons.setPath(pathArray);
        map.add(polygons);
        let bounds = map.getBounds(); // 获取显示范围
        map.setLimitBounds(bounds);
      });

      let amapLabel = document.documentElement.getElementsByClassName(
        "amap-message"
      );
      //覆盖物
      let ancientTownArea = new AMap.Polygon({
        bubble: true,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeColor: "blue",
        strokeOpacity: 0, //线透明度
        fillColor: "blue",
        path: ancientTown,
        map: map,
      });
      ancientTownArea.on("click", (e) => {
        if (this.ancientTownAreaShow) {
          for (let i = 0; i < amapLabel.length; i++) {
            amapLabel[i].style.display = "none";
          }
          this.$options.methods.magnifyClickedHandler(
            [121.343413, 31.412693],
            e.target,
            map
          );
          //片区信息
          this.$options.methods.renderAreaInformation(map, 0, markerAreaIcon);
        }
        this.ancientTownAreaShow = false;
      });
      //渲染片区标签
      this.$options.methods.renderArealabelMarker(map, markerAreaIcon);
      //渲染人动态定位：闪烁效果
      this.$options.methods.renderCharacterLocation(map);
    },
    //渲染片区标签
    renderArealabelMarker: (map, markerAreaIcon) => {
      let areaInfoWindow;
      for (let i = 0; i < arealabelMarker.length; i++) {
        let point = [arealabelMarker[i].x, arealabelMarker[i].y];
        let markerArealabel = new AMap.Marker({
          position: point,
          map: map,
          icon: markerAreaIcon,
          title: arealabelMarker[i].title,
          visible: true,
        });

        markerArealabel.setLabel({
          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          content: arealabelMarker[i].title, //设置文本标注内容
          direction: "center", //设置文本标注方位
        });
      }
    },
    //渲染单个片区信息
    renderAreaInformation: (map, id, markerAreaIcon) => {
      let point = [arealabelMarker[id].x, arealabelMarker[id].y];
      let markerAreaInformation = new AMap.Marker({
        position: point,
        map: map,
        icon: markerAreaIcon,
        title: arealabelMarker[id].content,
        visible: true,
      });
      markerAreaInformation.setLabel({
        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
        content: arealabelMarker[id].content, //设置文本标注内容
        direction: "center", //设置文本标注方位
      });
    },
    //区域放大点击事件
    magnifyClickedHandler: (lnglat, cxt, map) => {
      let infoWindow;
      map.setZoomAndCenter(16, lnglat);
      infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
      });
      infoWindow.open(map, lnglat);
      infoWindow.setContent(cxt.content);
    },
    //渲染静态设备点
    renderEquipmentMarker: (map) => {
      for (let i = 0; i < equipmentMarker.length; i++) {
        let point = [equipmentMarker[i].x, equipmentMarker[i].y];
        let marker = new AMap.Marker({
          position: point,
          map: map,
          title: equipmentMarker[i].title,
          visible: true,
        });
        marker.setLabel({
          // offset: new AMap.Pixel(-60, -40), //设置文本标注偏移量
          content: equipmentMarker[i].title, //设置文本标注内容
          direction: "left", //设置文本标注方位
        });
      }
    },
    //渲染人动态定位：闪烁效果
    renderCharacterLocation: (map) => {
      //点样式
      let style = [
        {
          url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(11, 11),
        },
        {
          url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
          anchor: new AMap.Pixel(4, 4),
          size: new AMap.Size(7, 7),
        },
      ];
      let citys = [
        { lnglat: [121.366214, 31.402994], style: 1 },
        { lnglat: [121.360206, 31.405485], style: 2 },
        { lnglat: [121.357631, 31.406657], style: 1 },
        { lnglat: [121.352138, 31.406364], style: 2 },
        { lnglat: [121.364154, 31.391418], style: 2 },
      ];
      //加载海量点图层
      let mass = new AMap.MassMarks(citys, {
        opacity: 0.5,
        zIndex: 111,
        cursor: "pointer",
        style: style,
      });
      let marker = new AMap.Marker({ content: " ", map: map });
      mass.setMap(map);
    },
  },
  mounted() {},
};
</script>
<style>
@import url("./index");
</style>