feat:地图信息框点击

ZhangXianQiang

2024-03-08 dfa2e66389df106ef38a4fd621f2e3e0cf91ace8

 src/views/daoAnOffice/center/map.vue

@@ -2,7 +2,7 @@
  <div class="map-container">
    <div class="map-content" id="map" ref="map"></div>


    <div class="shadow"></div>
    <!-- 图标菜单 -->
    <div class="info-box">
      <!--      right菜单-->
@@ -24,19 +24,64 @@
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
    </div>

    <!-- 导入自定义弹窗 -->
    <div class="dialog-container dialog">
      <DialogType1 ref="dtype1"></DialogType1>
      <DialogType2 ref="dtype2"></DialogType2>
      <DialogType3 ref="dtype3"></DialogType3>
      <DialogType4 ref="dtype4"></DialogType4>
      <DialogType5 ref="dtype5"></DialogType5>
      <DialogType6 ref="dtype6"></DialogType6>
      <DialogType7 ref="dtype7"></DialogType7>
      <DialogType8 ref="dtype8"></DialogType8>
      <DialogType9 ref="dtype9"></DialogType9>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref,getCurrentInstance } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

import { require } from '@/utils/require.js';
import DialogType1 from './dialog/dialog-type1.vue';
import DialogType2 from './dialog/dialog-type2.vue';
import DialogType3 from './dialog/dialog-type3.vue';
import DialogType4 from './dialog/dialog-type4.vue';
import DialogType5 from './dialog/dialog-type5.vue';
import DialogType6 from './dialog/dialog-type6.vue';
import DialogType7 from './dialog/dialog-type7.vue';
import DialogType8 from './dialog/dialog-type8.vue';
import DialogType9 from './dialog/dialog-type9.vue';

import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
import icon3 from '@/assets/img/icon/icon3.png';
import icon4 from '@/assets/img/icon/icon4.png';
import icon5 from '@/assets/img/icon/icon5.png';
import icon6 from '@/assets/img/icon/icon6.png';
import icon7 from '@/assets/img/icon/icon7.png';
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';

const dtype1 = ref(null);
const dtype2 = ref(null);
const dtype3 = ref(null);
const dtype4 = ref(null);
const dtype5 = ref(null);
const dtype6 = ref(null);
const dtype7 = ref(null);
const dtype8 = ref(null);
const dtype9 = ref(null);

const map = ref(null);

// dialog集合
const dialogList = ref({});
// 获取当前实例
const {ctx} = getCurrentInstance();

let mapInstance = null;
let trafficLayer = null;;

@@ -46,6 +91,9 @@
// 地图的图标数组
const markers = [];

// 信息弹窗
let infoWindow = null;

// 图列
const legendList = ref([
  {
@@ -53,7 +101,7 @@
    name: '事故易发多发路段',
    num: 78,
    type: 1,
    icon: require('@/assets/img/sgyfd.png'),
    icon: icon1,
    positions: [[103.647593, 30.981856], [103.646627, 30.988235], [103.650077, 30.988074]],
    isActive: false
  },
@@ -63,7 +111,7 @@
    type: 2,
    num: 178,
    positions: [[103.647888, 30.985006], [103.650983, 30.986252], [103.641461, 30.984588]],
    icon: require('@/assets/img/zdlytd.png'),
    icon: icon2,
    isActive: false
  },
  {
@@ -72,7 +120,7 @@
    num: 278,
    positions: [[103.637916, 30.986298], [103.636751, 30.989508], [103.64093, 30.99344]],
    type: 3,
    icon: require('@/assets/img/djyjq.png'),
    icon: icon3,
    isActive: false
  },
  {
@@ -81,7 +129,7 @@
    num: 348,
    positions: [[103.646413, 30.996714], [103.634337, 31.0026], [103.620841, 31.001253]],
    type: 4,
    icon: require('@/assets/img/jlpb.png'),
    icon: icon4,
    isActive: false
  },
  {
@@ -90,7 +138,7 @@
    num: 578,
    positions: [[103.62134, 30.996972], [103.622005, 30.991923], [103.63062, 30.986588]],
    type: 5,
    icon: require('@/assets/img/dwsg.png'),
    icon: icon5,
    isActive: false
  },
  {
@@ -99,7 +147,7 @@
    num: 788,
    positions: [[103.640319, 30.984486], [103.644916, 30.986956], [103.646853, 30.992143]],
    type: 1,
    icon: require('@/assets/img/jtysqy.png'),
    icon: icon6,
    isActive: false
  },
  {
@@ -108,7 +156,7 @@
    num: 758,
    positions: [[103.651482, 30.995956], [103.639654, 30.995206], [103.631119, 30.987425]],
    type: 7,
    icon: require('@/assets/img/zdlytd.png'),
    icon: icon7,
    isActive: false
  },
  {
@@ -117,7 +165,7 @@
    num: 758,
    positions: [[103.652716, 30.974745], [103.668166, 30.976447], [103.672511, 30.979961]],
    type: 8,
    icon: require('@/assets/img/gjxl.png'),
    icon: icon8,
    isActive: false
  },
  {
@@ -126,7 +174,7 @@
    num: 718,
    positions: [[103.674056, 30.988625], [103.668155, 30.996379], [103.660333, 30.998098]],
    type: 9,
    icon: require('@/assets/img/aqyh.png'),
    icon: icon9,
    isActive: false
  },

@@ -154,32 +202,48 @@
// 过滤图列
const filterLegend = (item) => {
  const { icon, positions, type } = item;
  const dialog = dialogList.value[type].$refs.dialog;
  const tempList = [];
  positions.map(position => {
    const markerIcon = createIcon(icon);
    const marker = ceateMarker(markerIcon, position);
    const marker = ceateMarker(type, markerIcon, position);
    tempList.push(marker);
    marker.on('click', (markerEvent) => {
      infoWindow.setContent(dialog);
      infoWindow.open(mapInstance, markerEvent.target.getPosition());
      // console.log(dialogList.value[type]);
    });
  });
  markers.push({ type: type, markerList: tempList })
  mapInstance.add(tempList);
}

// 创建弹窗
const createInfoWindow = () => {
  infoWindow = new AMap.InfoWindow({
    isCustom: true,
    closeWhenClickMap: true,
    offset: new AMap.Pixel(20, -20),
  });
}

// 创建图标
const createIcon = (img) => {
  return new AMap.Icon({
    size: new AMap.Size(34, 41),    // 图标尺寸
    // size: new AMap.Size(43.8, 49.2),    // 图标尺寸
    image: img,  // Icon的图像
    imageSize: new AMap.Size(34, 41)   // 根据所设置的大小拉伸或压缩图片
    imageSize: new AMap.Size(43.8, 49.2)   // 根据所设置的大小拉伸或压缩图片
  });
}


// 创建marker
const ceateMarker = (icon, position) => {
const ceateMarker = (type, icon, position) => {
  return new AMap.Marker({
    icon: icon,
    position: new AMap.LngLat(position[0], position[1]),
    zooms: [2, 20],
    extData: type
  });
}

@@ -212,6 +276,14 @@
}


// 弹窗与组件映射
const mapComponentInstance = () => {
  legendList.value.map((item) => {
    dialogList.value[item.id] = ctx.$refs[`dtype${item.id}`];
  })
}


onMounted(() => {
  AMapLoader.load({
    key: "2898109c22191c3969957500934169dc", //申请好的 Web 端开发者 Key，首次调用 load 时必填
@@ -233,9 +305,56 @@

      trafficLayer.setMap(mapInstance);

      // test();
      // console.log(markers.value[0]);
      // mapInstance.add(markers.value[0].markerList);
      // 限制一个区域轮廓
      const options = {
        subdistrict: 0,
        extensions: "all",
        level: "district",
      };

      AMap.plugin("AMap.DistrictSearch", function () {
        //在回调函数中实例化插件，并使用插件功能
        const district = new AMap.DistrictSearch(options);
        district.search("都江堰市", (status, result) => {
          const 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),
          ];
          const holes = result.districtList[0].boundaries;

          const pathArray = [outer];
          pathArray.push.apply(pathArray, holes);
          const polygon = new AMap.Polygon({
            pathL: pathArray,
            //线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: "rgb(20,164,173)",
            strokeWeight: 4,
            //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 0.5,
            //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillColor: "rgba(0,0,0)",
            //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 1,
            //轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: "solid",
            /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
            ie9+浏览器有效 取值： 
            实线：[0,0,0] 
            虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
            点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
            线和10个像素的空白 （如此反复）组成的虚线*/
            strokeDasharray: [10, 2, 10],
          });
          polygon.setPath(pathArray);
          mapInstance.add(polygon);
        });
      });
      // 创建infowindow
      createInfoWindow();
      // 映射组件
      mapComponentInstance();
    })
    .catch((e) => {
      console.log(e);
@@ -249,6 +368,7 @@
  height: 100%;
  position: absolute;
  z-index: 0;
  box-shadow: inset 0px 0px 100px 18px #081729;

  .map-content {
    width: 100%;
@@ -272,7 +392,8 @@

  .item-tb-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 5px;
  }

  .info-div-p {
@@ -310,18 +431,43 @@

.road {
  position: absolute;
  bottom: 202px;
  bottom: 180px;
  left: 2434px;
  z-index: 999;
  width: 65px;
  cursor: pointer;

  .item-tb-p {
    font-family: PingFang SC;
    font-family: 'PingFang SC';

    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 42px;
  }
}

.shadow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-shadow: inset 0px 0px 100px 120px #081729;
  pointer-events: none;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  visibility: hidden !important;
}

.dialog {
  opacity: 0;
  position: absolute;
  left: -500px;
}
</style>