- <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';
- import { nextTick, watch } from 'vue';
- const emit = defineEmits(['endDraw', 'clickMap', 'getPlace']);
- const props = defineProps({
- // 地图中心点
- mapCenter: {
- type: Array,
- default: [114.39778958759788, 30.478518033935494],
- },
- //是否展示工具
- isShowTool: {
- type: Boolean,
- default: false,
- },
- //是否展示的搜索
- 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: true,
- 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: 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: "清除" },
- ],
- });
- 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);
- // }
- // );
- 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 {
- //结束编辑,编辑完成后返回最后一次编辑物体的坐标点
- // 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,
- ],
- {},
- {}
- );
- } 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: '',
- });
- }
- onMounted(() => {
- nextTick(() => {
- initMap();
- });
- });
- </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: #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>