!794 feat（iot）:将高德地图更换为百度地图

Merge pull request !794 from alwayssuper/feature/iot

.env

@@ -24,6 +24,5 @@ VITE_APP_DEFAULT_LOGIN_TENANT = 芋道源码
 VITE_APP_DEFAULT_LOGIN_USERNAME = admin
 VITE_APP_DEFAULT_LOGIN_PASSWORD = admin123
 
-# 高德地图
+# 百度地图
-VITE_AMAP_KEY='48eb85e0e245e293a0b61474943b177c'
+VITE_BAIDU_MAP_KEY = 'efHIw2qmH8RzHPxK0z0rbCgzDVLup9LD'
-VITE_AMAP_SECURITY_CODE='86a45878caff8c0c60d88e80a93ddadd'

package-lock.json

@@ -9,7 +9,6 @@
       "version": "2.5.0-snapshot",
       "license": "MIT",
       "dependencies": {
-        "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.1.0",
         "@form-create/designer": "^3.2.6",
         "@form-create/element-ui": "^3.2.11",

package.json

@@ -25,7 +25,6 @@
     "lint:lint-staged": "lint-staged -c "
   },
   "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.11",

src/components/Map/index.vue

@@ -1,12 +1,10 @@
-<!-- 地图组件：基于高德地图实现 -->
+<!-- 地图组件：基于百度地图GL实现 -->
-<!-- TODO @宗超：【设备定位】使用百度地图，和 ercharts 更好集成； -->
 <template>
   <div v-if="props.isWrite">
     <el-form ref="form" label-width="120px">
       <el-form-item label="定位位置:">
-        <!-- TODO @TODO @AI：style 改成 unocss -->
         <el-select
-          style="width: 100%"
+          class="w-full"
           v-model="state.address"
           clearable
           filterable
@@ -14,7 +12,7 @@
           reserve-keyword
           placeholder="可输入地址查询经纬度"
           :remote-method="autoSearch"
-          @change="regeoCode"
+          @change="handleAddressSelect"
           :loading="state.loading"
         >
           <el-option
@@ -26,7 +24,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="设备地图:">
-        <div id="rwMap" class="mapContainer"></div>
+        <div id="bdMap" class="mapContainer"></div>
       </el-form-item>
     </el-form>
   </div>
@@ -34,14 +32,22 @@
     <el-descriptions :column="2" border :labelStyle="{ 'font-weight': 'bold' }">
       <el-descriptions-item label="设备位置:">{{ state.address }}</el-descriptions-item>
     </el-descriptions>
-    <div id="rMap" class="mapContainer"></div>
+    <div id="bdMap" class="mapContainer"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import AMapLoader from '@amap/amap-jsapi-loader'
+import { reactive, ref, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
+// 扩展Window接口以包含百度地图GL API
+declare global {
+  interface Window {
+    BMapGL: any
+    initBaiduMap: () => void
+  }
+}
+
 const emits = defineEmits(['locateChange', 'update:center'])
 const state = reactive({
   lonLat: '', // 经度,纬度
@@ -56,139 +62,200 @@ const state = reactive({
   autoComplete: null as any,
   tips: [] // 搜索提示
 })
+
 const props = defineProps({
   clickMap: propTypes.bool.def(false),
   isWrite: propTypes.bool.def(false),
   center: propTypes.string.def('')
 })
+
+/**
+ * 加载百度地图
+ */
 const loadMap = () => {
-  ;(window as any)._AMapSecurityConfig = {
-    securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE
-  }
   state.address = ''
   state.latitude = ''
   state.longitude = ''
-  // TODO @AI：可以使用 await 方式么？
+
-  AMapLoader.load({
+  // 创建百度地图API脚本
-    key: import.meta.env.VITE_AMAP_KEY, // 申请好的 Web 端开发者Key，首次调用 load 时必填
+  const script = document.createElement('script')
-    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+  script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
-    plugins: [
+    import.meta.env.VITE_BAIDU_MAP_KEY
-      // 逆解析插件
+  }&callback=initBaiduMap`
-      'AMap.Geocoder',
+  document.body.appendChild(script)
-      'AMap.AutoComplete'
+
-    ]
+  // 定义全局回调函数
-  }).then(() => {
+  window.initBaiduMap = () => {
     initMap()
+    initGeocoder()
+    initAutoComplete()
+
     if (props.clickMap) {
-      state.map.on('click', (e) => {
+      state.map.addEventListener('click', (e: any) => {
-        state.lonLat = e.lnglat.lng + ',' + e.lnglat.lat
+        console.log(e)
+        const point = e.latlng
+        console.log(point)
+        state.lonLat = point.lng + ',' + point.lat
+        console.log(state.lonLat)
         regeoCode(state.lonLat)
       })
     }
-    initGeocoder()
+
-    initAutoComplete()
     if (props.center) {
       regeoCode(props.center)
     }
-  })
-}
-
-const initMap = () => {
-  let mapId = props.isWrite ? 'rwMap' : 'rMap'
-  state.map = new (window as any).AMap.Map(mapId, {
-    resizeEnable: true,
-    zoom: 11, // 地图显示的缩放级别
-    keyboardEnable: false
-  })
-}
-
-const initGeocoder = () => {
-  state.geocoder = new (window as any).AMap.Geocoder({
-    city: '010', // 城市设为北京，默认：“全国”
-    radius: 500, // 范围，默认：500
-    extensions: 'all'
-  })
-}
-
-const initAutoComplete = () => {
-  const autoOptions = {
-    city: '全国'
   }
-  state.autoComplete = new (window as any).AMap.AutoComplete(autoOptions)
 }
 
+/**
+ * 初始化地图
+ */
+const initMap = () => {
+  const mapId = 'bdMap'
+  state.map = new window.BMapGL.Map(mapId)
+  state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11)
+  state.map.enableScrollWheelZoom()
+  state.map.disableDoubleClickZoom()
+
+  // 添加地图控件
+  state.map.addControl(new window.BMapGL.NavigationControl())
+  state.map.addControl(new window.BMapGL.ScaleControl())
+  state.map.addControl(new window.BMapGL.ZoomControl())
+}
+
+/**
+ * 初始化地理编码器
+ */
+const initGeocoder = () => {
+  state.geocoder = new window.BMapGL.Geocoder()
+}
+
+/**
+ * 初始化自动完成
+ */
+const initAutoComplete = () => {
+  state.autoComplete = new window.BMapGL.Autocomplete({
+    input: 'searchInput',
+    location: state.map
+  })
+}
+
+/**
+ * 搜索地址
+ * @param queryValue 搜索关键词
+ */
 const autoSearch = (queryValue: string) => {
-  state.autoComplete.search(queryValue, (_status, result) => {
+  if (!queryValue) {
-    // TODO @AI：下面的写法可以优化下么？
+    state.mapAddrOptions = []
-    var res = result.tips || [] // 搜索成功时，result即是对应的匹配数据
+    return
-    const temp = ref<any[]>([])
+  }
-    res.forEach((p) => {
+
-      if ((p.name, p.location.lng && p.location.lat)) {
+  state.loading = true
-        temp.value.push({
+
-          name: p.district + p.name,
+  // 使用百度地图地点检索服务
-          value: p.location.lng + ',' + p.location.lat
+  const localSearch = new window.BMapGL.LocalSearch(state.map, {
+    onSearchComplete: (results: any) => {
+      state.loading = false
+      const temp: any[] = []
+
+      if (results && results.getPoi) {
+        const pois = results.getPoi()
+        pois.forEach((p: any) => {
+          const point = p.point
+          if (point && point.lng && point.lat) {
+            temp.push({
+              name: p.title,
+              value: point.lng + ',' + point.lat
+            })
+          }
         })
       }
-    })
-    state.mapAddrOptions = temp.value
-  })
-}
 
-// TODO @AI：方法注释，使用 /** */
+      state.mapAddrOptions = temp
-// 添加标记点
-const setMarker = (lnglat) => {
-  // TODO @AI: if return 简化下；
-  if (lnglat) {
-    // 如果点标记已存在则先移除原点
-    if (state.mapMarker !== null) {
-      state.map.remove(state.mapMarker)
-      state.lonLat = ''
     }
-    // 定义点标记对象
+  })
-    state.mapMarker = new (window as any).AMap.Marker({
+
-      position: new (window as any).AMap.LngLat(lnglat[0], lnglat[1])
+  localSearch.search(queryValue)
-    })
+}
-    state.map.add(state.mapMarker) // 添加点标记在地图上
+
-    state.map.setCenter(lnglat)
+/**
-    state.map.setZoom(16)
+ * 处理地址选择
-    state.mapMarker.setPosition(lnglat)
+ * @param value 选中的地址值
+ */
+const handleAddressSelect = (value: string) => {
+  if (value) {
+    regeoCode(value)
   }
 }
 
-// TODO @AI：下面的写法可以优化下；例如说：
+/**
-// 经纬度转化为地址、添加标记点
+ * 添加标记点
-const regeoCode = (lonLat) => {
+ * @param lnglat 经纬度数组
-  if (lonLat) {
+ */
-    // TODO @AI：变量名的拼写；
+const setMarker = (lnglat: any) => {
-    let lnglat = lonLat.split(',')
+  if (!lnglat) return
-    state.latitude = lnglat[0]
+
-    state.longitude = lnglat[1]
+  // 如果点标记已存在则先移除原点
-    emits('locateChange', lnglat)
+  if (state.mapMarker !== null) {
-    emits('update:center', lonLat)
+    state.map.removeOverlay(state.mapMarker)
-    setMarker(lnglat)
+    state.lonLat = ''
-    getAddress(lnglat)
   }
+
+  // 创建新的标记点
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.mapMarker = new window.BMapGL.Marker(point)
+
+  // 添加点标记到地图
+  state.map.addOverlay(state.mapMarker)
+  state.map.centerAndZoom(point, 16)
 }
 
-// TODO @AI：代码优化下；
+/**
-// 把拿到的经纬度转化为地址信息
+ * 经纬度转化为地址、添加标记点
-const getAddress = (lnglat) => {
+ * @param lonLat 经度,纬度字符串
-  state.geocoder.getAddress(lnglat, (status, result) => {
+ */
-    if (status === 'complete' && result.info === 'OK') {
+const regeoCode = (lonLat: string) => {
-      if (result && result.regeocode) {
+  if (!lonLat) return
-        state.address = result.regeocode.formattedAddress
+
-      }
+  const lnglat = lonLat.split(',')
+  if (lnglat.length !== 2) return
+
+  state.longitude = lnglat[0]
+  state.latitude = lnglat[1]
+
+  // 通知父组件位置变更
+  emits('locateChange', lnglat)
+  emits('update:center', lonLat)
+
+  // 先将地图中心点设置到目标位置
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.map.centerAndZoom(point, 16)
+
+  // 再设置标记并获取地址
+  setMarker(lnglat)
+  getAddress(lnglat)
+}
+
+/**
+ * 根据经纬度获取地址信息
+ * @param lnglat 经纬度数组
+ */
+const getAddress = (lnglat: any) => {
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+
+  state.geocoder.getLocation(point, (result: any) => {
+    if (result && result.address) {
+      state.address = result.address
     }
   })
 }
 
-// 显式暴露方法，使其可以被父组件访问
+/** 显式暴露方法，使其可以被父组件访问 */
 defineExpose({ regeoCode })
 
 onMounted(() => {
   loadMap()
 })
-// TODO @AI：style 可以改成 unocss 么？
 </script>
 
 <style scoped>
@@ -196,4 +263,4 @@ onMounted(() => {
   width: 100%;
   height: 400px;
 }
-</style>
+</style>

src/views/iot/device/device/DeviceForm.vue

@@ -93,14 +93,14 @@
                 @blur="updateLocationFromCoordinates"
               />
             </el-form-item>
-            <div class="pl-0 w-full ml-[-18px]" v-if="showMap">
+            <div class="pl-0 h-[400px] w-full ml-[-18px]" v-if="showMap">
               <Map
                 :isWrite="true"
                 :clickMap="true"
                 :center="formData.location"
                 @locateChange="handleLocationChange"
                 ref="mapRef"
-                class="h-[400px] w-full"
+                class="h-full w-full"
               />
             </div>
           </template>
@@ -151,7 +151,7 @@ const formData = ref({
   groupIds: [] as number[]
 })
 
-// 监听经纬度变化，更新location
+/** 监听经纬度变化，更新location */
 watch([() => formData.value.longitude, () => formData.value.latitude], ([newLong, newLat]) => {
   if (newLong && newLat) {
     formData.value.location = `${newLong},${newLat}`

src/views/iot/device/device/detail/DeviceDetailsInfo.vue

@@ -151,12 +151,12 @@ const authPasswordVisible = ref(false) // 定义密码可见性状态
 const authInfo = ref<IotDeviceAuthInfoVO>({} as IotDeviceAuthInfoVO) // 定义设备认证信息对象
 
 // TODO @AI：注释使用 /** */ 风格，方法注释；
-// 控制地图显示的标志
+/** 控制地图显示的标志 */
 const showMap = computed(() => {
   return !!(device.longitude && device.latitude)
 })
 
-// 获取位置字符串，用于地图组件
+/** 获取位置字符串，用于地图组件 */
 const getLocationString = () => {
   if (device.longitude && device.latitude) {
     return `${device.longitude},${device.latitude}`