使用蜂鸟地图完成楼层自定义、房间着色、热力图、添加图片覆盖物、添加dom覆盖物、定位到固定区域的中心点

news2024/11/16 7:24:49

项目里有用到蜂鸟地图的地方，虽然有跟她们对接，但看他们文档也挺费劲的，要自己慢慢研究好久，有些实在研究不出来让他们帮忙看代码发现一些问题，所以把我发现的需要注意的一些点发上来，希望可以帮助到部分有需要的同学~

在这里插入图片描述
在这里插入图片描述

1.map不能生命周期中，因为添加了dom覆盖物（这个覆盖物比较特殊）之后，想在某个方法中清理掉是找不到这个覆盖物的，所以需要将map放在全局变量中~

let imageMarkers, imageStatusMarkers, mapMarkers, analyser, mask, myMarker, mymap;

const fengniaomap= () => {
	……
}

2.当添加多个图片覆盖物的时候，需要有多个覆盖物变量，虽然覆盖物是全部放到数组里面的，但是也是需要放到不同的覆盖物里面的，这样才可以清除成功，或者重要渲染成功~

 // 添加覆盖物
  const addImgMarker = (data, mapObj) => {
    // if (imageMarkers) {
    //   imageMarkers.forEach((item) => {
    //     item.remove();
    //   });
    //   imageMarkers = null;
    // }

    let url = '/images/marker.png';

    imageMarkers = data.map((feature) => {
      var marker = new fengmap.FMImageMarker({
        url: url,
        x: feature.x,
        y: feature.y,
        anchor: fengmap.FMMarkerAnchor.BOTTOM,
        collision: false,
      });
      var floor = mapObj.getFloor(feature.level);
      marker.addTo(floor);
      return marker;
    });


  };

  // 添加覆盖物
  const addImgStatusMarker = (data, mapObj) => {
    // if (imageStatusMarkers) {
    //   imageStatusMarkers.forEach((item) => {
    //     item.remove();
    //   });
    //   imageStatusMarkers = null;
    // }

    let url = '/images/roomstatus.png';

    imageStatusMarkers = data.map((feature) => {
      var marker = new fengmap.FMImageMarker({
        url: url,
        x: feature.x,
        y: feature.y,
        anchor: fengmap.FMMarkerAnchor.BOTTOM,
        collision: false,
      });
      var floor = mapObj.getFloor(feature.level);
      marker.addTo(floor);
      return marker;
    });
  };


 // 去掉覆盖物
  const remodeMarker = () => {
      if (myMarker) {
        myMarker.remove();
        myMarker = null;
      }
      if (imageMarkers) {
        imageMarkers.forEach((item) => {
          item.remove();
        });
        imageMarkers = null;
      }
      if (imageStatusMarkers) {
        imageStatusMarkers.forEach((item) => {
          item.remove();
        });
        imageStatusMarkers = null;
      }
    }
  };

3.地板着色需要先存储model，然后再进行着色，不然找不到~

   
    // 服务端数据与地图数据绑定
    node?.value?.forEach((item, index) => {
      let res = search(mapObj, { FID: item.fid });

      if (item.status) {
        markerStatusData.push(res[0])
      } else {
        markerData.push(res[0]);
      }

      // 获取诊区坐标
      let coordinates = res[0]?.coordinates[0];
      if (coordinates) {
        // addMapMask(coordinates, index, mapMask, mapObj)
        coordinatesList.push(coordinates);
      }

      // 存储models
      res.forEach((item) => {
        models[item.FID] = item;
      });
      setLastModelData(models);

    });


    //  渲染对应业务数据的model颜色
    node?.value?.forEach((item) => {
      if (item.status) {
        models[item.fid]?.setColor('#D5EDDF', 0.5);
      } else {
        models[item.fid]?.setColor('#E8D29F', 0.5);
      }
    });

	// 如果要渲染热力图，也是使用model着色展示的
         // data?.forEach((item) => {
           // if (item.count >= 0 && item.count <= 10) {
             // models[item.fid]?.setColor('#3D7199', 0.5);
           // } else if (item.count > 10 && item.count <= 20) {
             // models[item.fid]?.setColor('#3685B2', 0.5);
           // } else if (item.count > 20 && item.count <= 30) {
             // models[item.fid]?.setColor('#299BCC', 0.5);
           // } else if (item.count > 30 && item.count <= 40) {
            //  models[item.fid]?.setColor('#17B5E5', 0.5);
          //  } else {
             // models[item.fid]?.setColor('#00D5FF', 0.5);
           // }
         // });

4.点击图片覆盖物的时候，需要出现一个dom窗口展示信息，此窗口为dom覆盖物实现，这里我试过直接给dom覆盖物写onclick方法，不太好使，然后map的所有事件覆盖物都可以用，所以我使用了map事件为图片添加单击事件

        mymap.on('click', (e) => {
          var { targets } = e;
          // console.log('targets=========', targets);
          // 点击除marker外其他地方
          if (myMarker) {
            myMarker.remove();
            myMarker = null;
          }

          let imageClick = false,
            imageTarget,
            floorTarget = [];
          targets.forEach((item) => {
            // 表示点击的image覆盖物，
            if (item.type === 8) {
              imageClick = true;
              imageTarget = item;
            }
          });

          // 如果点击的位置覆盖物,
          if (imageClick) {
            targets.forEach((item) => {
              // 存储地板信息，以便从融合数据中取出相关数据
              if (item.type === 4096) {
                floorTarget.push(item.FID);
              }
            });

            // 查询当前点击元素对应的业务数据
            if (floorTarget && floorTarget.length) {
              roomInfo({
                fids: floorTarget.join(','),
              }).then((res) => {
                if (res?.code === 0 && res?.data) {
                  // 页面只显示一个信息窗marker
                  if (myMarker) {
                    myMarker.remove();
                    myMarker = null;
                  }
                  addPopInfoWindow(imageTarget, res?.data);
                }
              });
            }
          }
        });
        
        //添加FMDomMarker
        const addPopInfoWindow = (marker, data) => {
          var windowHtml;
          var coord = {
            x: 11791544.515983218,
            y: 3418827.0068916455,
          };
          if (marker) {
            coord = {
              x: marker.x,
              y: marker.y,
            };
              windowHtml = `
              <div class="fm-control-popmarker">
                <div class="popcontent">
                  <div class="item">
                    <div class="title">房间</div>
                    <div class="content">${data[0].roomNo}</div>
                  </div>
                  <div class="item">
                    <div class="title">诊位</div>
                    <div class="content">${data[0].roomName}</div>
                  </div>  
                  <div class="item">
                    <div class="title fw500">专业</div>
                    <div class="content fw500">${data[0].majorName}</div>
                  </div> 
                  <div class="item">
                    <div class="title fw500">医生</div>
                    <div class="content fw500">${data[0].doctorName}</div>
                  </div>
                </div>
              </div>
              `;
    
          }
          myMarker = new fengmap.FMDomMarker({
            x: coord.x,
            y: coord.y,
            content: windowHtml,
          });
          var level = mymap.getLevel();
          var floor = mymap.getFloor(level);
          myMarker.addTo(floor);
        };

5.使用的tree树形组件完成的自定义楼层组件，服务端返回每个楼层对应的房间地板id，点击后获取当前id以及相关房间信息，进行展示……

const onCheck = (checkedKeys, e) => {
        if (myMarker) {
            myMarker.remove();
            myMarker = null;
        }
        console.log('checkedKeys, info', checkedKeys, e);
        setselectkey();
        setselectkey(checkedKeys);
        setselectInfo(e.node)
        setDataSource([]);

        // setSelectInfo(info);

        //  设置聚焦楼层
        let level = e.node.level;
        if (!level) {
            return;
        }
        mymap.setLevel({
            level: Number(e.node.level),
            finish: () => {
                toggleLayer(mymap, 'LABLE');
                toggleLayer(mymap, 'FACILITY');

                // 只有诊室才跳转
                if (e.node.flag === 2) {
                    handleCenterShow(mymap, e.node);
                }
            },
        });
    };

6.定位到区域中心点，区域是由多个房间组成的，把所有房间的中心点相加再除以数量，就可以计算出整体的中心点了

// 点击定位到中心点
const handleCenter = (mapObj, fidlists) => {
    if (!fidlists) {
        return;
    }
    let boundList = [];
    fidlists.forEach((fid) => {
        let searchRes = search(mapObj, { FID: fid });
        searchRes?.forEach((ele) => {
            boundList.push([ele.x, ele.y]);
        });
    });
    const center = findCenter(boundList);
    // mapObj.setCenter({ x: 12857436.062710293, y: 4710362.9075});
    mapObj.setCenter({ x: center.x, y: center.y });
};

// 获得中心坐标
const findCenter = (markers) => {
    let x = 0;
    let y = 0;

    for (let i = 0; i < markers.length; ++i) {
        x += markers[i][0];
        y += markers[i][1];
    }

    x /= markers.length;
    y /= markers.length;

    return { x: x, y: y };
};

然后其他的就是一些基本的配置了~ 代码我全部放在这里，大家有问题评论区给我留言吧~

import { useEffect, useState } from 'react';

import 'fengmap/build/fengmap.analyser.min'; //分析器
import fengmap from 'fengmap/build/fengmap.map.min'; //核心包
import { transData } from '@/assets/js/tool.js';

import Icon from '@/components/DTIIcon/DTIIcon';

import { areaTree, roomInfo } from '@/api/project';


let imageMarkers, imageStatusMarkers, mapMarkers, analyser, mask, myMarker, mymap;

const DiagnosisSpace = () => {
    const [activeTab, setActiveTab] = useState(tabOptions[0].id); // 当前选中tab
    const [activeDate, setActiveDate] = useState(dateTabOptions[0].id); // 当前选中tab

    const [selectkey, setselectkey] = useState([]); // 树高亮
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    const [treeData, setTreeData] = useState([]);
    const [availableRooms, setAvailableRooms] = useState([]);
    const [columns, setColumns] = useState([]);
    const [dataSource, setDataSource] = useState([]);
    const [lastLevelData, setLastLevelData] = useState([]);
    const [lastModelData, setLastModelData] = useState([]);
    const [featureTab, setFeatureTab] = useState(false);
    const [selectInfo, setselectInfo] = useState({})

    let maskOptions = {
        // 拉伸高度，默认为+∞，表示掩膜垂直方向上的厚度；
        extrudeHeight: 100,
        // 离地高度, 默认为-∞，表示掩膜垂直方向上距离地面的起始高度
        height: -2,
        // 需要参与掩膜的Layer，如[fengmap.FMType.MODEL_LAYER, fengmap.FMType.FACILITY_LAYER, fengmap.FMType.LABEL_LAYER, fengmap.FMType.EXTERNAL_MODEL_LAYER, fengmap.FMType.EXTENT_LAYER]
        types: [
            fengmap.FMType.MODEL_LAYER,
            fengmap.FMType.FACILITY_LAYER,
            fengmap.FMType.LABEL_LAYER,
            fengmap.FMType.EXTERNAL_MODEL_LAYER,
            // fengmap.FMType.EXTENT_LAYER,
        ],
        //掩膜区域内部还是外部，取值'inside'或'outside'，默认为'inside'
        showRegion: 'inside',
    };


    function findNodeByValue(tree, title) {
        for (let node of tree) {
            if (node.title === title) {
                return [node]
            }
            if (node.children) {
                const result = findNodeByValue(node.children, title)
                if (result) {
                    return [node, ...result]
                }
            }
        }
        return null
    }



    useEffect(() => {
        // 楼层层级信息
        let level = 1,
            defaultInfo;

        // 左侧楼层切换
        areaTree().then((res) => {
            if (res?.code === 0 && res?.data) {
                let data = _.cloneDeep(transData(res?.data, 'key', 'pid', 'children'));

                setTreeData(data);
                const result = findNodeByValue(data, '内科专科')
                defaultInfo = result[2];
                setExpandedKeys([result[0].key, result[1].key]);
                // defaultInfo = data[0].children[0].children[0];
                // setExpandedKeys([data[0].key, data[0].children[0].key]);
                level = Number(defaultInfo.level);
                setselectkey([defaultInfo.key]);
                setselectInfo(defaultInfo)


                const mapOptions = {
                    appName: 'daozhen',
                    key: 'dcefb32e9830e6148e9b6554ec25d8ab',
                    mapID: '1749352967085703169',
                    container: document.getElementById('fengmap'),
                    // mapURL与themeURL不可以编译打包，需存放在静态文件夹下
                    mapURL: '/data/',
                    themeURL: '/data/theme/',
                    themeID: '1750086376946995201',
                    // visibleLevels: [1, 2],
                    // level: 1,
                    backgroundColor: '#FFFFFF',
                    // 高精度模型时添加此属性，但目前有些问题
                    // externalModelURL:'./data/theme/1750086376946995201',
                    // 使用案例数据时添加此属性让地图正常显示
                    mapZoom: 21,
                    zoomRange: [10, 25],
                    // highlightColor: []
                    // rotation:50,
                    // tiltAngle: 60,
                    // maxTiltAngle:70,
                    // minTiltAngle:40
                };

                mymap = new fengmap.FMMap(mapOptions);


                // console.log('fengmap.FMType', fengmap.FMType);
                // label显示ename字段
                // console.log('label显示ename字段', fengmap.FMLabelField.ENAME);
                // label显示FID字段
                // console.log('label显示FID字段', fengmap.FMLabelField.FID);
                // FMModel 模型对象显示FID字段
                // console.log('FMModel 模型对象显示FID字段', mymap.FID);

                // 对地图的拖拽、缩放、旋转等操作控制
                let interacation = mymap.getInteractions();
                interacation.enableDrag = false;
                interacation.enableRotate = false;
                interacation.enableTilt = false;
                interacation.enableZoom = false;

                //过滤不允许点击的地图元素，设置为true为允许点击，设置为false为不允许点击
                mymap.pickFilterFunction = function (event) {
                    return (
                        event.type == fengmap.FMType.IMAGE_MARKER || event.type == fengmap.FMType.MODEL
                        // || event.type === fengmap.FMType.EXTERNAL_MODEL
                    );
                };

                // 获取地图对应的key
                const getKeyByValue = (obj, value) => {
                    const result = Object.entries(obj).find(([key, val]) => val === value);
                    return result ? result[0] : null;
                };

                /* 鼠标悬停事件监听 */
                mymap.on('hover', function (event) {
                    // updateUI(event);
                });
                /* 更新拾取信息 */
                const updateUI = (event) => {
                    // 拾取模型对象
                    let target = event.targets[0];
                    // 拾取模型类型
                    let mType = getKeyByValue(fengmap.FMType, target?.type) || 'NONE';
                    // 封装拾取信息
                    let infoHtml = '<div class="layui-card-body">';
                    infoHtml += `<p><label>事件触发：</label>${event.type}</p>`;
                    infoHtml += `<p><label>悬停对象类：</label>${mType}</p>`;
                    infoHtml += `<p><label>level：</label>${event?.level || ''}</p>`;
                    infoHtml += `<p><label>FID：</label>${target?.FID || ''}</p>`;
                    infoHtml += `<p><label>type：</label>${target?.type || ''}</p>`;

                    infoHtml += `<p><label>元素中心点坐标：</label>x：${target?.x || ''}<br/>y：${target?.y || ''
                        }</p>`;
                    infoHtml += `</div>`;
                    let infoDiv = document.getElementById('info');
                    infoDiv.innerHTML = infoHtml;
                };

                // 地图加载完成事件
                mymap.on('loaded', function (e) {
                    initAnalyser(() => {
                        //  设置聚焦楼层
                        if (level) {
                            mymap.setLevel({
                                level: level,
                                finish: () => {
                                    toggleLayer(mymap, 'LABLE');
                                    toggleLayer(mymap, 'FACILITY');

                                    // 只有诊室才跳转
                                    if (activeTab === 'today') {
                                        handleCenterShow(mymap, defaultInfo);
                                    } else {
                                        getAreaCount(defaultInfo.key, activeDate);
                                    }
                                },
                            });
                        }
                    });
                });

                mymap.on('click', (e) => {
                    var { targets } = e;
                    // console.log('targets=========', targets);
                    // 点击除marker外其他地方
                    if (myMarker) {
                        myMarker.remove();
                        myMarker = null;
                    }

                    let imageClick = false,
                        imageTarget,
                        floorTarget = [];
                    targets.forEach((item) => {
                        // 表示点击的image覆盖物，
                        if (item.type === 8) {
                            imageClick = true;
                            imageTarget = item;
                        }
                    });

                    // 如果点击的位置覆盖物
                    if (imageClick) {
                        targets.forEach((item) => {
                            // 存储地板信息，以便从融合数据中取出相关数据
                            if (item.type === 4096) {
                                floorTarget.push(item.FID);
                            }
                        });

                        // 查询当前点击元素对应的业务数据
                        if (floorTarget && floorTarget.length) {
                            roomInfo({
                                fids: floorTarget.join(','),
                            }).then((res) => {
                                if (res?.code === 0 && res?.data) {
                                    // 页面只显示一个信息窗marker
                                    if (myMarker) {
                                        myMarker.remove();
                                        myMarker = null;
                                    }
                                    addPopInfoWindow(imageTarget, res?.data);
                                }
                            });
                        }
                    }
                });

                //添加FMDomMarker
                const addPopInfoWindow = (marker, data) => {
                    var windowHtml;
                    var coord = {
                        x: 11791544.515983218,
                        y: 3418827.0068916455,
                    };
                    if (marker) {
                        coord = {
                            x: marker.x,
                            y: marker.y,
                        };
                        windowHtml = `
              <div class="fm-control-popmarker">
                <div class="popcontent">
                  <div class="item">
                    <div class="title">房间</div>
                    <div class="content">${data[0].roomNo}</div>
                  </div>
                  <div class="item">
                    <div class="title">诊位</div>
                    <div class="content">${data[0].roomName}</div>
                  </div>  
                  <div class="item">
                    <div class="title fw500">专业</div>
                    <div class="content fw500">${data[0].majorName}</div>
                  </div> 
                  <div class="item">
                    <div class="title fw500">医生</div>
                    <div class="content fw500">${data[0].doctorName}</div>
                  </div>
                </div>
              </div>
              `;

                    }
                    myMarker = new fengmap.FMDomMarker({
                        x: coord.x,
                        y: coord.y,
                        content: windowHtml,
                    });
                    var level = mymap.getLevel();
                    var floor = mymap.getFloor(level);
                    myMarker.addTo(floor);
                };

                // 初始化分析器，所有初始化事件都要放在这里才可以执行
                const initAnalyser = (callback) => {
                    analyser = new fengmap.FMSearchAnalyser(
                        {
                            map: mymap,
                        },
                        () => {
                            callback && callback();
                        },
                    );
                };
            }
        });
    }, []);

    // 节点展开
    const onExpand = (newExpandedKeys) => {
        setExpandedKeys(newExpandedKeys);
        setAutoExpandParent(false);
    };

    // 自定义左侧tree节点展示
    const treeTitleRender = (nodeData) => {
        return (
            <div
                className={classnames('treeitem', {
                    'treeitem-disabled': nodeData.disabled,
                })}
            >
                <span className="tree_item_title">{nodeData.title}</span>
            </div>
        );
    };

    // 自定义Tree展开收起Icon
    const switcherIconRender = ({ expanded }) => {
        if (expanded) {
            return <Icon className="expend-icon" type="icon-shuzi-tiaomushouqi" />;
        } else {
            return <Icon className="expend-icon" type="icon-shuzi-tiaomuzhankai" />;
        }
    };

    // 图层控制
    const getLayerByType = (floor, layerType) => {
        var layers = floor.getLayers();
        for (var index = 0; index < layers.length; index++) {
            const layer = layers[index];
            if (layer.type === layerType) {
                return layer;
            }
        }
    };

    const toggleLayer = (mapObj, layerName) => {
        let layer;
        mapObj.getVisibleLevels().forEach((level) => {
            let floor = mapObj.getFloor(level);

            if (layerName === 'LABLE') {
                layer = getLayerByType(floor, fengmap.FMType.LABEL_LAYER);
            }
            if (layerName === 'EXTENT') {
                layer = getLayerByType(floor, fengmap.FMType.EXTENT_LAYER);
            }
            if (layerName === 'MODEL') {
                layer = getLayerByType(floor, fengmap.FMType.MODEL_LAYER);
            }
            if (layerName === 'FACILITY') {
                layer = getLayerByType(floor, fengmap.FMType.FACILITY_LAYER);
            }
            if (layerName === 'EXTERNALMODEL') {
                layer = getLayerByType(floor, fengmap.FMType.EXTERNAL_MODEL_LAYER);
            }
            layer.visible = false;
        });
    };

    // 点击左侧楼层控件事件
    const onCheck = (checkedKeys, e) => {
        if (myMarker) {
            myMarker.remove();
            myMarker = null;
        }
        console.log('checkedKeys, info', checkedKeys, e);
        setselectkey();
        setselectkey(checkedKeys);
        setselectInfo(e.node)
        setDataSource([]);

        // setSelectInfo(info);

        //  设置聚焦楼层
        let level = e.node.level;
        if (!level) {
            return;
        }
        mymap.setLevel({
            level: Number(e.node.level),
            finish: () => {
                toggleLayer(mymap, 'LABLE');
                toggleLayer(mymap, 'FACILITY');

                // 只有诊室才跳转
                if (e.node.flag === 2) {
                    handleCenterShow(mymap, e.node);
                }
            },
        });
    };

    // 构建查询器
    const search = (mapObj, params) => {
        let analyser = new fengmap.FMSearchAnalyser({
            map: mapObj,
        });
        //创建查询实体对象
        let searchRequest = new fengmap.FMSearchRequest();
        //配置levels参数
        if (params.levels) {
            searchRequest.levels = params.levels;
        }
        if (params.level) {
            searchRequest.levels = [params.level];
        }
        if (params.FID) {
            searchRequest.addCondition({ FID: params.FID });
        }
        //配置nodeType参数
        searchRequest.type = params.nodeType ? params.nodeType : fengmap.FMType.MODEL;
        //获取搜索结果
        let sortRes = [];
        analyser.query(searchRequest, (result) => {
            sortRes = mapObj?.getNodes(result); //获取地图对象
        });
        return sortRes;
    };

    const handleCenterShow = (mapObj, node) => {
        // 定义存放颜色更改的fid集合
        let models = {};
        let markerData = [], markerStatusData = [],
            coordinatesList = [];


        if (node?.value?.length) {
            setLastLevelData(node?.value);
        } else {
            models = lastModelData;
            lastLevelData.forEach((item) => {
                if (item.status) {
                    models[item.fid]?.setColor('#D5EDDF', 0.5);
                } else {
                    models[item.fid]?.setColor('E8D29F', 0.5);
                }
            });
        }

        // 把地图定位到中心坐标点
        if (node?.value.length) {
            let fids = node?.value?.map((item) => item.fid);
            handleCenter(mapObj, fids);
        }

        // 服务端数据与地图数据绑定
        node?.value?.forEach((item, index) => {
            let res = search(mapObj, { FID: item.fid });

            if (item.status) {
                markerStatusData.push(res[0])
            } else {
                markerData.push(res[0]);
            }

            // 获取诊区坐标
            let coordinates = res[0]?.coordinates[0];
            if (coordinates) {
                // addMapMask(coordinates, index, mapMask, mapObj)
                coordinatesList.push(coordinates);
            }

            // 存储models
            res.forEach((item) => {
                models[item.FID] = item;
            });
            setLastModelData(models);

        });


        //  渲染对应业务数据的model颜色
        node?.value?.forEach((item) => {
            if (item.status) {
                models[item.fid]?.setColor('#D5EDDF', 0.5);
            } else {
                models[item.fid]?.setColor('#E8D29F', 0.5);
            }
        });

        // 不可用状态，添加覆盖物
        addImgMarker(markerData, mapObj);
        // 可用状态-添加覆盖物
        addImgStatusMarker(markerStatusData, mapObj);

        // addMapMask(coordinatesList, mapObj)

    };

    // 添加覆盖物
    const addImgMarker = (data, mapObj) => {
        // if (imageMarkers) {
        //   imageMarkers.forEach((item) => {
        //     item.remove();
        //   });
        //   imageMarkers = null;
        // }

        let url = '/images/marker.png';

        imageMarkers = data.map((feature) => {
            var marker = new fengmap.FMImageMarker({
                url: url,
                x: feature.x,
                y: feature.y,
                anchor: fengmap.FMMarkerAnchor.BOTTOM,
                collision: false,
            });
            var floor = mapObj.getFloor(feature.level);
            marker.addTo(floor);
            return marker;
        });


    };

    // 添加覆盖物
    const addImgStatusMarker = (data, mapObj) => {
        // if (imageStatusMarkers) {
        //   imageStatusMarkers.forEach((item) => {
        //     item.remove();
        //   });
        //   imageStatusMarkers = null;
        // }

        let url = '/images/roomstatus.png';

        imageStatusMarkers = data.map((feature) => {
            var marker = new fengmap.FMImageMarker({
                url: url,
                x: feature.x,
                y: feature.y,
                anchor: fengmap.FMMarkerAnchor.BOTTOM,
                collision: false,
            });
            var floor = mapObj.getFloor(feature.level);
            marker.addTo(floor);
            return marker;
        });
    };

    //添加区域掩膜
    const addMapMask = (data, mapObj) => {
        if (mapMarkers) {
            mapMarkers.forEach((item) => {
                item.remove();
            });
            mapMarkers = null;
        }
        if (mapObj) {
            mapMarkers = data.map((points) => {
                var mask = new fengmap.FMMapMask({
                    // 坐标点数组
                    points: points,
                    ...maskOptions,
                });
                var floor = mapObj.getFloor(mapObj.getLevel());
                mask.addTo(floor);
                return mask;
            });
        }
    };

    // 去掉覆盖物
    const remodeMarker = () => {
        if (myMarker) {
            myMarker.remove();
            myMarker = null;
        }
        if (imageMarkers) {
            imageMarkers.forEach((item) => {
                item.remove();
            });
            imageMarkers = null;
        }
        if (imageStatusMarkers) {
            imageStatusMarkers.forEach((item) => {
                item.remove();
            });
            imageStatusMarkers = null;
        }
    }
};


// 点击定位到中心点
const handleCenter = (mapObj, fidlists) => {
    if (!fidlists) {
        return;
    }
    let boundList = [];
    fidlists.forEach((fid) => {
        let searchRes = search(mapObj, { FID: fid });
        searchRes?.forEach((ele) => {
            boundList.push([ele.x, ele.y]);
        });
    });
    const center = findCenter(boundList);
    // mapObj.setCenter({ x: 12857436.062710293, y: 4710362.9075});
    mapObj.setCenter({ x: center.x, y: center.y });
};

// 获得中心坐标
const findCenter = (markers) => {
    let x = 0;
    let y = 0;

    for (let i = 0; i < markers.length; ++i) {
        x += markers[i][0];
        y += markers[i][1];
    }

    x /= markers.length;
    y /= markers.length;

    return { x: x, y: y };
};

return (
    <div className={styles.container}>
        <div className="treelist" id="treelist">
            {treeData.length > 0 && (
                <Tree
                    onExpand={onExpand}
                    expandedKeys={expandedKeys}
                    autoExpandParent={autoExpandParent}
                    treeData={treeData}
                    titleRender={treeTitleRender}
                    selectedKeys={selectkey}
                    onSelect={onCheck}
                    switcherIcon={switcherIconRender}
                    defaultExpandAll={true}
                    showLine={false}
                />
            )}
        </div>
        <div
            className={classnames('fengmap', { map: activeTab === 'fueature' })}
            id="fengmap"
        ></div>
    </div>
);
};

export default DiagnosisSpace;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1526824.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深入探讨ChatGPT：技术突破与应用前景

深入探讨ChatGPT：技术突破与应用前景

目录 一、ChatGPT究竟是什么&#xff1f; 二、ChatGPT的发展脉络 三、ChatGPT的突出优势 强大的语言生成能力 多场景适应性 多语言处理能力 广泛的应用范围 数据敏感性的重视 四、结语&#xff1a;ChatGPT的未来与挑战 Tips&#xff1a;国内的ChatGPT ⭐ 点击进入Chat…
阅读更多...
【GIS系列】GeoTools简介及工具类分享

【GIS系列】GeoTools简介及工具类分享

本文将对GeoTools相关概念进行介绍&#xff0c;同时会给大家分享我工作中用到的工具类及使用方法。 作者&#xff1a;后端小肥肠 目录 1.前言 2. GeoTools简介 3. Geotools使用示例 3.1. 开发环境搭建 3.1.1. 所需版本和工具 3.1.2. pom依赖​​​​​​​ 4. 工具类介绍…
阅读更多...
为什么不用 index 做 key 引出的 Diff 算法

为什么不用 index 做 key 引出的 Diff 算法

文章目录 问题分析 问题 大家耳熟能详的最常见的问题就是 为什么不用 index 做 key &#xff0c;在刚开始学习的时候&#xff0c;只是知道在 v-for 做循环遍历的时候需要加上唯一标识 key&#xff0c;但好像都是这么写的 v-for"(item,index) in dictList" :key"…
阅读更多...
IT系统可观测性

IT系统可观测性

什么是可观测性 可观测性&#xff08;Observability&#xff09;是指能够从系统的外部输出推断出系统内部状态的能力。在IT和云计算领域&#xff0c;它涉及使用软件工具和实践来收集、关联和分析分布式应用程序以及运行这些应用程序的硬件和网络产生的性能数据流。这样做可以更…
阅读更多...
数据分析-Pandas序列时间移动窗口化操作

数据分析-Pandas序列时间移动窗口化操作

数据分析-Pandas序列时间移动窗口化操作 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…
阅读更多...
【考研数学】全年保姆级规划+资料选择

【考研数学】全年保姆级规划+资料选择

直接跟考研课学即可 跟宋浩学第一遍说是基础&#xff0c;但宋浩的课程毕竟针对的是大学期末考试&#xff0c;基础知识方面讲的可能没有考研课程全面&#xff0c;毕竟大学课程的授课时间和考核要求不同于考研。 备考之前对自己做一个评估&#xff0c;每一个要准备的科目和其中…
阅读更多...
代码随想录 动态规划-0-1背包问题

代码随想录 动态规划-0-1背包问题

目录 标准0-1背包问题 二维dp数组01背包 一维dp数组01背包&#xff08;滚动数组&#xff09; 416.分割等和子集 1049.最后一块石头的重量|| 494.目标和 474.一和零 背包问题的分类 标准0-1背包问题 46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; 时间限制…
阅读更多...
超越传统的极限：解密B树与B+树的数据结构之美！

超越传统的极限：解密B树与B+树的数据结构之美！

超越传统的极限&#xff1a;解密B树与B树的数据结构之美&#xff01; B树和B树是在计算机科学中常用的平衡查找树数据结构&#xff0c;它们在处理大规模数据和磁盘存储方面具有重要的优势。本文将深入介绍B树和B树的基本概念、特点以及它们在数据库和文件系统中的应用&#xff…
阅读更多...
【德语常识】分类单词

【德语常识】分类单词

【德语常识】分类单词 一&#xff0c;Colors二&#xff0c;Countries & Languages三&#xff0c; 一&#xff0c;Colors 二&#xff0c;Countries & Languages 三&#xff0c;
阅读更多...
JNDI注入原理及利用IDEA漏洞复现

JNDI注入原理及利用IDEA漏洞复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…
阅读更多...
VMware虚拟机Centos7硬盘扩容详细图文教程

VMware虚拟机Centos7硬盘扩容详细图文教程

这里写自定义目录标题 设置扩容空间容量10G为列子开机后输入df -h 查看磁盘空间运行fdisk -l&#xff0c;查看硬盘信息运行fdisk /dev/sda输入m&#xff0c;查看n为add new partition&#xff0c;输入n输入p &#xff0c;p之后的东西都选择为默认再输入t&#xff0c;分区号根据…
阅读更多...
洛谷-P1449 后缀表达式

洛谷-P1449 后缀表达式

目录 何为后缀表达式&#xff1f; 模拟过程 AC代码 采用STL的stack 题目链接&#xff1a;P1449 后缀表达式 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 何为后缀表达式&#xff1f; 那后缀表达式是怎么算的呢 那显然就需要引用最开始说的栈了 因为后缀表表达式本来就是栈…
阅读更多...
HTML5+CSS3+JS小实例：全屏范围滑块

HTML5+CSS3+JS小实例：全屏范围滑块

实例：全屏范围滑块 技术栈：HTML+CSS+JS 效果： 源码： 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale…
阅读更多...
零延迟轻量级网站指纹防御

零延迟轻量级网站指纹防御

文章信息 论文题目&#xff1a;Zero-delay Lightweight Defenses against Website Fingerprinting 期刊&#xff08;会议&#xff09;&#xff1a; 29th USENIX Security Symposium 时间&#xff1a;2020 级别&#xff1a;CCF A 文章链接&#xff1a;https://www.usenix.org/s…
阅读更多...
PHP反序列化---字符串逃逸(增加/减少)

PHP反序列化---字符串逃逸(增加/减少)

一、PHP反序列化逃逸--增加&#xff1a; 首先分析源码&#xff1a; <?php highlight_file(__FILE__); error_reporting(0); class A{public $v1 ls;public $v2 123;public function __construct($arga,$argc){$this->v1 $arga;$this->v2 $argc;} } $a $_GET[v…
阅读更多...
一文了解如何做全基因集GSEA富集分析

一文了解如何做全基因集GSEA富集分析

原文链接：一文完成全基因集GSEA富集分析 本期内容 写在前面 我们前面分享过一文掌握单基因GSEA富集分析的教程，主要使用单基因的角度进行GSEA富集分析。 我们社群的同学咨询，全基因集的GSEA如何分析呢？？其实，原理都是大同小异的，那么今天我们就简单的整理一下吧。 若…
阅读更多...
PyTorch学习笔记之激活函数篇（二）

PyTorch学习笔记之激活函数篇（二）

文章目录 2、Tanh函数2.1 公式2.2 对应的图像2.3 对应生成图像代码2.4 优点与不足2.5 torch.tanh()函数 2、Tanh函数 2.1 公式 Tanh函数的公式&#xff1a; f ( x ) e x − e − x e x e − x f(x)\frac{e^x-e^{-x}}{e^xe^{-x}} f(x)exe−xex−e−x​ Tanh函数的导函数&am…
阅读更多...
Java实现定时发送邮件(基于Springboot工程)

Java实现定时发送邮件(基于Springboot工程)

1、功能概述&#xff1f; 1、在企业中有很多需要定时提醒的任务&#xff1a;如每天下午四点钟给第二天的值班人员发送值班消息&#xff1f;如提前一天给参与第二天会议的人员发送参会消息等。 2、这种定时提醒有很多方式如短信提醒、站内提醒等邮件提醒是其中较为方便且廉价的…
阅读更多...
旅行社旅游线路预定管理系统asp.net

旅行社旅游线路预定管理系统asp.net

旅行社旅游线路预定管理系统 首页 国内游 境外游 旅游景点 新闻资讯 酒店信息―留言板 后台管理 后台管理导航菜单系统管理修改密码留言管理注册会员管理基础数据设置国别设置有份设地区设置 旅行社管理友情链接管理添加友情链接友情链接管理新闻资讯管理添加新闻资讯新闻资讯管…
阅读更多...
10｜代理（中）：AgentExecutor究竟是怎样驱动模型和工具完成任务的？

10｜代理（中）：AgentExecutor究竟是怎样驱动模型和工具完成任务的？

LangChain 中的“代理”和“链”的差异究竟是什么&#xff1f;在链中&#xff0c;一系列操作被硬编码&#xff08;在代码中&#xff09;。在代理中&#xff0c;语言模型被用作推理引 擎来确定要采取哪些操作以及按什么顺序执行这些操作。 Agent 的关键组件 代理&#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023