GitBucket
<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
id="pickerInput"
placeholder="请输入"
v-model="inputText"
:prefix-icon="Search"
/>
</div>
</div>
</template>
<script setup>
import { findDictObj } from "@/utils/ruoyi.js";
import request from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import { nextTick, watch } from "vue";
const emit = defineEmits(["endDraw", "clickMap", "getPlace"]);
const props = defineProps({
//是否展示工具
isShowTool: {
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,
},
// //弹框的状态
// 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 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,
lat: 26.641768,
lng: 118.177708,
heading: 2.281299097855777,
zoom: 958.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: "清除" },
],
baseMap:[
{id:'1',name:'影像图',url:import.meta.env.VITE_PROJECT_ISERVER_URL + '/iserver/services/map-arcgis-15/rest/maps/图层'},
{id:'2',name:'注记',url:import.meta.env.VITE_PROJECT_ISERVER_URL + '/iserver/services/map-arcgis-3/rest/maps/图层'},
]
});
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.count,
// (v1, v2) => {
// console.log("props.count", props.count);
// }
// );
async function initMap() {
console.log("初始化");
const { container, options, center } = mapConfig.value;
window.newfiberMap = new NewFiberMap(container, options);
console.log(window.newfiberMap);
//鼠标经过事件
newfiberMap.registerMouseMove((xy, position, feature) => {
newfiberMap.getMap().container.style.cursor = feature ? "pointer" : "";
});
//地图点击
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:
NewFiberMapConfig.SDK_INIT_SRC_PREFIX +
"/static/images/running_path/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 {
//结束编辑，编辑完成后返回最后一次编辑物体的坐标点
emit("clickMap", 1111);
// let coordinates = props.isEdit && newfiberMap.closeEntityEdit();
}
});
if(import.meta.env.VITE_PROJECT_ISERVER_URL){
state.baseMap.forEach(i => {
let imagery = newfiberMap.getMap().imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({url : i.url}));
imagery.alpha = 1.0;
// 缩放到图层可见
newfiberMap.getMap().zoomTo(imagery);
})
}else{
if (props.isReloadTDT) {
newfiberMap.setBaseMapByEnum(
[
// NewFiberMap.Enum.BaseMap.TDT_VECTOR_LABEL,
// NewFiberMap.Enum.BaseMap.TDT_VECTOR,
NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2,
],
{},
{}
);
} 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:
NewFiberMapConfig.SDK_INIT_SRC_PREFIX +
"/static/images/running_path/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,
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: "",
});
}
function orientationCenter() {
const { center } = mapConfig.value;
newfiberMap.setView(center);
}
onMounted(() => {
nextTick(() => {
initMap();
});
});
defineExpose({
clear,
orientationCenter
})
</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;
}
::v-deep(.el-input__wrapper) {
width: 250px !important;
}
.tool-causure {
position: absolute;
width: 250px;
padding: 15px 6px;
top: 10px;
right: 10px;
background: #ffffff;
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;
}
</style>