Newer
Older
KaiFengPC / src / components / Map / index.vue
@zhangdeliang zhangdeliang on 23 May 48 KB 初始化项目
<template>
  <div id="map">
    <div class="tool-causure flex flex-v" v-show="isShowTool">
      <el-radio-group v-model="currentTool" @change="toolsClick">
        <el-radio :label="item.sectionType" v-for="item in mapTools" :key="item.sectionType">{{ item.name }}</el-radio>
      </el-radio-group>
      <div class="flex flex-r flex-justcontent-end">
        <el-button size="small" round @click="clear">清除</el-button>
        <!-- <el-button size="small" type="primary" round @click="closeMap"
          >确定</el-button
        > -->
      </div>
    </div>
    <div id="nf-address-search-input" v-show="isShowSearch">
      <el-input clearable id="pickerInput" placeholder="请输入位置名称" v-model="inputText" :prefix-icon="Search" style="width: 300px" />
    </div>
  </div>
</template>

<script setup>
import { findDictObj } from '@/utils/ruoyi.js';
import request from '@/utils/request';
import { Search } from '@element-plus/icons-vue';
const emit = defineEmits(['endDraw', 'clickMap', 'getPlace']);
const props = defineProps({
  // 地图中心点
  mapCenter: {
    type: Array,
    default: [113.95143821765771, 30.92073232530057],
  },
  //是否展示工具
  isShowTool: {
    type: Boolean,
    default: true,
  },
  //是否开启绘制
  isOpenDeaw: {
    type: Boolean,
    default: true,
  },
  //是否展示的搜索
  isShowSearch: {
    type: Boolean,
    default: false,
  },
  //用于选择点,返回经纬度,地址
  isSelectAddress: {
    type: Boolean,
    default: false,
  },
  //点、线、面类型
  sectionType: {
    type: Object,
    default: {},
  },
  //是否可编辑
  isEdit: {
    type: Boolean,
    default: false,
  },

  //缓冲区范围
  bufferScope: {
    type: [Number, String],
    default: '',
  },
  //地图id
  mapId: {
    type: String,
    default: 'map',
  },
  count: {
    type: Number,
    default: 0,
  },
  //是否加载天地图
  isReloadTDT: {
    type: Boolean,
    default: true,
  },
  //添加默认点位
  previousPoint: {
    type: String,
    default: '',
  },
  //默认点位名称
  previousPointName: {
    type: String,
    default: '',
  },

  //   //弹框的状态
  //   refresh: {
  //     type: Number,
  //     default: 1,
  //   },
});

const { proxy } = getCurrentInstance();
const section_type = proxy.fixDict['sectionType'];
const currentTool = ref('');
const inputText = ref(''); //搜索文字
const layerIds = ref([]); //当前图层Ids
const currentMethod = ref(''); //当前方法
const pointCoordinates = ref([]);
const pointPolygons = ref([]);
const previousPoint = ref('');
const previousPointName = ref('');
const state = reactive({
  mapConfig: {
    container: 'map',
    options: {
      terrain: false,
      baseMap: [],
      skyBox: NewFiberMap.Enum.SkyBox.BLUE,
    },
    center: {
      //   lng: 114.39812687057503,
      //   lat: 30.479710421156746,
      //   zoom: 13983.54259523272,
      //   heading: 2.5780579881600394,
      //   pitch: -50.274625625696856,
      //     roll: 0.03329294165693926,

      lng: props.mapCenter[0],
      lat: props.mapCenter[1],
      heading: 2.281299097855777,
      zoom: 5958.12942752382,
      pitch: -87.2508969308367,
      roll: 0.005453465256790101,
    },
  },
  mapTools: [
    { key: 0, name: '画点', sectionType: 'point' },
    { key: 1, name: '画线', sectionType: 'line' },
    { key: 2, name: '画面', sectionType: 'area' },
    // { key: 3, name: "线缓冲区" },
    //{ key: 4, name: "清除" },
  ],
});
const { mapConfig, mapTools } = toRefs(state);

watch(
  () => props.sectionType,
  (v1, v2) => {
    currentTool.value = props.sectionType;
  }
);
watch(
  () => props.inputText,
  (v1, v2) => {
    inputText.value = props.inputText;
  }
);
watch(
  () => [props.previousPoint, props.previousPointName],
  (v1, v2) => {
    props.previousPoint = v1[0];
    props.previousPointName = v1[1];
    if (props.previousPoint !== '' && props.previousPointName !== '') {
      let addPreviousPoint = `POINT(${props.previousPoint.split(',').join(' ')})`;
      newfiberMap.geojsonToMap(
        NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
          {
            id: 'addressSearch',
            name: props.previousPointName,
            geometrys: addPreviousPoint,
            type: NewFiberMap.Enum.VectorType.ICON,
            style: {
              url: '/src/assets/images/gisMap/marker.png',
              width: 50,
              height: 50,
            },
            labelOptions: {
              font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
              color: 'rgb(255,255,255,1)',
              pixelOffset: [0, -38],
              backgroundColor: 'rgba(64,158,255,1)',
              showBackground: true,
              distanceDisplayCondition: [Number.MIN_VALUE, 55000],
            },
          },
        ])
      );
      newfiberMap.setView({
        lng: Number(props.previousPoint.split(',')[0]),
        lat: Number(props.previousPoint.split(',')[1]),
        heading: 2.281299097855777,
        zoom: 5958.12942752382,
        pitch: -87.2508969308367,
        roll: 0.005453465256790101,
      });
    }
  }
);
function initMap() {
  console.log('初始化initMap');
  const { container, options, center } = mapConfig.value;
  window.newfiberMap = new NewFiberMap(container, options);
  //鼠标经过事件
  newfiberMap.registerMouseMove((xy, position, feature) => {
    newfiberMap.getMap().container.style.cursor = feature ? 'pointer' : '';
  });
  //添加默认点位
  setTimeout(() => {
    if (props.previousPoint !== '' && props.previousPointName !== '') {
      let addPreviousPoint = `POINT(${props.previousPoint.split(',').join(' ')})`;
      newfiberMap.geojsonToMap(
        NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
          {
            id: 'addressSearch',
            name: props.previousPointName,
            geometrys: addPreviousPoint,
            type: NewFiberMap.Enum.VectorType.ICON,
            style: {
              url: '/src/assets/images/gisMap/marker.png',
              width: 50,
              height: 50,
            },
            labelOptions: {
              font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
              color: 'rgb(255,255,255,1)',
              pixelOffset: [0, -38],
              backgroundColor: 'rgba(64,158,255,1)',
              showBackground: true,
              distanceDisplayCondition: [Number.MIN_VALUE, 55000],
            },
          },
        ])
      );
      newfiberMap.setView({
        lng: Number(props.previousPoint.split(',')[0]),
        lat: Number(props.previousPoint.split(',')[1]),
        heading: 2.281299097855777,
        zoom: 5958.12942752382,
        pitch: -87.2508969308367,
        roll: 0.005453465256790101,
      });
    } else {
      newfiberMap.setView(center);
    }
  }, 2000);

  //地图点击
  if (props.isOpenDeaw) {
    newfiberMap.registerLeftClickEvt((xy, position, feature) => {
      // console.log('feature', feature);
      //用于底图选点---选地址
      if (props.isSelectAddress && position.length) {
        newfiberMap.removeByIds(['addressSearch']);
        getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(position[0], position[1])).then(res => {
          // console.log(res);
          inputText.value = res.formatted_address;
          newfiberMap.geojsonToMap(
            NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
              {
                id: 'addressSearch',
                name: res.formatted_address,
                geometrys: `POINT(${position.join(' ')})`,
                type: NewFiberMap.Enum.VectorType.ICON,
                style: {
                  url: '/src/assets/images/gisMap/marker.png',
                  width: 50,
                  height: 50,
                },
                labelOptions: {
                  font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
                  color: 'rgb(255,255,255,1)',
                  pixelOffset: [0, -38],
                  backgroundColor: 'rgba(64,158,255,1)',
                  showBackground: true,
                  distanceDisplayCondition: [Number.MIN_VALUE, 55000],
                },
              },
            ])
          );
          emit('getPlace', {
            caseAddress: res.formatted_address,
            lonLat: position,
          });
        });
      }
      if (feature) {
        //开启编辑
        //   props.isEdit && newfiberMap.openEntityEdit();
        emit('clickMap', feature, position);
      } else {
        //结束编辑,编辑完成后返回最后一次编辑物体的坐标点
        //   let coordinates = props.isEdit && newfiberMap.closeEntityEdit();
      }
    });
  }
  if (props.isReloadTDT) {
    newfiberMap.setBaseMapByEnum(
      [
        // NewFiberMap.Enum.BaseMap.TDT_VECTOR_LABEL,
        // NewFiberMap.Enum.BaseMap.TDT_VECTOR,
        //NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2,
        NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE,
      ],
      {},
      {}
    );
  } else {
    newfiberMap.setBaseMapByEnum(
      [NewFiberMap.Enum.BaseMap.MAPBOX_STYLE_VECTOR],

      [],

      {
        style: {
          background: {
            id: 'background',

            paint: {
              'background-color': 'rgb(243,243,243)',
            },
          },

          'road-street': {
            id: 'road-street',

            layout: {
              'line-join': 'round',
            },

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12.5,

                    0.5,
                  ],

                  [
                    14,

                    7,
                  ],

                  [
                    16,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(255,236,186,1)',
            },
          },

          'road-secondary-tertiary': {
            id: 'road-secondary-tertiary',

            paint: {
              'line-color': 'rgba(142,193,255,0.8)',

              'line-width': {
                base: 1.5,

                stops: [
                  [
                    8.5,

                    1,
                  ],

                  [
                    10,

                    2,
                  ],

                  [
                    16,

                    20,
                  ],

                  [
                    17,

                    25,
                  ],

                  [
                    18,

                    37,
                  ],
                ],
              },
            },
          },

          'bridge-trunk-2-case': {
            id: 'bridge-trunk-2-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          'bridge-trunk-2': {
            id: 'bridge-trunk-2',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          'road-secondary-tertiary': {
            id: 'road-secondary-tertiary',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    8.5,

                    0.5,
                  ],

                  [
                    10,

                    0.75,
                  ],

                  [
                    16,

                    14.55,
                  ],

                  [
                    17,

                    21.53,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-opacity': {
                base: 1.2,

                stops: [
                  [
                    5,

                    0,
                  ],

                  [
                    5.5,

                    1,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          'bridge-motorway-2-case': {
            id: 'bridge-motorway-2-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          'bridge-motorway-2': {
            id: 'bridge-motorway-2',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          'road-trunk': {
            id: 'road-trunk',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,0.8)',
            },
          },

          landcover_crop: {
            id: 'landcover_crop',

            paint: {
              'fill-opacity': {
                base: 1.5,

                stops: [
                  [
                    2,

                    0.3,
                  ],

                  [
                    7,

                    0,
                  ],
                ],
              },

              'fill-color': 'rgba(142,193,255,1)',
            },
          },

          'road-motorway': {
            id: 'road-motorway',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgb(112,173,255)',

              'line-opacity': 1,
            },
          },

          'bridge-trunk_link': {
            id: 'bridge-trunk_link',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',
            },
          },

          'bridge-trunk_link-case': {
            id: 'bridge-trunk_link-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-color': 'rgba(0,0,0,.5)',

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    12,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-opacity': {
                base: 1,

                stops: [
                  [
                    10.99,

                    0,
                  ],

                  [
                    11,

                    1,
                  ],
                ],
              },
            },
          },

          'bridge-trunk_link-2': {
            id: 'bridge-trunk_link-2',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',
            },
          },

          'bridge-trunk_link-2-case': {
            id: 'bridge-trunk_link-2-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-color': 'rgba(0,0,0,.5)',

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    12,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-opacity': {
                base: 1,

                stops: [
                  [
                    10.99,

                    0,
                  ],

                  [
                    11,

                    1,
                  ],
                ],
              },
            },
          },

          'bridge-trunk-case': {
            id: 'bridge-trunk-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',
            },
          },

          'bridge-trunk': {
            id: 'bridge-trunk',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',
            },
          },

          'road-primary': {
            id: 'road-primary',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-opacity': 1,
            },
          },

          'road-street': {
            id: 'road-street',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12.5,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-opacity': {
                base: 1,

                stops: [
                  [
                    11,

                    0,
                  ],

                  [
                    11.25,

                    1,
                  ],
                ],
              },
            },
          },

          'bridge-primary-case': {
            id: 'bridge-primary-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-translate': [
                0,

                0,
              ],
            },
          },

          'bridge-primary': {
            id: 'bridge-primary',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-opacity': 1,
            },
          },

          'tunnel-trunk-case': {
            id: 'tunnel-trunk-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-dasharray': [
                3,

                3,
              ],

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-opacity': 1,
            },
          },

          'tunnel-trunk': {
            id: 'tunnel-trunk',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(142,193,255,1)',

              'line-opacity': 1,
            },
          },

          park: {
            id: 'park',

            paint: {
              'fill-color': 'rgba(200,225,255,1)',

              'fill-opacity': {
                base: 1,

                stops: [
                  [
                    5,

                    0,
                  ],

                  [
                    6,

                    1,
                  ],
                ],
              },
            },
          },

          'road-link': {
            id: 'road-link',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12.5,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(200,225,255,1)',
            },
          },

          'tunnel-primary-case': {
            id: 'tunnel-primary-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-dasharray': [
                3,

                3,
              ],

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(200,225,255,1)',

              'line-opacity': 1,
            },
          },

          'tunnel-primary': {
            id: 'tunnel-primary',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    5,

                    0.75,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(200,225,255,1)',

              'line-blur': 0,

              'line-dasharray': [
                1,

                0,
              ],

              'line-opacity': 1,
            },
          },

          building: {
            id: 'building',

            paint: {
              'fill-color': 'rgba(205,235,255,1)',

              'fill-opacity': {
                base: 1,

                stops: [
                  [
                    15.5,

                    0,
                  ],

                  [
                    16,

                    1,
                  ],
                ],
              },
            },
          },

          school: {
            id: 'school',

            paint: {
              'fill-color': 'rgba(205,235,255,1)',
            },
          },

          water: {
            id: 'water',

            paint: {
              'fill-color': 'rgba(84,175,235,1)',
            },
          },

          'water-shadow': {
            id: 'water-shadow',

            paint: {
              'fill-color': 'rgba(101,167,252,1)',

              'fill-translate': {
                base: 1,

                stops: [
                  [
                    7,

                    [
                      0,

                      0,
                    ],
                  ],

                  [
                    16,

                    [
                      -1,

                      -1,
                    ],
                  ],
                ],
              },

              'fill-translate-anchor': 'viewport',
            },
          },

          sand: {
            id: 'sand',

            paint: {
              'fill-color': 'rgba(101,167,252,1)',
            },
          },

          'waterway-river-canal': {
            id: 'waterway-river-canal',

            paint: {
              'line-color': 'rgb(158,199,245)',

              'line-opacity': {
                base: 1,

                stops: [
                  [
                    8,

                    0,
                  ],

                  [
                    8.5,

                    1,
                  ],
                ],
              },

              'line-width': {
                base: 1,

                stops: [
                  [
                    8.5,

                    0.1,
                  ],

                  [
                    20,

                    8,
                  ],
                ],
              },
            },
          },

          'bridge-secondary-tertiary-case': {
            id: 'bridge-secondary-tertiary-case',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    10,

                    1,
                  ],

                  [
                    16,

                    2,
                  ],
                ],
              },

              'line-color': 'rgba(101,167,252,1)',

              'line-gap-width': {
                base: 1.5,

                stops: [
                  [
                    8.5,

                    0.5,
                  ],

                  [
                    10,

                    0.75,
                  ],

                  [
                    18,

                    26,
                  ],
                ],
              },

              'line-translate': [
                0,

                0,
              ],
            },
          },

          'bridge-secondary-tertiary': {
            id: 'bridge-secondary-tertiary',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    8.5,

                    0.5,
                  ],

                  [
                    10,

                    0.75,
                  ],

                  [
                    16,

                    14.55,
                  ],

                  [
                    17,

                    21.53,
                  ],

                  [
                    18,

                    32,
                  ],
                ],
              },

              'line-color': 'rgba(101,167,252,1)',

              'line-opacity': {
                base: 1.2,

                stops: [
                  [
                    5,

                    0,
                  ],

                  [
                    5.5,

                    1,
                  ],
                ],
              },
            },
          },

          'road-trunk_link': {
            id: 'road-trunk_link',

            paint: {
              'line-width': {
                base: 1.5,

                stops: [
                  [
                    12,

                    0.5,
                  ],

                  [
                    14,

                    2,
                  ],

                  [
                    18,

                    18,
                  ],
                ],
              },

              'line-color': 'rgba(101,167,252,1)',

              'line-opacity': 1,
            },
          },

          hospital: {
            id: 'hospital',

            paint: {
              'fill-color': 'rgba(205,235,255,1)',
            },
          },

          pitch: {
            id: 'pitch',

            paint: {
              'fill-color': 'rgb(134,199,243)',
            },
          },

          parking: {
            id: 'parking',

            paint: {
              'fill-color': 'rgb(134,199,243)',
            },
          },

          'aeroway-polygon': {
            id: 'aeroway-polygon',

            paint: {
              'fill-color': 'rgb(134,199,243)',
            },
          },

          cemetery: {
            id: 'cemetery',

            paint: {
              'fill-color': 'rgb(134,199,243)',
            },
          },

          industrial: {
            id: 'industrial',

            paint: {
              'fill-color': 'rgb(134,199,243)',
            },
          },

          'aeroway-runway': {
            id: 'aeroway-runway',

            paint: {
              'line-color': 'rgba(101,167,252,1)',

              'line-width': {
                base: 1.5,

                stops: [
                  [
                    9,

                    1,
                  ],

                  [
                    18,

                    80,
                  ],
                ],
              },
            },
          },

          'aeroway-taxiway': {
            id: 'aeroway-taxiway',

            paint: {
              'line-color': 'rgba(101,167,252,1)',

              'line-width': {
                base: 1.5,

                stops: [
                  [
                    9,

                    1,
                  ],

                  [
                    18,

                    80,
                  ],
                ],
              },
            },
          },

          hillshade_shadow_faint: {
            id: 'hillshade_shadow_faint',

            paint: {
              'fill-color': 'rgba(101,167,252,1)',

              'fill-opacity': {
                stops: [
                  [
                    14,

                    0.05,
                  ],

                  [
                    16,

                    0,
                  ],
                ],
              },

              'fill-antialias': false,
            },
          },

          national_park: {
            id: 'national_park',

            paint: {
              'fill-color': 'rgba(101,167,252,1)',

              'fill-opacity': {
                stops: [
                  [
                    14,

                    0.05,
                  ],

                  [
                    16,

                    0,
                  ],
                ],
              },

              'fill-antialias': false,
            },
          },

          hillshade_shadow_med: {
            id: 'hillshade_shadow_med',

            paint: {
              'fill-color': 'rgba(101,167,252,1)',

              'fill-opacity': {
                stops: [
                  [
                    14,

                    0.05,
                  ],

                  [
                    16,

                    0,
                  ],
                ],
              },

              'fill-antialias': false,
            },
          },

          'road-shields-black': {
            id: 'road-shields-black',

            layout: {},

            paint: {
              'text-color': 'rgba(0,0,0,0)',

              'icon-halo-color': 'rgba(0, 0, 0, 0)',

              'icon-halo-width': 0,

              'text-opacity': 0,

              'icon-color': 'white',
            },
          },

          'road-label-large': {
            id: 'road-label-large',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'place-neighbourhood': {
            id: 'place-neighbourhood',

            type: 'symbol',

            source: 'composite',

            'source-layer': 'place_label',

            minzoom: 10,

            maxzoom: 14,

            filter: ['==', 'type', 'neighbourhood'],

            layout: {
              'text-field': '{name_zh}',

              'text-transform': 'uppercase',

              'text-letter-spacing': 0.1,

              'text-max-width': 7,

              'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Regular'],

              'text-padding': 3,

              'text-size': {
                base: 1,

                stops: [
                  [
                    12,

                    11,
                  ],

                  [
                    16,

                    16,
                  ],
                ],
              },
            },

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'poi-scalerank1': {
            id: 'poi-scalerank1',

            paint: {
              'text-color': {
                base: 1,

                type: 'categorical',

                property: 'maki',

                stops: [
                  ['park', 'rgba(11,137,254,1)'],

                  ['cemetery', 'rgba(11,137,254,1)'],

                  ['campsite', 'rgba(11,137,254,1)'],

                  ['garden', 'rgba(11,137,254,1)'],

                  ['zoo', 'rgba(11,137,254,1)'],

                  ['college', 'rgba(11,137,254,1)'],

                  ['hospital', 'rgba(11,137,254,1)'],
                ],

                default: 'rgba(11,137,254,1)',
              },

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'place-village': {
            id: 'place-village',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'place-suburb': {
            id: 'place-suburb',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'place-town': {
            id: 'place-town',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,

              'icon-opacity': {
                base: 1,

                stops: [
                  [
                    7.99,

                    1,
                  ],

                  [
                    8,

                    0,
                  ],
                ],
              },
            },
          },

          'place-city-sm': {
            id: 'place-city-sm',

            paint: {
              'icon-opacity': {
                base: 1,

                stops: [
                  [
                    7.99,

                    1,
                  ],

                  [
                    8,

                    0,
                  ],
                ],
              },

              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },

          'place-city-lg-s': {
            id: 'place-city-lg-s',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,

              'icon-opacity': {
                base: 1,

                stops: [
                  [
                    7.99,

                    1,
                  ],

                  [
                    8,

                    0,
                  ],
                ],
              },
            },
          },

          'road-label-medium': {
            id: 'road-label-medium',

            paint: {
              'text-color': 'rgba(11,137,254,1)',

              'text-halo-color': 'rgba(255,255,255,1)',

              'text-halo-width': 2,

              'text-halo-blur': 2,
            },
          },
        },
      }
    );
  }
  newfiberMap.setView(center);
  if (props.formData) {
    intData(props.formData);
  }
  //开启编辑
  if (props.isEdit) {
    // newfiberMap.openEntityEdit();
  }

  //根据地名查询到相应的位置
  new NewFiberMap.AddressLocation({
    id: 'nf-address-search-input',
    callback: ({ item }) => {
      inputText.value = item.name;
      let entityKey = 'addressSearch';
      newfiberMap.removeByIds([entityKey]);
      let lngLat = [item.location.lng, item.location.lat];
      var wgs84LngLat = NewFiberMap.CoordTransform.gcj02towgs84(...lngLat);
      getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(wgs84LngLat[0], wgs84LngLat[1])).then(res => {
        inputText.value = res.formatted_address;
        newfiberMap.geojsonToMap(
          NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
            {
              id: 'addressSearch',
              name: res.formatted_address,
              geometrys: `POINT(${wgs84LngLat.join(' ')})`,
              type: NewFiberMap.Enum.VectorType.ICON,
              style: {
                url: '/src/assets/images/gisMap/marker.png',
                width: 50,
                height: 50,
              },
              labelOptions: {
                font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
                color: 'rgb(255,255,255,1)',
                pixelOffset: [0, -38],
                backgroundColor: 'rgba(64,158,255,1)',
                showBackground: true,
                distanceDisplayCondition: [Number.MIN_VALUE, 55000],
              },
            },
          ])
        );
        emit('getPlace', {
          caseAddress: res.formatted_address,
          lonLat: wgs84LngLat,
        });
      });
      //   newfiberMap.getMap().camera.flyTo({
      //     destination: Cesium.Cartesian3.fromDegrees(
      //       wgs84LngLat[0],
      //       wgs84LngLat[1],
      //       445.4
      //     ),
      //     orientation: {
      //       heading: Cesium.Math.toRadians(357.8),
      //       pitch: Cesium.Math.toRadians(-70.5),
      //       roll: Cesium.Math.toRadians(360),
      //     },
      //     duration: 3,
      //   });

      newfiberMap.setCenter({
        heading: 2.2884260179562874,
        zoom: 460.20806868265635,
        lat: wgs84LngLat[1],
        lng: wgs84LngLat[0],
        pitch: -85.10790868439727,
        roll: 0.00837650255587307,
      });
    },
  });
}

function toolsClick(val) {
  //记录上一次的点击事件
  var beforeMethod = ['bufferToPoint', 'bufferToPolyline', 'polygon'][findDictObj(val, 'sectionType', mapTools.value).key];
  //areaKM:缓冲区面积,lengthKM:线长度,startPlace:起点,endPlace:终点,geometryBuffer:缓冲区范围
  var areaKM, lengthKM, startPlace, endPlace, geometry, geometryBuffer;
  emit('endDraw', {
    areaKM,
    lengthKM,
    currentTool: currentTool.value,
    geometry,
    geometryBuffer: null,
  });
  if (beforeMethod != currentMethod.value) {
    //清除图层
    newfiberMap.removeByIds(layerIds.value);
    pointCoordinates.value = [];
    pointPolygons.value = [];
  }
  window.drawUtils = new Cesium.DrawUtils(newfiberMap.getMap());
  drawUtils.destroy();

  currentMethod.value = ['bufferToPoint', 'bufferToPolyline', 'polygon'][findDictObj(val, 'sectionType', mapTools.value).key];
  if (currentMethod.value) {
    window.drawUtils[currentMethod.value]({
      //缓冲区范围   单位:km
      scope: props.bufferScope / 1000 || 0.0001,
      option: {
        width: 5,
        material: 'rgba(255,0,0,1)',
        color: 'rgba(255,0,0,1)',
        pixelSize: 10,
      },
      callback: (id = '', coordinates = [], polygon = []) => {
        layerIds.value.push(id);
        let lists = coordinates.map(item => JSON.stringify(item));
        let lists_v1 = polygon.map(item => JSON.stringify(item));
        //点
        if (lists.length == 1) {
          pointCoordinates.value.push(coordinates);
          pointPolygons.value.push(polygon);
          geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.MULTIPOINT, pointCoordinates.value);
          toolsClick(currentTool.value);
        }
        //线计算长度
        if (lists.length != 1 && lists[0] != lists[lists.length - 1]) {
          lengthKM = turf.length(turf.lineString(coordinates.map(item => [item.lng, item.lat]))).toFixed(2);
          //获取地址
          let requestAll = [
            getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(coordinates[0].lng, coordinates[0].lat)),
            getAddressByLngLat(
              ...NewFiberMap.CoordTransform.wgs84togcj02(coordinates[coordinates.length - 1].lng, coordinates[coordinates.length - 1].lat)
            ),
          ];
          Promise.all(requestAll).then(val => {
            emit('getPlace', val);
          });

          geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.LINESTRING, coordinates);
        }
        //线缓冲区计算面积
        if (lists_v1.length > 1 && lists_v1[0] == lists_v1[lists_v1.length - 1]) {
          areaKM = turf.length(turf.lineString(polygon.map(item => [item.lng, item.lat])));
        }
        //面计算面积
        if (lists.length != 1 && lists[0] == lists[lists.length - 1]) {
          areaKM = turf.length(turf.polygon([coordinates.map(item => [item.lng, item.lat])]));
          geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.POLYGON, coordinates);
        }
        if (polygon.length) {
          geometryBuffer =
            val == 'point'
              ? coordinatesToWkt(NewFiberMap.Enum.WKTType.MULTIPOLYGON, pointPolygons.value)
              : coordinatesToWkt(NewFiberMap.Enum.WKTType.POLYGON, polygon);
        } else {
          geometryBuffer = null;
        }
        emit('endDraw', {
          areaKM,
          lengthKM,
          currentTool: currentTool.value,
          geometry,
          geometryBuffer,
        });
      },
    });
  }
}

//根据经纬度获取地名
const getAddressByLngLat = async (lng, lat) => {
  let data = await request({
    url: `/amap/v3/geocode/regeo`,
    method: 'GET',
    params: {
      location: `${lng},${lat}`,
      key: '76eac14980622704ba95c1bf080f3b4c',
      radius: 1000,
      extensions: 'all',
      output: 'json',
    },
  });
  if (data.info === 'OK') return data.regeocode;
};

function coordinatesToWkt1(type, coordinates) {
  let { POINT, LINESTRING, POLYGON } = NewFiberMap.Enum.WKTType;
  let coorsStr = coordinates.map(c => [c.lng, c.lat].join(' ')).join(',');
  return {
    [POINT]: `${POINT}(${coorsStr})`,
    [LINESTRING]: `${LINESTRING}(${coorsStr})`,
    [POLYGON]: `${POLYGON}((${coorsStr}))`,
  }[type];
}

function coordinatesToWkt(type, coordinates) {
  let { POINT, LINESTRING, POLYGON, MULTIPOINT, MULTIPOLYGON } = NewFiberMap.Enum.WKTType;
  var coorsStr;
  if (type == 'MULTIPOINT') {
    coorsStr = coordinates.map(i => `(${[i[0].lng, i[0].lat].join(' ')})`).join(',');
  } else if (type == 'MULTIPOLYGON') {
    coorsStr = coordinates.map(i => `((${i.map(o => [o.lng, o.lat].join(' ')).join(',')}))`).join(',');
  } else {
    coorsStr = coordinates.map(c => [c.lng, c.lat].join(' ')).join(',');
  }
  return {
    [POINT]: `${POINT}(${coorsStr})`,
    [LINESTRING]: `${LINESTRING}(${coorsStr})`,
    [POLYGON]: `${POLYGON}((${coorsStr}))`,
    [MULTIPOINT]: `${MULTIPOINT}(${coorsStr})`,
    [MULTIPOLYGON]: `${MULTIPOLYGON}(${coorsStr})`,
  }[type];
}

//清除画布
function clear() {
  let ids = [...layerIds.value, ...['point', 'line', 'area', 'geometryBuffer']];
  newfiberMap.removeByIds(ids);
  toolsClick(currentTool.value);
  emit('endDraw', {
    areaKM: '',
    lengthKM: '',
    currentTool: currentTool.value,
    geometry: '',
    geometryBuffer: '',
  });
}
onMounted(() => {
  nextTick(() => {
    initMap();
  });
});

defineExpose({ clear });
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}
.map_button_list {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 100;
  .map_button {
    cursor: pointer;
    // width: 46px;
    padding: 0 8px;
    height: 32px;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid #dcdfe6;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #303133;
    text-align: center;
    line-height: 32px;
    margin-right: 15px;
  }
  .activeButton {
    background: #409eff;
    color: #ffffff;
  }
}

#nf-address-search-input {
  position: absolute;
  top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 100;
  background: rgba(255, 255, 255, 1);
}

#nf-address-search-input {
  margin-left: 20px;
}

.tool-causure {
  position: absolute;
  width: 300px;
  padding: 15px 6px;
  top: 10px;
  right: 10px;
  background: #00314e;
  z-index: 9;
  -webkit-box-shadow: 1px 2px 10px #3a3636;
  box-shadow: 1px 2px 10px #3a3636;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}
:deep .amap-ui-poi-picker-sugg-container {
  background: #ffffff !important;
  color: #000 !important;
}
</style>