百度地图 vue3 +ts

没错就是我哎呀

已于 2023-02-22 16:45:31 修改

阅读量155

点赞数

分类专栏：前端 vue 地图文章标签： echarts javascript 百度地图

于 2023-02-22 16:43:33 首次发布

本文链接：https://blog.csdn.net/he3236220/article/details/129165538

版权

前端同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

vue

34 篇文章 1 订阅

订阅专栏

地图

2 篇文章 0 订阅

订阅专栏

地图连接

demo demo链接
js API api
类类

index.html引用

//百度地图引用
<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&ak=key"></script>
		//点聚合引用
<script type="text/javascript"
		src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript"
		src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

demo页

css:去掉百度地图的logo
页面

<template>
  <div class="visualizing-demo1">
	<div ref="visualizingDemo1" style="height: 100%"></div>
  </div>
</template>
<style scoped lang="scss">
.visualizing-demo1 {
  height: 100%;
  width: 100%;
  position: relative;
  //去掉地图的logo
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
  :deep(.anchorBL) {
    display: none;
  }
 }
  </style>

js

<script setup lang="ts" name="visualizingLinkDemo1">
import { reactive, onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { formatDate } from "/@/utils/formatTime";
import { NextLoading } from "/@/utils/loading";
//地图数据
import { echartsMapList, echartsMapData, echartsMapImgs } from "./mock/demo1";
//个性化地图样式
import style1 from "./style1";
import style2 from "./style2";
// 定义变量内容
const visualizingDemo1 = ref();
const visualizingContentLeftTop = ref();
const visualizingContentLeftBottom = ref();
const visualizingContentCenterTop = ref();
const visualizingContentCenterBottom = ref();
const visualizingContentRightTop = ref();
const visualizingContentRightBottom = ref();
const state = reactive({
  echartsMapList,
  echartsMapData,
  echartsMapImgs,
  time: {
    txt: "",
    fun: 0,
  },
  myCharts: [] as EmptyArrayType,
});

// 初始化时间
const initTime = () => {
  state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ");
  state.time.fun = window.setInterval(() => {
    state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ");
  }, 1000);
};
// echartsMap 将坐标信息和对应物理量的值合在一起
const convertData = (data: any) => {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = state.echartsMapData[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};
// 初始化 echartsMap（地图上的点）
const initEchartsMap = () => {
  const myChart = echarts.init(<HTMLElement>visualizingDemo1.value);
  const option = {
    tooltip: {
      trigger: "item",
      formatter(params: any) {
        // 自定义鼠标放入样式
        let item = state.echartsMapImgs.find((v: any) => v.name === params.name);
        let html = `<div style="width: 240px">
							<div style="display: flex; align-items: center">
								<img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px" />
								<div
									style="
										background: #51c1ff;
										width: 100%;
										height: 32px;
										margin-left: -14px;
										display: flex;
										align-items: center;
										padding-left: 20px;
										color: #fff;
									"
								>
									${item?.name}
								</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
							</div>
						</div>`;
        return html;
      },
    },
    color: ["#ea7ccc"],
    bmap: {
      center: [114.064524, 22.549225],
      zoom: 11,
      roam: true,
      /* mapStyle: {
        styleJson: style2.styleJson,
      }, */
    },
    series: [
       {
        name: "门票收入",
        type: "scatter",
        coordinateSystem: "bmap",
        data: convertData(state.echartsMapList),
        symbolSize: function (val: any) {
          return val[2] / 10;
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
      }, 
      {
        name: "门票收入",
        type: "effectScatter",
        coordinateSystem: "bmap",
        data: convertData(
          state.echartsMapList
            .sort(function (a: any, b: any) {
              return b.value - a.value;
            })
            .slice(0, 6)
        ),
        symbolSize: function (val: any) {
          return val[2] / 10;
        },
        encode: {
          value: 2,
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        itemStyle: {
          shadowBlur: 100,
          shadowColor: "#333",
        },
        zlevel: 1,
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);

  // 地图
  const map = (<any>myChart).getModel().getComponent("bmap").getBMap();
  // BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
  // BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
  // BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
  // BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
  // eslint-disable-next-line no-undef
  map.setMapType(BMAP_NORMAL_MAP);
  map.setMapStyleV2({
    // styleId: "94f978b3818177707cfab7ac20d62caa",
    styleJson: style2.styleJson,
  });
  // eslint-disable-next-line no-undef
  let bdary = new BMap.Boundary();
  // 获取行政区域
  bdary.get("深圳", function (rs: any) {
    // 行政区域的点有多少个
    let count = rs.boundaries.length;
    for (let i = 0; i < count; i++) {
      // eslint-disable-next-line no-undef
      let ply = new BMap.Polygon(rs.boundaries[i], {
        // 设置多边形边线线粗
        strokeWeight: 4,
        // 设置多边形边线透明度0-1
        strokeOpacity: 1,
        // 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
        StrokeStyle: "dashed",
        // 设置多边形边线颜色
        strokeColor: "#febb50",
        // 设置多边形填充颜色
        fillColor: "",
      });
      // 建立多边形覆盖物
      // 添加覆盖物
      map.addOverlay(ply);
      // 调整视野
      map.setViewport(ply.getPath());
    }
    // 初始化地图，设置中心点坐标和地图级别
    // new BMap.Point('深圳市', 11)
    // eslint-disable-next-line no-undef
    map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
  });
  const markersLL = convertData(
    state.echartsMapList
      .sort(function (a: any, b: any) {
        return b.value - a.value;
      })
      .slice(0, 6)
  );
 let markers:any[] = []
  markersLL.map((item) => {
    // 坐标点经纬度
    const point = new BMap.Point(item.value[0], item.value[1]);
    // 配置放大后单个点的自定义图标
    const myIcon = new BMap.Icon("https://img1.baidu.com/it/u=2425496005,2401702709&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", new BMap.Size(20, 20));
    // 设置图标大小
    myIcon.setImageSize(new BMap.Size(20, 20));
    const marker = new BMap.Marker(point, { icon: myIcon });
    map.addOverlay(marker);
    markers.push(marker)
  }); 
  // 添加点聚合效果
  new BMapLib.MarkerClusterer(map, {
    markers: markers,
    // 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
    minClusterSize: 2,
    styles: [
      {
        url: "a.png",
        size: new BMap.Size(42, 42),
      },
    ],
  }); 
};

// 页面卸载时
onUnmounted(() => {
  window.clearInterval(state.time.fun);
});
</script>