|
@@ -33,13 +33,16 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
const [startPageY, setStartPageY] = useState<number>(0);
|
|
const [startPageY, setStartPageY] = useState<number>(0);
|
|
|
|
|
|
const [translateX, setTranslateX] = useState<number>(0);
|
|
const [translateX, setTranslateX] = useState<number>(0);
|
|
- const [translateY, setTranslateY] = useState<number>(0);
|
|
|
|
|
|
+ const [translateY, setTranslateY] = useState<number>(110);
|
|
|
|
+
|
|
|
|
+ const [mapWidth, setMapWidth] = useState(1340);
|
|
|
|
+ const [marginLeft, setMarginLeft] = useState(0);
|
|
|
|
|
|
//const [mscale, setMscale] = useState<number>(1);
|
|
//const [mscale, setMscale] = useState<number>(1);
|
|
const mscale = useRef<number>(1);
|
|
const mscale = useRef<number>(1);
|
|
//最大的缩放比例
|
|
//最大的缩放比例
|
|
- const [maxscale, setMaxscale] = useState<number>(1.5);
|
|
|
|
- const [minscale, setMinscale] = useState<number>(0.5);
|
|
|
|
|
|
+ const [maxscale, setMaxscale] = useState<number>(1.7);
|
|
|
|
+ const [minscale, setMinscale] = useState<number>(0.7);
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
|
|
|
const [mapHeight, setMapHeight] = useState(500);
|
|
const [mapHeight, setMapHeight] = useState(500);
|
|
@@ -84,7 +87,6 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
-
|
|
|
|
//console.log('mscale', mscaleTemp);
|
|
//console.log('mscale', mscaleTemp);
|
|
};
|
|
};
|
|
|
|
|
|
@@ -101,22 +103,22 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
|
|
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
-
|
|
|
|
// }
|
|
// }
|
|
};
|
|
};
|
|
function changeMap(scale, moveWidth, moveHeight) {
|
|
function changeMap(scale, moveWidth, moveHeight) {
|
|
changeMapList(scale, moveWidth, moveHeight);
|
|
changeMapList(scale, moveWidth, moveHeight);
|
|
}
|
|
}
|
|
- //const fixWidth = 1300;
|
|
|
|
- // useEffect(() => {
|
|
|
|
- // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
|
- // var scale = Number((mapWrapWidth / mapSize.width).toFixed(4));
|
|
|
|
- // setMscale(scale);
|
|
|
|
- // changeMap(scale);
|
|
|
|
- // //if (scale < 0.3) {
|
|
|
|
- // setMinscale(scale);
|
|
|
|
- // //}
|
|
|
|
- // }, [mapSize]);
|
|
|
|
|
|
+ const fixWidth = 1300;
|
|
|
|
+ // useEffect(() => {
|
|
|
|
+ // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
|
+ // var scale = Number((mapWrapWidth / mapSize.width).toFixed(4));
|
|
|
|
+ // setMscale(scale);
|
|
|
|
+ // changeMap(scale);
|
|
|
|
+ // //if (scale < 0.3) {
|
|
|
|
+ // setMinscale(scale);
|
|
|
|
+ // //}
|
|
|
|
+
|
|
|
|
+ // }, [mapSize]);
|
|
|
|
|
|
//当地图发生改变时 的搜索
|
|
//当地图发生改变时 的搜索
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -139,6 +141,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
setTranslateX(left + mapWrapWidth / 2);
|
|
setTranslateX(left + mapWrapWidth / 2);
|
|
setTranslateY(top + mapWrapHeight / 2);
|
|
setTranslateY(top + mapWrapHeight / 2);
|
|
|
|
+ mscale.current = 1;
|
|
//搜索完成
|
|
//搜索完成
|
|
changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应
|
|
changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应
|
|
changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
|
|
changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
|
|
@@ -146,7 +149,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
} else if (currentFloorId.current != selFloorId) {
|
|
} else if (currentFloorId.current != selFloorId) {
|
|
//如果两次的selFloorId 不一样 才会更改地图的位置为0 0
|
|
//如果两次的selFloorId 不一样 才会更改地图的位置为0 0
|
|
setTranslateX(0);
|
|
setTranslateX(0);
|
|
- setTranslateY(0);
|
|
|
|
|
|
+ setTranslateY(110);
|
|
|
|
+ mscale.current = 1;
|
|
}
|
|
}
|
|
currentFloorId.current = selFloorId;
|
|
currentFloorId.current = selFloorId;
|
|
//console.log('selectSpace2');
|
|
//console.log('selectSpace2');
|
|
@@ -225,6 +229,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
|
|
|
|
var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
|
+ //为了让地图在 屏幕中间缩放
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
|
|
|
|
|
|
@@ -240,7 +245,10 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
console.log('document', document.body.offsetHeight);
|
|
console.log('document', document.body.offsetHeight);
|
|
var bodyHeight = document.body.offsetHeight;
|
|
var bodyHeight = document.body.offsetHeight;
|
|
- setMapHeight(bodyHeight - 293);
|
|
|
|
|
|
+ setMapHeight(bodyHeight - 145);
|
|
|
|
+ var bodyWidth = document.body.offsetWidth;
|
|
|
|
+ setMapWidth(bodyWidth);
|
|
|
|
+ setMarginLeft(-(bodyWidth - 1340) / 2); //1340 是固定宽度值
|
|
}, []);
|
|
}, []);
|
|
return (
|
|
return (
|
|
<div
|
|
<div
|
|
@@ -255,7 +263,11 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
|
|
onMouseMove={(event) => {
|
|
onMouseMove={(event) => {
|
|
mouseMoveEvent(event);
|
|
mouseMoveEvent(event);
|
|
}}
|
|
}}
|
|
- style={{ height: mapHeight + 'px' }}
|
|
|
|
|
|
+ style={{
|
|
|
|
+ height: mapHeight + 'px',
|
|
|
|
+ width: mapWidth + 'px',
|
|
|
|
+ marginLeft: marginLeft + 'px',
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
id="map"
|
|
id="map"
|