From d277d770292df0a1266c07f4773d62edd70e6515 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期一, 13 五月 2024 17:59:16 +0800 Subject: [PATCH] 新增场景标注 --- src/assets/mipmap/scene_17.png | 0 src/constant/scene-types.js | 110 +++++++++ src/assets/mipmap/scene_4.png | 0 src/utils/map/util.js | 9 src/utils/map/animation.js | 4 src/model/FactorDatas.js | 8 src/assets/mipmap/scene_15.png | 0 src/components.d.ts | 9 src/utils/map/calculate.js | 95 +++++++ src/views/HomePage.vue | 2 src/views/realtimemode/RealtimeMode.vue | 1 src/assets/mipmap/scene_6.png | 0 src/utils/map/marks.js | 61 +++++ src/components/map/MapScene.vue | 122 ++++++++++ src/assets/mipmap/scene_5.png | 0 src/assets/mipmap/scene_18.png | 0 src/utils/map/index_old.js | 2 src/api/index.js | 4 src/assets/mipmap/scene_16.png | 0 index.html | 2 src/components/search/OptionLocation.vue | 47 +++ src/components/map/MapLocation.vue | 190 +++++++++++++++ src/api/sceneInfoApi.js | 14 + src/assets/mipmap/scene_1.png | 0 24 files changed, 661 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index fc727ed..630476d 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ <div id="app"></div> <script type="text/javascript" - src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar" + src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder" ></script> <script src="/src/lib/jquery-3.5.1.min.js"></script> <script type="module" src="/src/main.js"></script> diff --git a/src/api/index.js b/src/api/index.js index 21205a1..4c084fe 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,13 +1,13 @@ import axios from 'axios'; import { ElMessage } from 'element-plus'; -const debug = false; +const debug = true; let ip1 = 'http://114.215.109.124:8805/'; // let ip1 = 'http://47.100.191.150:9029/'; if (debug) { - ip1 = 'http://192.168.0.138:8082/'; + ip1 = 'http://192.168.0.138:8084/'; } const $http = axios.create({ diff --git a/src/api/sceneInfoApi.js b/src/api/sceneInfoApi.js new file mode 100644 index 0000000..56cbbc6 --- /dev/null +++ b/src/api/sceneInfoApi.js @@ -0,0 +1,14 @@ +import { $http } from './index'; + +/** + * + */ +export default { + searchScene(area) { + return $http.post(`scene/find`, area).then((res) => res.data); + } + + // searchByCoordinate({lng, lat, radius}) { + // return $http.post(`scene/find/radius`, mission).then((res) => res.data); + // }, +}; diff --git a/src/assets/mipmap/scene_1.png b/src/assets/mipmap/scene_1.png new file mode 100644 index 0000000..972dd1c --- /dev/null +++ b/src/assets/mipmap/scene_1.png Binary files differ diff --git a/src/assets/mipmap/scene_15.png b/src/assets/mipmap/scene_15.png new file mode 100644 index 0000000..2c33b51 --- /dev/null +++ b/src/assets/mipmap/scene_15.png Binary files differ diff --git a/src/assets/mipmap/scene_16.png b/src/assets/mipmap/scene_16.png new file mode 100644 index 0000000..f314fcd --- /dev/null +++ b/src/assets/mipmap/scene_16.png Binary files differ diff --git a/src/assets/mipmap/scene_17.png b/src/assets/mipmap/scene_17.png new file mode 100644 index 0000000..082f2ac --- /dev/null +++ b/src/assets/mipmap/scene_17.png Binary files differ diff --git a/src/assets/mipmap/scene_18.png b/src/assets/mipmap/scene_18.png new file mode 100644 index 0000000..4adcc68 --- /dev/null +++ b/src/assets/mipmap/scene_18.png Binary files differ diff --git a/src/assets/mipmap/scene_4.png b/src/assets/mipmap/scene_4.png new file mode 100644 index 0000000..5d4a940 --- /dev/null +++ b/src/assets/mipmap/scene_4.png Binary files differ diff --git a/src/assets/mipmap/scene_5.png b/src/assets/mipmap/scene_5.png new file mode 100644 index 0000000..c90e6a7 --- /dev/null +++ b/src/assets/mipmap/scene_5.png Binary files differ diff --git a/src/assets/mipmap/scene_6.png b/src/assets/mipmap/scene_6.png new file mode 100644 index 0000000..6f7ab7a --- /dev/null +++ b/src/assets/mipmap/scene_6.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index c38709b..5d5fb4f 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -11,8 +11,7 @@ BaseMap: typeof import('./components/map/BaseMap.vue')['default'] CardButton: typeof import('./components/CardButton.vue')['default'] CardDialog: typeof import('./components/CardDialog.vue')['default'] - cop: typeof import('./components/monitor/WeatherData.vue')['default'] - copy: typeof import('./components/monitor/WeatherData.vue')['default'] + copy: typeof import('./components/search/OptionType copy.vue')['default'] CoreHeader: typeof import('./components/core/CoreHeader.vue')['default'] CoreMenu: typeof import('./components/core/CoreMenu.vue')['default'] DataSummary: typeof import('./components/monitor/DataSummary.vue')['default'] @@ -30,8 +29,10 @@ ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] + ElPopover: typeof import('element-plus/es')['ElPopover'] ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] @@ -47,11 +48,14 @@ FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default'] GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default'] HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default'] + MapLocation: typeof import('./components/map/MapLocation.vue')['default'] + MapScene: typeof import('./components/map/MapScene.vue')['default'] MapToolbox: typeof import('./components/map/MapToolbox.vue')['default'] MIssionCreate: typeof import('./components/mission/MIssionCreate.vue')['default'] MissionImport: typeof import('./components/mission/MissionImport.vue')['default'] MissionManage: typeof import('./components/mission/MissionManage.vue')['default'] OptionDevice: typeof import('./components/search/OptionDevice.vue')['default'] + OptionLocation: typeof import('./components/search/OptionLocation.vue')['default'] OptionMission: typeof import('./components/search/OptionMission.vue')['default'] OptionTime: typeof import('./components/search/OptionTime.vue')['default'] OptionType: typeof import('./components/search/OptionType.vue')['default'] @@ -64,7 +68,6 @@ TrajectoryState: typeof import('./components/animation/TrajectoryState.vue')['default'] VehicleData: typeof import('./components/monitor/VehicleData.vue')['default'] WeatherData: typeof import('./components/monitor/WeatherData.vue')['default'] - 'WeatherData cop': typeof import('./components/monitor/WeatherData.vue')['default'] WeatherDataCopy: typeof import('./components/monitor/WeatherData-copy.vue')['default'] } export interface ComponentCustomProperties { diff --git a/src/components/map/MapLocation.vue b/src/components/map/MapLocation.vue new file mode 100644 index 0000000..dc0aae2 --- /dev/null +++ b/src/components/map/MapLocation.vue @@ -0,0 +1,190 @@ +<template> + <el-button + type="primary" + icon="Memo" + class="el-button-custom p-events-auto" + @click="dialogVisible = !dialogVisible" + > + 鍦扮悊缂栫爜 + </el-button> + <el-dialog v-model="dialogVisible" :show-close="false" align-center> + <template #header="{ close, titleId, titleClass }"> + <BaseCard direction="top-left" borderless="t"> + <template #content> + <el-row justify="space-between" align="middle"> + <el-row align="middle"> + <font-awesome-icon icon="fa fa-list" class="m-r-4" /> + <span :id="titleId" :class="titleClass">鍦扮悊缂栫爜</span> + </el-row> + <font-awesome-icon + icon="fa fa-times" + class="cursor-p m-r-4" + @click="close" + /> + </el-row> + </template> + </BaseCard> + </template> + <BaseCard size="medium"> + <template #content> + <el-row class="mission-table"> + <el-col :span="20"> + <el-input + v-model="address" + :autosize="{ minRows: 2, maxRows: 4 }" + type="textarea" + placeholder="Please input" + /> + <el-scrollbar height="calc(40vh - var(--bevel-length-2))"> + <div v-for="item in location" :key="item.lng"> + <span>{{ item.lng }}</span> + <span>,</span> + <span>{{ item.lat }}</span> + <!-- <span> | </span> --> + <!-- <span>{{ item.gpsLng }}</span> + <span>,</span> + <span>{{ item.gpsLat }}</span> --> + <span> | </span> + <span>{{ item.formattedAddress }}</span> + <!-- <span>{{ item.adcode }}</span> --> + </div> + </el-scrollbar> + </el-col> + <el-col :span="4" class="flex-col"> + <div> + <el-button + type="primary" + class="el-button-custom" + @click="search" + > + 鏌ヨ鍧愭爣 + </el-button> + </div> + <div> + <el-button + type="primary" + class="el-button-custom" + @click="convert" + > + GPS杞珮寰峰潗鏍� + </el-button> + </div> + </el-col> + </el-row> + </template> + </BaseCard> + </el-dialog> +</template> +<script> +import calculate from '../../utils/map/calculate'; + +// eslint-disable-next-line no-undef +const geocoder = new AMap.Geocoder({ + // city 鎸囧畾杩涜缂栫爜鏌ヨ鐨勫煄甯傦紝鏀寔浼犲叆鍩庡競鍚嶃�乤dcode 鍜� citycode + city: '涓婃捣', + district: '闀垮畞鍖�' +}); + +export default { + props: {}, + data() { + return { + dialogVisible: false, + address: '', + location: [] + }; + }, + computed: {}, + methods: { + search() { + if (this.address == '') return; + const addressList = this.address.split('\n'); + const res = []; + geocoder.getLocation(addressList, (status, result) => { + if (status === 'complete' && result.info === 'OK') { + // const gdList = result.geocodes.map((v) => { + // return [v.location.getLng(), v.location.getLat()]; + // }); + // calculate.convertFromGPS(gdList, (gd) => { + + // }); + for (let y = 0; y < result.geocodes.length; y++) { + const g = result.geocodes[y]; + if (!g) continue; + const lng = g.location.getLng(); + const lat = g.location.getLat(); + const { formattedAddress, adcode, level } = g; + if (adcode == '310105') { + // const [gpsLng, gpsLat] = gd[i]; + const findRes = res.find((v) => { + return v.formattedAddress == formattedAddress; + }); + if (!findRes) { + for (let i = 0; i < addressList.length; i++) { + const a = addressList[i]; + if (formattedAddress.match(a)) { + res.push({ + lng, + lat, + // gpsLng, + // gpsLat, + formattedAddress, + adcode, + level + }); + break; + } + } + } + } + } + this.location = res; + } + }); + }, + + convert() { + if (this.address == '') return; + const gpsList = this.address.split('\n').map((v) => { + return v.split(','); + }); + calculate.convertFromGPS( + gpsList, + (gd) => { + this.location = gd.map((v) => { + return { + lng: v[0], + lat: v[1] + }; + }); + }, + 'baidu' + ); + } + } +}; +</script> +<style> +.el-dialog { + --el-dialog-bg-color: transparent !important; + --el-dialog-title-font-size: var(--el-font-size-medium); + --el-dialog-content-font-size: 14px; + --el-dialog-padding-primary: 0px !important; +} + +.el-dialog__title { + color: var(--font-color); +} +</style> +<style scoped> +.flex-col { + display: flex; + flex-direction: column; + gap: 4px; + align-items: flex-end; +} + +.mission-table { + height: 60vh; +} +</style> diff --git a/src/components/map/MapScene.vue b/src/components/map/MapScene.vue new file mode 100644 index 0000000..b230c8c --- /dev/null +++ b/src/components/map/MapScene.vue @@ -0,0 +1,122 @@ +<template> + <el-popover placement="bottom" trigger="click"> + <template #reference> + <el-button + type="primary" + icon="Memo" + class="el-button-custom p-events-auto" + > + 鍦烘櫙鏍囨敞 + </el-button> + </template> + <OptionLocation v-model="districtCode"></OptionLocation> + <div class="vertical-class"> + <el-checkbox + :indeterminate="isIndeterminate" + v-model="checkAll" + @change="handelCheckAllChange" + >鍏ㄩ��</el-checkbox + > + </div> + <el-checkbox-group + v-model="selectType" + size="default" + @change="handleChange" + > + <div class="vertical-class"> + <el-checkbox + v-for="item in options" + :key="item.label" + :value="item.value" + >{{ item.label }}</el-checkbox + > + </div> + </el-checkbox-group> + </el-popover> +</template> + +<script> +import { sceneTypes, sceneIcon } from '@/constant/scene-types'; +import sceneInfoApi from '@/api/sceneInfoApi'; +import marks from '@/utils/map/marks'; +import MapUtil from '@/utils/map/util'; + +const lableMarkMap = new Map(); + +export default { + data() { + return { + districtCode: '', + isIndeterminate: false, + checkAll: false, + selectType: [], + options: sceneTypes(), + sceneMap: new Map() + }; + }, + methods: { + fetchScene(sceneType) { + return sceneInfoApi + .searchScene({ + districtCode: this.districtCode, + sceneTypeId: sceneType + }) + .then((res) => { + return res.data; + }); + }, + handelCheckAllChange(val) { + this.selectType = val ? this.options.map((v) => v.value) : []; + this.isIndeterminate = false; + this.handleChange(this.selectType); + }, + handleChange(types) { + // for (const iterator of lableMarkMap) { + // MapUtil.removeViews(iterator[1]); + // } + + let checkedCount = types.length; + this.checkAll = checkedCount === this.options.length; + this.isIndeterminate = + checkedCount > 0 && checkedCount < this.options.length; + + // 鏍规嵁閫夐」锛屽皢鏈墦寮�鐨勫浘灞傚紑鍚� + types.forEach((t) => { + if (!lableMarkMap.has(t)) { + this.fetchScene(t).then((res) => { + const layer = marks.createLabelMarks(sceneIcon(t), res); + lableMarkMap.set(t, { show: true, layer }); + }); + } else { + const m = lableMarkMap.get(t); + if (!m.show) { + MapUtil.addViews(m.layer); + m.show = true; + } + } + }); + + // 鏍规嵁閫夐」锛屽皢寮�鍚腑鐨勬湭閫変腑鍥惧眰鍏抽棴 + for (const [key, value] of lableMarkMap) { + if (!types.includes(key)) { + if (value.show) { + MapUtil.removeViews(value.layer); + value.show = false; + } + } + } + // MapUtil.setFitView(); + } + } +}; +</script> + +<style scoped> +.el-button { + margin: initial !important; +} +.vertical-class { + display: flex; + flex-direction: column; +} +</style> diff --git a/src/components/search/OptionLocation.vue b/src/components/search/OptionLocation.vue new file mode 100644 index 0000000..71e5edc --- /dev/null +++ b/src/components/search/OptionLocation.vue @@ -0,0 +1,47 @@ +<template> + <!-- <el-form-item label="鍖哄幙"> --> + <el-select + :model-value="modelValue" + @update:model-value="handleChange" + placeholder="鍖哄幙" + size="small" + class="w-80" + > + <el-option + v-for="(s, i) in typeList" + :key="i" + :label="s.label" + :value="s.value" + /> + </el-select> + <!-- </el-form-item> --> +</template> + +<script> +export default { + props: { + modelValue: String + }, + emits: ['update:modelValue'], + data() { + return { + typeList: [ + { + label: '闀垮畞鍖�', + value: '310105' + } + ] + }; + }, + methods: { + handleChange(value) { + // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘杞藉叿鐨勫浘鏍囥�� + this.$emit('update:modelValue', value); + } + }, + mounted() { + this.handleChange(this.typeList[0].value); + } +}; +</script> +<style scoped></style> diff --git a/src/constant/scene-types.js b/src/constant/scene-types.js new file mode 100644 index 0000000..cffdfe7 --- /dev/null +++ b/src/constant/scene-types.js @@ -0,0 +1,110 @@ +import scene_1 from '@/assets/mipmap/scene_1.png'; +import scene_4 from '@/assets/mipmap/scene_4.png'; +import scene_5 from '@/assets/mipmap/scene_5.png'; +import scene_6 from '@/assets/mipmap/scene_6.png'; +import scene_15 from '@/assets/mipmap/scene_15.png'; +import scene_16 from '@/assets/mipmap/scene_16.png'; +import scene_17 from '@/assets/mipmap/scene_17.png'; +import scene_18 from '@/assets/mipmap/scene_18.png'; + +function sceneTypes() { + return [ + { + label: '宸ュ湴', + value: '1' + }, + // { + // label: '鐮佸ご', + // value: '2', + // }, + // { + // label: '鎼呮媽绔�', + // value: '3', + // }, + { + label: '宸ヤ笟浼佷笟', + value: '4' + }, + { + label: '椁愰ギ', + value: '5' + }, + { + label: '姹戒慨', + value: '6' + }, + // { + // label: '闄嶅皹鐐�', + // value: '7', + // }, + // { + // label: '绌烘皵璐ㄩ噺鐩戞祴鐐�', + // value: '8', + // }, + // { + // label: '閬撹矾鎵皹鐩戞祴鐐�', + // value: '9', + // }, + // { + // label: '閬撹矾', + // value: '10', + // }, + // { + // label: '娌虫祦鏂潰', + // value: '11', + // }, + // { + // label: '宸ヤ笟鍥尯', + // value: '12', + // }, + // { + // label: '鏃犲浐瀹氬満鏅�', + // value: '13', + // }, + // { + // label: '鍫嗗満', + // value: '14', + // }, + { + label: '瀹為獙瀹�', + value: '15' + }, + { + label: '绮惧搧灏忓尯', + value: '16' + }, + { + label: '鍔犳补绔�', + value: '17' + }, + { + label: '鍟嗕笟浣�', + value: '18' + } + ]; +} + +function sceneIcon(type) { + switch (type) { + case '1': + return scene_1; + case '4': + return scene_4; + case '5': + return scene_5; + case '6': + return scene_6; + case '15': + return scene_15; + case '16': + return scene_16; + case '17': + return scene_17; + case '18': + return scene_18; + default: + return scene_1; + } +} + +export { sceneTypes, sceneIcon }; diff --git a/src/model/FactorDatas.js b/src/model/FactorDatas.js index b6b1d30..58bc5a8 100644 --- a/src/model/FactorDatas.js +++ b/src/model/FactorDatas.js @@ -1,5 +1,5 @@ -import { Factor } from "./Factor"; -import calculate from "@/utils/map/calculate"; +import { Factor } from './Factor'; +import calculate from '@/utils/map/calculate'; /** * @@ -61,8 +61,6 @@ f.pushData(v, drawMode == undefined ? 0 : drawMode); }); }); - - this.convertGPS(this.lnglats_GPS, callback); }, @@ -162,7 +160,7 @@ // 鑾峰彇鏁版嵁闀垮害 length: function () { return this.lnglats_GD.length; - }, + } }; export { FactorDatas }; diff --git a/src/utils/map/animation.js b/src/utils/map/animation.js index 40fbec8..ed664c3 100644 --- a/src/utils/map/animation.js +++ b/src/utils/map/animation.js @@ -245,11 +245,11 @@ // this.OnEachFrameCallback = undefined; // this.OnEachTaskEndCallback = undefined; this.frameAnimation.stop(); + this._clearMap(); }, setOnStopCallback: function (callback) { this.frameAnimation.setOnStopCallback( function () { - this._clearMap(); callback(); }.bind(this) ); @@ -419,6 +419,6 @@ }; const realTimeMapAnimation = new MapAnimation(); -realTimeMapAnimation.clear = false; +// realTimeMapAnimation.clear = false; export { realTimeMapAnimation, MapAnimation }; diff --git a/src/utils/map/calculate.js b/src/utils/map/calculate.js index 505d082..b9ad407 100644 --- a/src/utils/map/calculate.js +++ b/src/utils/map/calculate.js @@ -30,19 +30,82 @@ return path; } +//瀹氫箟涓�浜涘父閲� +const PI = 3.1415926535897932384626; +const a = 6378245.0; //闀垮崐杞� +const ee = 0.00669342162296594323; //鎵佺巼/*** GCJ02 杞崲涓� WGS84* @param lng* @param lat* @returns {*[]}*/ + +/** + * 鍒ゆ柇鏄惁鍦ㄥ浗鍐咃紝涓嶅湪鍥藉唴鍒欎笉鍋氬亸绉� + * @param lng + * @param lat + * @returns {boolean} + */ +function out_of_china(lng, lat) { + // 绾害3.86~53.55,缁忓害73.66~135.05 + return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); +} + +function transformlat(lng, lat) { + // lat = +lat lng = +lng + let ret = + -100.0 + + 2.0 * lng + + 3.0 * lat + + 0.2 * lat * lat + + 0.1 * lng * lat + + 0.2 * Math.sqrt(Math.abs(lng)); + ret += + ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * + 2.0) / + 3.0; + ret += + ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / + 3.0; + ret += + ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * + 2.0) / + 3.0; + return ret; +} + +function transformlng(lng, lat) { + // lat = +latlng = +lng + let ret = + 300.0 + + lng + + 2.0 * lat + + 0.1 * lng * lng + + 0.1 * lng * lat + + 0.1 * Math.sqrt(Math.abs(lng)); + ret += + ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * + 2.0) / + 3.0; + ret += + ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / + 3.0; + ret += + ((150.0 * Math.sin((lng / 12.0) * PI) + + 300.0 * Math.sin((lng / 30.0) * PI)) * + 2.0) / + 3.0; + return ret; +} + /** * 灏唃ps缁忕含搴﹁浆鎹负楂樺痉鍦板浘缁忕含搴� * @param {*} lnglats * @param {*} callback */ -function _convertLatlng(index, coor, lnglats, callback) { +function _convertLatlng(index, coor, lnglats, type = 'gps', callback) { if (index < coor.length) { var path = parse2LngLat(coor[index]); // eslint-disable-next-line no-undef - AMap.convertFrom(path, 'gps', function (status, result) { + AMap.convertFrom(path, type, function (status, result) { if (result.info === 'ok') { lnglats.push.apply(lnglats, result.locations); - _convertLatlng(index + 1, coor, lnglats, callback); + _convertLatlng(index + 1, coor, lnglats, type, callback); } }); } else { @@ -103,14 +166,36 @@ return coors_GD; }, - convertFromGPS: function (gps, callback) { + convertFromGPS: function (gps, callback, type = 'gps') { var coor = _prepare4convert(gps); - _convertLatlng(0, coor, [], function (result) { + _convertLatlng(0, coor, [], type, function (result) { var gd = []; result.forEach((r) => { gd.push([r.lng, r.lat]); }); callback(gd); }); + }, + + /** + * 楂樺痉鍦板浘鍧愭爣杞珿PS鍧愭爣绠楁硶 + */ + gcj02towgs84(lng, lat) { + // lat = +latlng = +lng + if (out_of_china(lng, lat)) { + return [lng, lat]; + } else { + let dlat = transformlat(lng - 105.0, lat - 35.0); + let dlng = transformlng(lng - 105.0, lat - 35.0); + let radlat = (lat / 180.0) * PI; + let magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + let sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI); + dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI); + let mglat = Math.round((lat * 2 - lat - dlat) * 1000000) / 1000000; + let mglng = Math.round((lng * 2 - lng - dlng) * 1000000) / 1000000; + return [mglng, mglat]; + } } }; diff --git a/src/utils/map/index_old.js b/src/utils/map/index_old.js index 69704ff..c296864 100644 --- a/src/utils/map/index_old.js +++ b/src/utils/map/index_old.js @@ -53,7 +53,7 @@ viewMode: '3D', // 鍦板浘妯″紡 resizeEnable: true, center: [121.6039283, 31.25295567], - zooms: [3, 18], + zooms: [0, 18], zoom: 14 }); diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js index 0d3c21d..ed0c807 100644 --- a/src/utils/map/marks.js +++ b/src/utils/map/marks.js @@ -76,5 +76,66 @@ }); _massMarks = massMarks; map.add(massMarks); + }, + + createLabelMarks(img, dataList) { + // eslint-disable-next-line no-undef + const layer = new AMap.LabelsLayer({ + zooms: [3, 20], + zIndex: 1000, + // 寮�鍚爣娉ㄩ伩璁╋紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴�� + collision: true, + // 寮�鍚爣娉ㄦ贰鍏ュ姩鐢伙紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴�� + animation: true + }); + + map.add(layer); + + // var markers = []; + for (var i = 0; i < dataList.length; i++) { + const data = dataList[i]; + var curData = { + name: data.name, + position: [data.longitude, data.latitude], + zooms: [10, 20], + opacity: 1, + zIndex: 10, + icon: { + type: 'image', + image: img, + // clipOrigin: [14, 92], + // clipSize: [50, 68], + size: [24, 24], + anchor: 'bottom-center', + angel: 0, + retina: true + }, + text: { + content: data.name, + direction: 'top', + offset: [0, -5], + style: { + fontSize: 15, + fontWeight: 'normal', + fillColor: '#fff', + strokeColor: '#333', + strokeWidth: 2 + // backgroundColor: '#b1009b' + } + } + }; + curData.extData = { + index: i + }; + + // eslint-disable-next-line no-undef + var labelMarker = new AMap.LabelMarker(curData); + + // markers.push(labelMarker); + + layer.add(labelMarker); + } + + return layer; } }; diff --git a/src/utils/map/util.js b/src/utils/map/util.js index 3da926d..27871e9 100644 --- a/src/utils/map/util.js +++ b/src/utils/map/util.js @@ -13,5 +13,14 @@ map.setCenter(lnglat); this.lasttime = now; } + }, + addViews(view) { + map.add(view); + }, + removeViews(view) { + map.remove(view); + }, + setFitView() { + map.setFitView(); } }; diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index afe27b3..32d7a91 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -5,6 +5,8 @@ <el-row class="dropdown-wrap"> <MapToolbox></MapToolbox> <MissionManage></MissionManage> + <!-- <MapLocation></MapLocation> --> + <MapScene></MapScene> </el-row> <CoreMenu></CoreMenu> <router-view></router-view> diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue index 1ecbd0a..c4de517 100644 --- a/src/views/realtimemode/RealtimeMode.vue +++ b/src/views/realtimemode/RealtimeMode.vue @@ -162,6 +162,7 @@ unmounted() { this.clearFetchingTask(); realTimeMapAnimation.stop(); + console.log('clear'); } }; </script> -- Gitblit v1.9.3