feat: 开发地图组件

JackySoft · Sep 21, 2024 · fd004ac · fd004ac
1 parent cc6193d
commit fd004ac
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 1 deletion.
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -43,6 +43,16 @@
         s.parentNode.insertBefore(hm, s);
       })();
     </script>
+    <!-- <script>
+      window.BMAP_PROTOCOL = 'http';
+    </script> -->
+    <!-- <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=B8e7XVw1JMDwkAO7Ok6Z6unePqLWo8pH"></script> -->
+
+    <script
+      type="text/javascript"
+      src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=B8e7XVw1JMDwkAO7Ok6Z6unePqLWo8pH&services=&t=20240906151558"
+    ></script>
+    <link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/editor/src/config/components.ts b/packages/editor/src/config/components.ts
@@ -355,6 +355,17 @@ const components = [
       },
     ],
   },
+  {
+    type: 'Map',
+    title: '地图',
+    data: [
+      {
+        icon: '',
+        name: 'BMap',
+        type: 'BMap',
+      },
+    ],
+  },
   {
     type: 'MicroApp',
     title: '微服务',

diff --git a/packages/editor/src/packages/Map/BMap/BMap.tsx b/packages/editor/src/packages/Map/BMap/BMap.tsx
@@ -0,0 +1,91 @@
+import { ComponentType } from '@/packages/types';
+import { createId, isNotEmpty } from '@/packages/utils/util';
+import { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
+
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MBMap = ({ id, type, config, onLoaded, onClick }: ComponentType, ref: any) => {
+  const [visible, setVisible] = useState(true);
+  const [mapId, setMapId] = useState('');
+  const [map, setMap] = useState<any>(null);
+  useEffect(() => {
+    setMapId(createId('BMap'));
+  }, []);
+
+  useEffect(() => {
+    if (!mapId) return;
+    const map = new window.BMapGL.Map(mapId);
+    const point = new window.BMapGL.Point(116.404, 39.915);
+    map.centerAndZoom(point, config.props.zoom || 15);
+    map.addEventListener('tilesloaded', function () {
+      onLoaded?.();
+    });
+    map.addEventListener('click', function ({ latlng: { lat, lng } }: any) {
+      onClick?.({
+        lat,
+        lng,
+      });
+    });
+    setMap(map);
+  }, [mapId]);
+
+  useEffect(() => {
+    if (!mapId || !map) return;
+    const { cityName, zoom, wheelZoom, rotateAngle, tiltAngle, mapType, ScaleControl, ZoomControl, CityListControl, LocationControl } = config.props;
+    // 设置当前城市
+    if (cityName.trim()) {
+      const [lat, lng] = cityName.split(',');
+      if (lat && lng) {
+        map.centerAndZoom(new window.BMapGL.Point(lat, lng), zoom || 15);
+      } else {
+        map.centerAndZoom(cityName, zoom || 15);
+      }
+    }
+    // 设置地图是否允许滚轮缩放
+    map.enableScrollWheelZoom(wheelZoom);
+    // 设置地图旋转角度
+    if (isNotEmpty(rotateAngle)) {
+      map.setHeading(rotateAngle);
+    }
+    // 设置地图倾斜角度
+    if (isNotEmpty(tiltAngle)) {
+      map.setTilt(tiltAngle);
+    }
+    // 设置地图类型
+    map.setMapType(window[mapType]);
+    // 添加比例尺控件
+    if (ScaleControl) {
+      map.addControl(new window.BMapGL.ScaleControl());
+    }
+    // 添加缩放控件
+    if (ZoomControl) {
+      map.addControl(new window.BMapGL.ZoomControl());
+    }
+    // 添加城市列表控件
+    if (CityListControl) {
+      map.addControl(new window.BMapGL.CityListControl());
+    }
+    // 添加定位控件
+    if (LocationControl) {
+      map.addControl(new window.BMapGL.LocationControl());
+    }
+  }, [map, config.props]);
+
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+  return visible && <div id={mapId} style={config.style} data-id={id} data-type={type}></div>;
+};
+export default forwardRef(MBMap);
diff --git a/packages/editor/src/packages/Map/BMap/Schema.ts b/packages/editor/src/packages/Map/BMap/Schema.ts
@@ -0,0 +1,119 @@
+/**
+ * 组件配置和属性值
+ */
+
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '基础配置',
+      name: 'basic',
+    },
+    {
+      type: 'Input',
+      label: '中心坐标',
+      name: 'cityName',
+      props: {
+        placeholder: '城市或者经纬度,eg: 116.403795,39.914286',
+      },
+      tooltip: '输入经纬度时，逗号分割，纬度在前，经度在后',
+    },
+    {
+      type: 'Slider',
+      label: '缩放等级',
+      name: 'zoom',
+      props: {
+        min: 1,
+        max: 18,
+        step: 1,
+      },
+    },
+    {
+      type: 'Switch',
+      label: '滚轮缩放',
+      name: 'wheelZoom',
+    },
+    {
+      type: 'InputNumber',
+      label: '旋转角度',
+      name: 'rotateAngle',
+    },
+    {
+      type: 'InputNumber',
+      label: '倾斜角度',
+      name: 'tiltAngle',
+    },
+    {
+      type: 'Select',
+      label: '地图模式',
+      name: 'mapType',
+      props: {
+        options: [
+          { value: 'BMAP_NORMAL_MAP', label: '标准地图' },
+          { value: 'BMAP_EARTH_MAP', label: '地球模式' },
+          { value: 'BMAP_SATELLITE_MAP', label: '卫星地图' },
+        ],
+      },
+    },
+    {
+      type: 'Title',
+      label: '控件配置',
+      name: 'controls',
+    },
+    {
+      type: 'Switch',
+      label: '比例尺',
+      name: 'ScaleControl',
+    },
+    {
+      type: 'Switch',
+      label: '缩放控件',
+      name: 'ZoomControl',
+    },
+    {
+      type: 'Switch',
+      label: '城市控件',
+      name: 'CityListControl',
+    },
+    {
+      type: 'Switch',
+      label: '定位控件',
+      name: 'LocationControl',
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      cityName: '北京市',
+      zoom: 15,
+      wheelZoom: true,
+      mapType: 'BMAP_NORMAL_MAP',
+      ScaleControl: true,
+      ZoomControl: true,
+      CityListControl: true,
+      LocationControl: true,
+    },
+    style: {
+      border: '3px solid #7d33ff',
+      width: '100%',
+      height: '600px',
+    },
+    events: [],
+    api: {},
+    source: '',
+  },
+  // 组件事件
+  events: [
+    {
+      value: 'onLoaded',
+      name: '加载完成事件',
+    },
+    {
+      value: 'onClick',
+      name: '地图单机事件',
+    },
+  ],
+  // 组件接口
+  api: {},
+};
diff --git a/packages/editor/src/packages/Map/BMap/index.ts b/packages/editor/src/packages/Map/BMap/index.ts
@@ -0,0 +1,2 @@
+export { default as BMap } from './BMap';
+export { default as BMapConfig } from './Schema';
diff --git a/packages/editor/src/packages/index.tsx b/packages/editor/src/packages/index.tsx
@@ -7,5 +7,6 @@ export * from './EChart';
 export * from './Functional';
 export * from './Basic';
 export * from './FeedBack';
+export { BMap, BMapConfig } from './Map/BMap';
 export { IFrame, IFrameConfig } from './IFrame';
 import './index.less';
diff --git a/packages/editor/src/packages/utils/util.ts b/packages/editor/src/packages/utils/util.ts
@@ -213,7 +213,6 @@ export function renderFormula(formula: string, eventParams: any = {}) {
     const pageStore = usePageStore.getState().page;
     const formData = cloneDeep(pageStore.formData || {});
     originIds.forEach((id: string) => {
-      fnParams.push(id);
       // 如果绑定的是表单项，则通过Form实例对象获取对应表单值
       const formValues = pageStore.formData?.[id] || {};
       if (!formData?.id) {
@@ -375,6 +374,23 @@ export const loadStyle = (id: string, src: string) => {
   });
 };
 
+/**
+ * 动态加载JS，主要用于解决不常用的JS包，防止影响整体性能，比如抖音和快手
+ * @param src
+ * @returns Promise
+ */
+export const loadScript = (src: string) => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    // script.defer = true;
+    script.onload = resolve;
+    script.onerror = reject;
+    script.src = src;
+    document.head.append(script);
+  });
+};
+
 /**
  * 获取环境变量
  * 1. vanEnv 当前项目环境

diff --git a/packages/materials/Map/BMap/BMap.tsx b/packages/materials/Map/BMap/BMap.tsx
@@ -0,0 +1,91 @@
+import { ComponentType } from '../../types';
+import { createId, isNotEmpty } from '../../utils/util';
+import { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
+
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MBMap = ({ config, onLoaded, onClick }: ComponentType, ref: any) => {
+  const [visible, setVisible] = useState(true);
+  const [mapId, setMapId] = useState('');
+  const [map, setMap] = useState<any>(null);
+  useEffect(() => {
+    setMapId(createId('BMap'));
+  }, []);
+
+  useEffect(() => {
+    if (!mapId) return;
+    const map = new window.BMapGL.Map(mapId);
+    const point = new window.BMapGL.Point(116.404, 39.915);
+    map.centerAndZoom(point, config.props.zoom || 15);
+    map.addEventListener('tilesloaded', function () {
+      onLoaded?.();
+    });
+    map.addEventListener('click', function ({ latlng: { lat, lng } }: any) {
+      onClick?.({
+        lat,
+        lng,
+      });
+    });
+    setMap(map);
+  }, [mapId]);
+
+  useEffect(() => {
+    if (!mapId || !map) return;
+    const { cityName, zoom, wheelZoom, rotateAngle, tiltAngle, mapType, ScaleControl, ZoomControl, CityListControl, LocationControl } = config.props;
+    // 设置当前城市
+    if (cityName.trim()) {
+      const [lat, lng] = cityName.split(',');
+      if (lat && lng) {
+        map.centerAndZoom(new window.BMapGL.Point(lat, lng), zoom || 15);
+      } else {
+        map.centerAndZoom(cityName, zoom || 15);
+      }
+    }
+    // 设置地图是否允许滚轮缩放
+    map.enableScrollWheelZoom(wheelZoom);
+    // 设置地图旋转角度
+    if (isNotEmpty(rotateAngle)) {
+      map.setHeading(rotateAngle);
+    }
+    // 设置地图倾斜角度
+    if (isNotEmpty(tiltAngle)) {
+      map.setTilt(tiltAngle);
+    }
+    // 设置地图类型
+    map.setMapType(window[mapType]);
+    // 添加比例尺控件
+    if (ScaleControl) {
+      map.addControl(new window.BMapGL.ScaleControl());
+    }
+    // 添加缩放控件
+    if (ZoomControl) {
+      map.addControl(new window.BMapGL.ZoomControl());
+    }
+    // 添加城市列表控件
+    if (CityListControl) {
+      map.addControl(new window.BMapGL.CityListControl());
+    }
+    // 添加定位控件
+    if (LocationControl) {
+      map.addControl(new window.BMapGL.LocationControl());
+    }
+  }, [map, config.props]);
+
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+  return visible && <div id={mapId} style={config.style}></div>;
+};
+export default forwardRef(MBMap);
diff --git a/packages/materials/Map/BMap/index.ts b/packages/materials/Map/BMap/index.ts
@@ -0,0 +1 @@
+export { default as BMap } from './BMap';