feat:3D地图重构

ZhangXianQiang

2024-03-01 6ff83c7075d745834208fb232abeaf51019d78c3

feat:3D地图重构

 package-lock.json

@@ -15,6 +15,7 @@
        "countup.js": "^2.8.0",
        "dayjs": "^1.11.10",
        "echarts": "^5.4.3",
        "echarts-gl": "^2.0.9",
        "element-plus": "^2.3.14",
        "mockjs": "^1.1.0",
        "pinia": "^2.1.6",
@@ -1219,6 +1220,11 @@
        "fsevents": "~2.3.2"
      }
    },
    "node_modules/claygl": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1370,6 +1376,18 @@
        "zrender": "5.4.4"
      }
    },
    "node_modules/echarts-gl": {
      "version": "2.0.9",
      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
      "dependencies": {
        "claygl": "^1.2.1",
        "zrender": "^5.1.1"
      },
      "peerDependencies": {
        "echarts": "^5.1.2"
      }
    },
    "node_modules/electron-to-chromium": {
      "version": "1.4.549",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.549.tgz",

 package.json

@@ -17,6 +17,7 @@
    "countup.js": "^2.8.0",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "echarts-gl": "^2.0.9",
    "element-plus": "^2.3.14",
    "mockjs": "^1.1.0",
    "pinia": "^2.1.6",

 src/assets/img/icon/map_info_title.png

 src/assets/img/icon/map_title.png

 src/assets/map/dujiangyan.json

Diff too large

 src/stores/map.js

New file
@@ -0,0 +1,3 @@
import {ref} from 'vue';

export const mapState = ref(true);

 src/views/HomeView.vue

@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup>
import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
@@ -7,15 +7,15 @@
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";
import Chartgd from "@/views/daoAnOffice/chartgd.vue";

import {mapState} from '@/stores/map.js';

// import Chartgd from "@/views/daoAnOffice/chartgd.vue";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
const dtFig=ref(0)
const handlechan=()=>{

}
</script>

<template>
@@ -32,7 +32,7 @@
    :autoScale="isScale"
  >
    <div class="content_wrap">
      <chartgd @changeDt="handlechan"  v-if="dtFig ==0" class="gddt"></chartgd>
      <!-- <chartgd class="gddt" v-show="!mapState"></chartgd> -->
      <Headers />
      <RouterView />
      <MessageContent />

 src/views/daoAnOffice/center-map copy.vue

New file
@@ -0,0 +1,175 @@
<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { currentGET, GETNOBASE } from "@/api";
import { registerMap, getMap } from "echarts/core";
import { optionHandle, regionCodes } from "./center.map";
import BorderBox13 from "@/components/datav/border-box-13";
import type { MapdataType } from "./center.map";
import  chart2 from "./chart2.vue"
import  chartgd from "./chartgd.vue"
const option = ref({});
const code = ref("china"); //china 代表中国 其他地市是行政编码

withDefaults(
  defineProps<{
    // 结束数值
    title: number | string;
  }>(),
  {
    title: "地图",
  }
);

const dataSetHandle = async (regionCode: string, list: object[]) => {
  const geojson: any = await getGeojson(regionCode);
  let cityCenter: any = {};
  let mapData: MapdataType[] = [];
  //获取当前地图每块行政区中心点
  geojson.features.forEach((element: any) => {
    cityCenter[element.properties.name] =
      element.properties.centroid || element.properties.center;
  });
  //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
  list.forEach((item: any) => {
    if (cityCenter[item.name]) {
      mapData.push({
        name: item.name,
        value: cityCenter[item.name].concat(item.value),
      });
    }
  });
  await nextTick();
  console.log(mapData)
  option.value = optionHandle(regionCode, list, mapData);
};

const getData = async (regionCode: string) => {
  currentGET("centerMap", { regionCode: regionCode }).then((res) => {
    console.log("设备分布", res);
    if (res.success) {
      dataSetHandle(res.data.regionCode, res.data.dataList);
    }
  });
};
const getGeojson = (regionCode: string) => {
  return new Promise<boolean>(async (resolve) => {
    let mapjson = getMap(regionCode);
    if (mapjson) {
      mapjson = mapjson.geoJSON;
      resolve(mapjson);
    } else {
      mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
        (data) => data
      );
      code.value = regionCode;
      registerMap(regionCode, {
        geoJSON: mapjson as any,
        specialAreas: {},
      });
      resolve(mapjson);
    }
  });
};
getData(code.value);

const mapClick = (params: any) => {
  console.log(params);
  let xzqData = regionCodes[params.name];
  if (xzqData) {
    getData(xzqData.adcode);
  } else {
    window["$message"].warning("暂无下级地市");
  }
};
const dtFig =ref(0)
const handlechan =()=>{
  console.log(dtFig.value)
    dtFig.value = 1
}
</script>

<template>
  <div class="centermap">
    <div class="maptitle" style="display:none;">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap" style="display:none;">
<!--        <chartgd @changeDt="handlechan"  v-if="dtFig ==0"></chartgd>-->
        <chart2 ></chart2>
    </div>
  </div>
</template>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    //height: 580px;
    height: 900px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
        top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
</style>

 src/views/daoAnOffice/center-map.vue

@@ -1,149 +1,141 @@
<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { currentGET, GETNOBASE } from "@/api";
import { registerMap, getMap } from "echarts/core";
import { optionHandle, regionCodes } from "./center.map";
import BorderBox13 from "@/components/datav/border-box-13";
import type { MapdataType } from "./center.map";
import  chart2 from "./chart2.vue"
import  chartgd from "./chartgd.vue"
const option = ref({});
const code = ref("china"); //china 代表中国 其他地市是行政编码

withDefaults(
  defineProps<{
    // 结束数值
    title: number | string;
  }>(),
  {
    title: "地图",
  }
);

const dataSetHandle = async (regionCode: string, list: object[]) => {
  const geojson: any = await getGeojson(regionCode);
  let cityCenter: any = {};
  let mapData: MapdataType[] = [];
  //获取当前地图每块行政区中心点
  geojson.features.forEach((element: any) => {
    cityCenter[element.properties.name] =
      element.properties.centroid || element.properties.center;
  });
  //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
  list.forEach((item: any) => {
    if (cityCenter[item.name]) {
      mapData.push({
        name: item.name,
        value: cityCenter[item.name].concat(item.value),
      });
    }
  });
  await nextTick();
  console.log(mapData)
  option.value = optionHandle(regionCode, list, mapData);
};

const getData = async (regionCode: string) => {
  currentGET("centerMap", { regionCode: regionCode }).then((res) => {
    console.log("设备分布", res);
    if (res.success) {
      dataSetHandle(res.data.regionCode, res.data.dataList);
    }
  });
};
const getGeojson = (regionCode: string) => {
  return new Promise<boolean>(async (resolve) => {
    let mapjson = getMap(regionCode);
    if (mapjson) {
      mapjson = mapjson.geoJSON;
      resolve(mapjson);
    } else {
      mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
        (data) => data
      );
      code.value = regionCode;
      registerMap(regionCode, {
        geoJSON: mapjson as any,
        specialAreas: {},
      });
      resolve(mapjson);
    }
  });
};
getData(code.value);

const mapClick = (params: any) => {
  console.log(params);
  let xzqData = regionCodes[params.name];
  if (xzqData) {
    getData(xzqData.adcode);
  } else {
    window["$message"].warning("暂无下级地市");
  }
};
const dtFig =ref(0)
const handlechan =()=>{
  console.log(dtFig.value)
    dtFig.value = 1
}
</script>

<template>
  <div class="centermap">
    <div class="maptitle" style="display:none;">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    <div class="maptitle">
      <img src="@/assets/img/icon/map_title.png" alt="">
    </div>
    <div class="mapwrap" style="display:none;">
<!--        <chartgd @changeDt="handlechan"  v-if="dtFig ==0"></chartgd>-->
        <chart2 ></chart2>
    <div class="mapwrap">
      <div ref="map" class="map-style"></div>
    </div>

    <div class="map-info-container">
      <div class="info-title-container">
        <div class="img-bg">
          <img src="@/assets/img/icon/map_info_title.png" alt="">
        </div>
        <div class="info-title">
          <div class="icon">
            <img src="@/assets/img/icon/arrow_right.png" alt="">
          </div>
          <span class="title">都江堰市</span>
        </div>
      </div>
      <div class="info-content-container">
        <div class="info-item">
          <div class="info-lable">事故易发多发路段：</div>
          <div class="info-text">78</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点旅游通道：</div>
          <div class="info-text">12</div>
        </div>
        <div class="info-item">
          <div class="info-lable">都江堰景区：</div>
          <div class="info-text">5</div>
        </div>
        <div class="info-item">
          <div class="info-lable">警力配备：</div>
          <div class="info-text">265</div>
        </div>
        <div class="info-item">
          <div class="info-lable">打围施工：</div>
          <div class="info-text">12</div>
        </div>
        <div class="info-item">
          <div class="info-lable">交通事故易发点：</div>
          <div class="info-text">31</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点运输企业：</div>
          <div class="info-text">19</div>
        </div>
        <div class="info-item">
          <div class="info-lable">公交线路：</div>
          <div class="info-text">89</div>
        </div>
        <div class="info-item">
          <div class="info-lable">安全隐患：</div>
          <div class="info-text">3</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { ref, onMounted, nextTick } from "vue";

import mapData from '@/assets/map/dujiangyan.json';


echarts.registerMap('dujiangyan', mapData);

const map = ref(null);
let mapChart = null;

const mapConfig = {
  geo3D: {
    map: "dujiangyan", //注册地图的名字
    roam: true, //开启鼠标缩放和平移漫游。默认不开启
    bottom: 120,
    left: 10,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 0.7, //透明度
      borderWidth: 1.5, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
    },
    // 标签
    label: {
      show: true,
      color: "#fff", //地图初始化区域字体颜色
      fontSize: 18,
      formatter: function (params) {
        return params.name
      },
    },
    // 控制器
    viewControl: {
      beta: 80,
      alpha: 55,
      distance: 210,
      maxBeta: 180
    },
    // 灯光
    light: {
      main: {
        shadow: true,
        intensity: 1
      }
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
      }
    }
  }
};

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      mapChart = echarts.init(map.value);
      mapChart.setOption(mapConfig, true);
    }, 1000);
  })
})
</script>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }
  position: relative;

  .mapwrap {
    //height: 580px;
@@ -172,4 +164,79 @@
    }
  }
}

.map-style {
  width: 100%;
  height: 100%;
}

.maptitle {
  width: 308px;
  position: absolute;
  left: 0;
  top: 0;
}

.map-info-container {
  width: 225px;
  position: absolute;
  right: 0;
  bottom: 150px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;

  .info-title-container {
    width: 100%;
    position: relative;

    .img-bg {
      width: 100%;
    }

    .info-title {

      width: 100%;
      position: absolute;
      top: 5px;
      left: 0;
      display: flex;
      align-items: center;

      .icon {
        width: 15px;
        margin: 0 5px 0 12px;
      }

      .title {
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
        font-style: italic;
        background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .info-content-container {
    padding: 18px 20px;
    margin-top: -40px;
    font-size: 14px;

    .info-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #4481DD;
      line-height: 28px;
      .info-text {
        color: #fff;
      }
    }
  }

}
</style>

 src/views/daoAnOffice/chartgd copy.vue

New file
@@ -0,0 +1,779 @@
<template>
  <div class="home">
    <div id="map-box"></div>
    <div  style="position: absolute;bottom: 5%;right: 35%;z-index: 999">
      <div @click="btnlk" class="item-tb">
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
      <div @click="toggleTrafic" class="item-tb">
        <p class="item-tb-p">地图切换</p>
        <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
      </div>

    </div>
    <div class="info-box">
<!--      right菜单-->
      <div class="info-div" @click="accidentProneRoadSections">
        <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>事故易发多发路段</p>
          <p>78</p>
        </div>
      </div>
      <div class="info-div" @click="keyTouristChannels">
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点旅游通道</p>
         <p>178</p>
       </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>都江堰景区</p>
         <p>278</p>
       </div>
      </div>
      <div class="info-div" @click="policeForceDeployment">
        <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>警力配备</p>
          <p>348</p>
        </div>
      </div>
      <div class="info-div" @click="fencingConstruction">
        <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>打围施工</p>
         <p>578</p>
       </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>交通事故易发点</p>
          <p>788</p>
        </div>
      </div>
      <div class="info-div" @click="keyTransportationEnterprises">
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点运输企业</p>
         <p>758</p>
       </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
      <div class="info-div-p">
        <p>公交线路</p>
        <p>785</p>
      </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>安全隐患</p>
         <p>718</p>
       </div>
      </div>

<!--      搜索-->
<!--      <el-input-->
<!--          v-model="keyword"-->
<!--          placeholder="输入关键字搜索"-->
<!--          style="width: 300px"-->
<!--          @change="handleSearch"-->
<!--      >-->
<!--      </el-input>-->
<!--      <div class="ul">-->
<!--        <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">-->
<!--          <div class="d-flex flex-column">-->
<!--            <span style="margin-bottom: 6px">{{item.name}}</span>-->
<!--            <span>地址：{{item.address}}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {Pointer} from "@element-plus/icons-vue";

const map = shallowRef(null);
const keyword = ref('');
const addresstext = ref('')
const data = ref([]);
const coord = ref('');
const adcode = ref('')
const isVisible = ref(false);
const trafficLayer = ref(null);
const vectorLayer = ref(null);
const isIdent = ref(true);
const isKeyTour = ref(true);
const trafficVisible = ref(true);
let marker = ref(null);
let AMapObj, placeSearch, geocoder;
const props = defineProps({
  form:{}
})

onMounted(async () => {
  await initMap()
  gddt()
});
const gddt = () =>{

}

const toggleTrafic = () => {
  emit('changeDt')
};
const fencingConstruction = () => {
  //构建信息窗体中显示的内容
  let info = [];
  info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>xx公园停车场改建</h4>");
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>施工单位：xxxx公司 施工周期：1年 开始时间：2024年1月 本次施工包括xxxxxxxxxxxxxxxxxxxxxx</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
  });
  //构建信息窗体中显示的内容
  // marker = new AMap.Marker({
  //      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
  //      position: [103.646554,30.989656],
  //      offset: new AMap.Pixel(-13, -30)
  //    });
  if (isKeyTour.value){
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
    } else {
      marker.value = new AMap.Marker({
        map: map.value,
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
        position: [103.646233,30.989999],
        offset: new AMap.Pixel(13, 30),

      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    isKeyTour.value = false;
  }else {
    console.log("清除marker")
    closeInfoWindow()
    infoWindow.close()
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
  }

}
const policeForceDeployment = () => {
  //构建信息窗体中显示的内容
  let info = [];
  info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>地点名称</h4>");
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>在岗警力 68 在岗警车 5 备勤警力 23</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
  });
  let startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(25, 34),
    // 图标的取图地址
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    // 图标所用图片大小
    imageSize: new AMap.Size(135, 40),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(-9, -3)
  });
  //构建信息窗体中显示的内容
  // marker = new AMap.Marker({
  //      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
  //      position: [103.646554,30.989656],
  //      offset: new AMap.Pixel(-13, -30)
  //    });
  if (isKeyTour.value){
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
    } else {
      marker.value = new AMap.Marker({
        map: map.value,
        icon: startIcon,
        position: [103.646044,30.989495],
        offset: new AMap.Pixel(13, 30)
      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    isKeyTour.value = false;
  }else {

    console.log("清除marker")
    closeInfoWindow()
    infoWindow.close()
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
  }

}
const keyTouristChannels = () => {
  //构建信息窗体中显示的内容
  let info = [];
  info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>都江堰客运中心</h4>");
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>日累积人流量达到3000+\n" +
      "\n" +
      "xxxxxxxxxxxxxxxx</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
  });

     //构建信息窗体中显示的内容
   // marker = new AMap.Marker({
   //      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
   //      position: [103.646554,30.989656],
   //      offset: new AMap.Pixel(-13, -30)
   //    });
  if (isKeyTour.value){
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
    } else {
      marker.value = new AMap.Marker({
        map: map.value,
        position: [103.646554,30.989656],
        offset: new AMap.Pixel(13, 30)
      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    isKeyTour.value = false;
  }else {

    console.log("清除marker")
    closeInfoWindow()
    infoWindow.close()
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
  }

}
const accidentProneRoadSections = () => {
  //构建信息窗体中显示的内容
  let info = [];

  info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>新马路一段</h4>");
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>近三年发生交通事故XX起，其中造成人员伤亡xx起，XXXXXXXXXXXXXXXXXXXXX</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
   });
    if(isIdent.value){
      vectorLayer.value = new AMap.VectorLayer({
        zIndex: 100,
      });
      // 添加矢量图层到地图上
      map.value.add(vectorLayer.value);
      // 添加路段标注
      const path = [
        [103.646504,30.989656],
        [103.647669,30.989409]
      ];
      const polyline = new AMap.Polyline({
        path: path,
        borderWeight: 5,
        strokeColor: 'orange',
      });
      const markers = new AMap.Marker({
        icon:'',
        map: map.value,
        position: [103.635750,30.983912]
      });




      infoWindow.open(map.value,[103.646504,30.989656]);
      // polyline.setMap(map.value);

      // // 添加起点和终点标注
      // const startMarker = new AMap.Marker({
      //   position: path[0],
      //   map: map.value,
      //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      //   anchor: 'bottom-center',
      // });
      // const endMarker = new AMap.Marker({
      //   position: path[path.length - 1],
      //   map: map.value,
      //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      //   anchor: 'bottom-center',
      // });
      vectorLayer.value.add(polyline);
      // // 将标注点添加到数组中，用于后续操作（如点击事件）
      // markers.value = [startMarker, endMarker];
      isIdent.value = false
    }else {
      isIdent.value = true
      infoWindow.close()
      closeInfoWindow()
      vectorLayer.value.clear(); // 清除矢量图层上的所有图形
    }
}
const keyTransportationEnterprises = (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => {
  let endIcon= new AMap.Icon({
    size: new AMap.Size(25, 34),
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    imageSize: new AMap.Size(135, 40),
    imageOffset: new AMap.Pixel(-95, -3)
  })
  const marker = new AMap.Marker({
    icon:endIcon,
    map: map.value,
    position: [103.635750,30.983912]
  });
  console.log('重点运输企业')
  // 添加点击事件打开信息窗体
  // AMap.event.addListener(marker, 'click', () => {
  //   // 创建信息窗体实例
  //   const infoWindow = new AMap.InfoWindow({
  //     content: '<div style="width: 200px;">这里是自定义信息窗体内容</div>', // 信息窗体内容
  //     offset: new AMap.Pixel(16, -30)
  //   });
  //
  //   // 打开信息窗体
  //   infoWindow.open(map.value, [103.635750,30.983912]);
  // });
//   var marker = new AMap.Marker({
//     icon: "",
//     position: [103.635750,30.983912]
//   });
//   var marker1 = new AMap.Marker({
//     icon: "",
//     position: [103.635750,30.983412]
//   });
  map.value.add(marker);
  map.value.setFitView();
// // 删除已有Marker对象使用：
//   map.value.remove(marker)
// // 可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。
// // 多个点实例组成的数组
//   const markerList = [marker, marker1];
//   map.value.add(markerList);
// // 绑定Marker实例的事件
//
// // 绑定事件
  marker.on('click', clickHandler);

};
function closeInfoWindow() {
  map.value.clearInfoWindow();
}
 //构建自定义信息窗体
    function createInfoWindow(title, content) {
  var info = document.createElement("div");
  info.className = "custom-info input-card content-window-card";

  //可以通过下面的方式修改自定义窗体的宽高
  info.style.width = "400px";
  // 定义顶部标题
  var top = document.createElement("div");
  var titleD = document.createElement("div");
  var closeX = document.createElement("img");
  top.className = "info-top";
  titleD.innerHTML = title;
  closeX.src = "https://webapi.amap.com/images/close2.gif";
  closeX.onclick = closeInfoWindow;

  top.appendChild(titleD);
  top.appendChild(closeX);
  info.appendChild(top);

  // 定义中部内容
  var middle = document.createElement("div");
  middle.className = "info-middle";
  middle.style.backgroundColor = 'white';
  middle.innerHTML = content;
  info.appendChild(middle);

  // 定义底部内容
  var bottom = document.createElement("div");
  bottom.className = "info-bottom";
  bottom.style.position = 'relative';
  bottom.style.top = '0px';
  bottom.style.margin = '0 auto';
  var sharp = document.createElement("img");
  sharp.src = "https://webapi.amap.com/images/sharp.png";
  bottom.appendChild(sharp);
  info.appendChild(bottom);
  return info;
}
const clickHandler = (e)=> {
  console.log(e)
  // alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
    // 创建信息窗体实例
  var title = '正华物流',
      content = [];
  content.push("正华物流主要从事XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>");
    const infoWindow = new AMap.InfoWindow({
      content: createInfoWindow(title, content.join("<br/>")), // 信息窗体内容
      offset: new AMap.Pixel(10, -280)
    });

    // 打开信息窗体
    infoWindow.open(map.value, [103.635750,30.983912]);
};
const btnlk= ()=>{
  console.log('实时路况图层',isVisible.value)

  if (isVisible.value){
    trafficLayer.value.show();
    isVisible.value = false
  }else{
    // map.value.removePlugin('map-box');
    console.log('隐藏实时路况图层',isVisible.value)
    // map.value.removePlugin('AMap.TruckDriving');
    trafficLayer.value.hide();
    isVisible.value = true
  }
}
function initMap(){
  AMapLoader.load({
    key: 'f7251c9df6162e94e699f1720f7932c4',  //设置您的key
    version: "2.0",
    plugins: ['AMap.ToolBar','AMap.Driving'],
    AMapUI: {
      version: "1.1",
      plugins: [],

    },
    Loca:{
      version: "2.0.0"
    },
  }).then((AMap)=>{
    // console.log(AMap);
    AMapObj = AMap;
    map.value = new AMap.Map("map-box",{
      viewMode:"3D",
      zoom:12,
      zooms:[2,22],
      center: [103.635750,30.983912],
      mapStyle: "amap://styles/grey",
    });
    // 实例化TileLayer.Traffic实例
    trafficLayer.value = new AMap.TileLayer.Traffic({
      zIndex: 10, // 设置路况图层的zIndex
      showTraffic:true
    });

    // 将实时路况图层添加到地图上
    trafficLayer.value.setMap(map.value);



    map.value.on('click', onMapClick);
    AMap.plugin(
        ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
          'AMap.Geocoder','AMap.AutoComplete'],
        () => {
          // 缩放条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 定位
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：5s
            position: 'RT', // 定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
          });
          geocoder = new AMap.Geocoder({
            city: '全国',
          });
          map.value.addControl(geolocation);
          map.value.addControl(toolbar);
          map.value.addControl(scale);
          placeSearch = new AMap.PlaceSearch({
            city: '全国',
            pageSize: 10, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: false, // 是否强制限制在设置的城市内搜索
            autoFitView: true,
          });
        });
    if(props.form){
      keyword.value=props.form.adress
      handleSearch(props.form.adress)
      let e={
        lnglat:{
          lng:props.form.longitude,
          lat: props.form.latitude
        }
      }
      onMapClick(e)
    }
  }).catch(e=>{
    console.log(e);
  })
}

// 搜索地图
function handleSearch(str) {
  placeSearch.search(str, (status, result) => {
    if (result && typeof result === 'object' && result.poiList) {
      const list = result.poiList.pois;
      list.forEach(item => {
        item.value = item.name;
        item.label = item.name;
      });
      data.value = list
    }
  });
}
// 点击地图
function onMapClick(e) {
  coord.value = e.lnglat.lng + ',' + e.lnglat.lat
  geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result为对应的地理位置详细信息
      keyword.value = result.regeocode.formattedAddress
      addresstext.value = result.regeocode.formattedAddress
      adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
    }
  })
  drawMarker(e.lnglat)
}
function onMapadcode (e){
  geocoder.getAddress([e.location.lng, e.location.lat], function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result为对应的地理位置详细信息
      adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
    }
  })
}
// 点击搜索项
function handleSelect(item) {
  drawMarker(item.location)
  onMapadcode(item)
  if (item.location != null) {
    coord.value = item.location.lng + ',' + item.location.lat
    keyword.value = item.name
    addresstext.value = item.address

  }
}
// 绘制地点marker
function drawMarker(location) {
  let marker
  if (location == null) return
  let longitude = location.lng, latitude = location.lat
  if (marker) {
    marker.setMap(null);
  }
  marker = new AMapObj.Marker({
    position: new AMapObj.LngLat(longitude, latitude),
    anchor: 'bottom-center',
  });
  marker.on('click', () => {
    coord.value = location;
  })
  map.value.add(marker);
  map.value.setZoomAndCenter(16, [longitude, latitude]);
}
const emit = defineEmits(['btnAddress','changeDt'])
function btnsubmit(){
  emit('btnAddress',coord.value,addresstext.value,adcode.value)
}
// initMap();
</script>
<style>
html, body, #container {
  height: 100%;
  width: 100%;
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  display: none;
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  //font-size: 11px;
}

.info-middle img {
  //float: left;
  height: 100%;
  width: 100%;
  margin-right: 6px;
}
</style>
<style lang="scss" scoped>

.home{
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  .info-div{
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    //background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;
    .item-tb-img{
      width: 20px;
      height: 20px;
    }
    .info-div-p{
      flex: 1;
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .info-box {
    position: absolute;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  .item-tb{
      cursor: pointer;
    margin-top: 20px;
    .item-tb-img{
      width: 65px;
    }
    .item-tb-p{
      line-height:35px;
      //background: #00adb5;
      color:#fff;
      text-align: center;
      text-shadow:
          0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
    }
  }
}
.ul{
  margin-top: 10px;
  height: 60%;
  overflow-y: scroll;
  .li{
    padding: 5px 10px;
    background: #FFFFFF;
    margin-bottom: 10px;
    min-height: 60px;
    .d-flex{
      background: #FFFFFF;
      color: #1f1f1f;
      display: flex;
      flex-direction: column;
    }
  }
}

#map-box{
  height: calc(100% - 30px);
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.btn{
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style scoped >
:deep() .amap-logo {
  display: none !important;
}
:deep() .amap-copyright {
  display: none !important;
}
</style>

 src/views/daoAnOffice/chartgd.vue

@@ -6,10 +6,6 @@
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
      <div @click="toggleTrafic" class="item-tb">
        <p class="item-tb-p">地图切换</p>
        <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
      </div>

    </div>
    <div class="info-box">
@@ -98,7 +94,7 @@
  </div>
</template>

<script lang="ts" setup>
<script setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {Pointer} from "@element-plus/icons-vue";
@@ -129,9 +125,6 @@

}

const toggleTrafic = () => {
  emit('changeDt')
};
const fencingConstruction = () => {
  //构建信息窗体中显示的内容
  let info = [];
@@ -593,8 +586,10 @@
}
// initMap();
</script>
<style>
html, body, #container {
<style scoped>
html,
body,
#container {
  height: 100%;
  width: 100%;
}
@@ -664,17 +659,13 @@

span {
  margin-left: 5px;
  //font-size: 11px;
}

.info-middle img {
  //float: left;
  height: 100%;
  width: 100%;
  margin-right: 6px;
}
</style>
<style lang="scss" scoped>

.home{
  height: 100%;
@@ -682,22 +673,25 @@
  padding: 0px;
  margin: 0px;
  position: relative;

  .info-div{
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    //background-color: #4E2749;
    background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;

    .item-tb-img{
      width: 20px;
      height: 20px;
    }

    .info-div-p{
      flex: 1;
      margin-left: 5px;
@@ -706,30 +700,34 @@
      justify-content: space-between;
    }
  }

  .info-box {
    position: absolute;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    height: 100%;
    background-color: #1f1f1f;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .item-tb{
      cursor: pointer;
    margin-top: 20px;

    .item-tb-img{
      width: 65px;
    }

    .item-tb-p{
      line-height:35px;
      //background: #00adb5;
      background: #00adb5;
      color:#fff;
      text-align: center;
      text-shadow:
@@ -737,15 +735,18 @@
    }
  }
}

.ul{
  margin-top: 10px;
  height: 60%;
  overflow-y: scroll;

  .li{
    padding: 5px 10px;
    background: #FFFFFF;
    margin-bottom: 10px;
    min-height: 60px;

    .d-flex{
      background: #FFFFFF;
      color: #1f1f1f;
@@ -761,6 +762,7 @@
  padding: 0px;
  margin: 0px;
}

.btn{
  padding: 10px;
  display: flex;
@@ -773,6 +775,7 @@
:deep() .amap-logo {
  display: none !important;
}

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

 src/views/daoAnOffice/index.vue

@@ -1,10 +1,9 @@
<script setup lang="ts">
<script setup>
import ItemWrap from "@/components/item-wrap";
// import MenuHeader from "@/components/menu-header.vue";
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightTop1 from "./right-top2.vue";
@@ -18,6 +17,13 @@
import Danger from './right/danger/index.vue';
import Publicize from './right/publicize/index.vue';
import Chartgd from "@/views/index/chartgd.vue";

// 居中map
import CenterMap from "./center-map.vue";

// 控制地图显示
import {mapState} from '@/stores/map.js';

import {ref} from "vue";

const config = {
@@ -77,9 +83,11 @@
  title: '外协溯源被查获数',
  length: 9,
}]
const dtFig=ref(0)
const handlechan=()=>{



const mapChange = () => {
  mapState.value = !mapState.value;
}
</script>

@@ -106,8 +114,16 @@

    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" title="设备分布图" />

      <!-- echart地图 -->
      <CenterMap class="contetn_center_top" v-show="mapState" />

      <div class="map-change-button" @click="mapChange">
        <div class="button-title">地图切换</div>
        <div class="button-img">
          <img src="@/assets/img/dtqh.png" alt="">
        </div>
      </div>
    </div>

    <!-- 右边区域 -->
@@ -250,12 +266,25 @@
</template>

<style scoped lang="scss">
.map-change-button {
  width: 94px;
  position: absolute;
  bottom: 120px;
  right: 0;
  font-size: 16px;
  color: #FFFFFF;
  z-index: 99;
  text-align: center;
  cursor: pointer;
}

.gddt{
  position: absolute;
  z-index: 0;
  width: 3840px;
  height: 1080px;
}

.index-box {
  width: 100%;
  display: flex;
@@ -281,6 +310,7 @@
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;

  .contetn_center-bottom {
    height: 315px;
@@ -384,5 +414,4 @@

.right_wrapper_content {
  width: 617px;
}
</style>
}</style>