tcZz-big/src/views/privateOrder/ecosphere/components/componentmapbox copy.vue

<template>
  <div class="map-container">
    <div id="container"></div>
    <el-dialog
      v-if="isShowDialog"
      title=""
      class="screen-dialog"
      :visible.sync="isShowDialog"
      width="650px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div class="top_title">网络举报事件</div>
      <div class="dialog_ctn">
        <el-row>
          <el-col :span="24">
            <div class="col_title">被举报对象</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_ctn">{{ currentMsg.jbdx }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="col_title">苏州编号</div>
          </el-col>
          <el-col :span="8">
            <div class="col_title">举报时间</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="col_ctn_little">{{ currentMsg.szbh }}</div>
          </el-col>
          <el-col :span="8">
            <div class="col_ctn_little">{{ currentMsg.jbsj }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_title">地址</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_ctn_little">
              {{ currentMsg.dz }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_title">举报内容</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- <div class="col_ctn_little" v-html='currentMsg.jbnr'></div> -->
            <div class="col_ctn_little">{{ currentMsg.jbnr }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="dialogClose" @click="isShowDialog = false">关闭</div>
    </el-dialog>
  </div>
</template>

<script>
// import mapboxgl from 'mapbox-gl'
// import 'mapbox-gl/dist/mapbox-gl.css'
// import VueAMap from '@vuemap/vue-amap';
// import '@vuemap/vue-amap/dist/style.css'
import location from '@/assets/ecosphere/point.png'
// import { reportList, reportInfo } from '@/api/zongzhi/manage'
import {
  listJbmap,
  getJbmap,
} from "@/api/netManage/index.js";

export default {
  data() {
    // VueAMap.initAMapApiLoader({
    //   key: 'b3c7a7ce466721c3be1d4ea539f82421',              // 高德key
    //   securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8',   // 安全密钥
    // });
    return {
      isShowDialog: false,
      center: [121.136909, 31.463778],
      zoom: 14.5,
      zooms:[14,18],
      // markerOffset: [-35,-123],
      // markers: [],
      // 展示的内容
      currentMsg: {
        jbdx: '电子科技有限公司',
        szbh: 'SZ2023',
        jbsj: '2023-07-31',
        dz: '太仓人民政府',
        jbnr: '偷电'
      },
      map: null,
      pointList: [
        { id: 1, lng: 121.136909, lat: 31.463778, title: '太仓人民政府' },
        { id: 2, lng: 121.086958, lat: 31.460883, title: '苏州吉闽物流有限公司' },
        { id: 3, lng: 121.05452, lat: 31.515175, title: '太仓星兴亮机械设备有限公司' },
        { id: 4, lng: 121.127801, lat: 31.472566, title: '兴和电子有限公司' },
        { id: 5, lng: 121.142345, lat: 31.477655, title: '太仓裕盛体育用品有限公司' }
      ],
      layers:{
        layer:null,
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      var layer = new AMap.createDefaultLayer({
        zooms:[14,18],    //可见级别
        visible:true,    //是否可见
        opacity:1,       //透明度
        zIndex:10,         //叠加层级
        // skyColor: '#032f58',
        mapStyle: 'amap://styles/d02b66b0a7f190d5a1556a3f59c86518',
      })
      var map = new AMap.Map('container',{
        zoom: 16,  //设置地图显示的缩放级别
        zooms: this.zooms,
        center: this.center,//设置地图中心点坐标
        mapStyle: 'amap://styles/d02b66b0a7f190d5a1556a3f59c86518',  //设置地图的显示样式
        // skyColor: '#032f58',
        layers: [
          // 高德默认标准图层
          // new AMap.TileLayer.Satellite(),
          layer,
          // 楼块图层
          new AMap.Buildings({
            zooms: [14, 18],
            zIndex: 11,
            wallColor: 'rgba(24,79,129,1)',
            roofColor: 'rgba(24,79,129,1)',
            // heightFactor: 2//2倍于默认高度，3D下有效
          })
        ],
        resizeEnable: true,
        rotateEnable:false,
        pitchEnable:false,
        pitch: 55,
        rotation: 25,
        viewMode: '3D',  //设置地图模式
        lang:'zh_cn',  //设置地图语言类型
        buildingAnimation:true,
        // expandZoomRange:true,
      });
      this.layers.layer = new AMap.OverlayGroup();            // 点位
      map.add(this.layers.layer);
      // console.log(map.getLayers());
      map.getLayers().forEach((m)=>{
        if(m.CLASS_NAME == 'AMap.SkyLayer') {
          map.remove(m)
        }
      })
      this.map = map;
      this.init(this.map);
    })
    // let data = await reportList();
    // listJbmap({isStatus:1,pageNum:1,pageSize:50}).then(data=>{
    //   let arr = []
    //   data.rows.map((item)=>{
    //     let obj = {}
    //     obj.id = item.id
    //     obj.lng = item.longitude
    //     obj.lat = item.latitude
    //     obj.title = item.jbObj
    //     arr.push(obj)
    //   })
    //   this.pointList = arr
    //   const _this = this
    //   mapboxgl.accessToken = 'pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw'
    //   const map = new mapboxgl.Map({
    //     container: 'map', // 地图容器的id或元素
    //     style: 'mapbox://styles/sharealex/cl3ntpire000314ookb5o81oo', // 地图样式
    //     center: [121.136909, 31.463778], // 中心点经纬度
    //     zoom: 14.5,
    //     pitch: 50
    //   })

    //   // 地图加载完毕
    //   map.on('load', function() {
    //     // 地图点位
    //     _this.pointList.forEach(item => {
    //       const el = document.createElement('div')
    //       el.className = 'map-marker'
    //       el.innerHTML = `
    //       <img  class="marker-img" src= "${require('@/assets/ecosphere/point.png')}" />
    //       <div  class="marker-text">${item.title}</div>
    //   `
    //       new mapboxgl.Marker(el)
    //         .setLngLat([item.lng, item.lat])
    //         .addTo(map)
    //       el.addEventListener('click', () => {
    //         // 点击事件里去修改内容
    //         // reportInfo(item.id).then(res=>{
    //         getJbmap(item.id).then(res=>{
    //           let { jbObj, number, jbTime, address, content } = res.data
    //           _this.currentMsg.jbdx = jbObj
    //           _this.currentMsg.szbh = number
    //           _this.currentMsg.jbsj = jbTime
    //           _this.currentMsg.dz = address
    //           _this.currentMsg.jbnr = content
    //           _this.isShowDialog = true
    //         })
    //       })
    //     })
    //     map.addLayer({
    //       id: 'lou-extrusion',
    //       type: 'fill-extrusion',
    //       source: {
    //         type: 'geojson',
    //         data: require('@/utils/mapGeojson/1.json')
    //       },
    //       paint: {
    //         // 设置填充颜色
    //         'fill-extrusion-color': '#2998F8',
    //         // 从属性中获得高度，这里用的是height字段
    //         'fill-extrusion-height': ['get', 'height'],
    //         'fill-extrusion-base': 0,
    //         // 透明度设置
    //         'fill-extrusion-opacity': 0.7
    //       }
    //     })
    //   })
    //   this.map = map
    // })
  },
  methods: {
    init(map){
      
      listJbmap({isStatus:1,pageNum:1,pageSize:50}).then(data=>{
        // let arr = [];
        map.clearMap();
        data.rows.map((item)=>{
          // let obj = {}
          // obj.id = item.id;
          // obj.imgSrc = location;
          // obj.lng = item.longitude
          // obj.lat = item.latitude
          // obj.title = item.jbObj
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            // <span style="color: #fff; font-size: 25px;width:${item.jbObj.length * 26}px">${item.jbObj}</span>
            content: `<div class="amap-markers" data-projectid="${item.id}">
                <img src="${location}" />
                <div style="color: #fff; font-size: 25px;width:${item.jbObj.length * 26}px">${item.jbObj}</div>
              </div>`,
            offset:new AMap.Pixel(-(item.jbObj.length * 10), -30),
          });
          marker.on('click', (e)=>{
            getJbmap(item.id).then(res=>{
              let { jbObj, number, jbTime, address, content } = res.data
              this.currentMsg.jbdx = jbObj
              this.currentMsg.szbh = number
              this.currentMsg.jbsj = jbTime
              this.currentMsg.dz = address
              this.currentMsg.jbnr = content
              this.isShowDialog = true
            })
          })
          map.add(marker);
          // arr.push(obj)
        })
        // this.pointList = arr;
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.map-container{
  width: 100%;
  height: $ScreenHeight;
  #container{
    width: 100%;
    height: 100%;
    background-color: rgb(26, 61, 106,0.3);
  }
}

.screen-dialog {
  left: 30%;
  right: 30%;
  top: 10%;
  bottom: 20%;
  z-index: 9999;
  ::v-deep .el-dialog__header {
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-dialog {
    background: url('~@/assets/dialog/wlglDialog/bg.png') no-repeat 100% 100%;
    //width: 1260px;
    height: 590px;
    //padding-top:20px;
    background-size: cover;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 1;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  .top_title {
    font-family: SourceHanSansCN-Bold;
    font-size: 28px;
    letter-spacing: 1px;
    color: #ffffff;
    margin-top: -35px;
    margin-left: 20px;
  }
  .dialog_ctn {
    padding: 60px 0 0 60px;
  }
  .col_title {
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    color: #1dd1fe;
  }
  .col_ctn {
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #ffe90c;
    margin: 13px 0;
  }
  .col_ctn_little {
    font-family: DIN-Medium;
    font-size: 28px;
    color: #ffffff;
    margin: 13px 0;
  }
  .dialogClose {
    text-align: center;
    width: 160px;
    height: 50px;
    position: absolute;
    bottom: 25px;
    left: 261px;
    background: url('~@/assets/dialog/btn-bg.png') no-repeat 100% 100%;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 50px;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
  }
  .dialogClose:hover {
    background: url('~@/assets/dialog/btn-bg-act.png') no-repeat 100% 100%;
  }
}
.dialog-title {
  text-align: center;
  width: 756px;
  margin: 0 auto;
  font-family: SourceHanSansCN-Bold;
  font-size: 36px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 0;
  color: #ffe850;
}
.dialog-explain {
  margin-top: 39px;
  height: 125px;
  background: url('~@/assets/dialog/信息-bg.png') no-repeat 100% 100%;
}
.dialog-content {
  width: 1073px;
  max-height: 500px;
  margin: 20px auto;
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 50px;
  letter-spacing: 2px;
  color: #ffffff;
}
</style>