<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>
