|
@@ -14,6 +14,7 @@ type MapProps = {
|
|
|
mapSize: any;
|
|
|
changeMapList: any;
|
|
|
maxscale: number;
|
|
|
+ transXInit: number;
|
|
|
};
|
|
|
|
|
|
const Map: React.FC<MapProps> = ({
|
|
@@ -24,6 +25,7 @@ const Map: React.FC<MapProps> = ({
|
|
|
changeMapList,
|
|
|
mapSize,
|
|
|
maxscale,
|
|
|
+ transXInit,
|
|
|
}) => {
|
|
|
//useModel 注释掉 不用啦 晚会删
|
|
|
|
|
@@ -42,21 +44,20 @@ const Map: React.FC<MapProps> = ({
|
|
|
const [startPageY, setStartPageY] = useState<number>(0);
|
|
|
|
|
|
const [translateX, setTranslateX] = useState<number>(0);
|
|
|
- const [translateY, setTranslateY] = useState<number>(110);
|
|
|
-
|
|
|
- const [mapWidth, setMapWidth] = useState(1340);
|
|
|
- const [marginLeft, setMarginLeft] = useState(0);
|
|
|
+ const [translateY, setTranslateY] = useState<number>(120);
|
|
|
|
|
|
//const [mscale, setMscale] = useState<number>(1);
|
|
|
const mscale = useRef<number>(1);
|
|
|
//最大的缩放比例
|
|
|
|
|
|
- const [minscale, setMinscale] = useState<number>(0.8);
|
|
|
+ const [minscale, setMinscale] = useState<number>(0.6);
|
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
|
|
|
const [moveTop, setMoveTop] = useState<number>(0); //地图的块的top的改变
|
|
|
const [moveLeft, setMoveLeft] = useState<number>(0);
|
|
|
const [mapHeight, setMapHeight] = useState(500);
|
|
|
+ const [mapWidth, setMapWidth] = useState(1340);
|
|
|
+ const [marginLeft, setMarginLeft] = useState(0);
|
|
|
|
|
|
const currentFloorId = useRef<any>(null);
|
|
|
const mapRef = useRef();
|
|
@@ -110,18 +111,18 @@ const Map: React.FC<MapProps> = ({
|
|
|
var nowTranslateY = translateY + nowPageY - startPageY;
|
|
|
//不能让地图太靠左边 看不到
|
|
|
nowTranslateX =
|
|
|
- nowTranslateX < -mapwidth + 220 + moveLeft ? -mapwidth + 220 + moveLeft : nowTranslateX;
|
|
|
+ nowTranslateX < -mapwidth + 250 + moveLeft ? -mapwidth + 250 + moveLeft : nowTranslateX;
|
|
|
//不能让地图太靠右边 看不到
|
|
|
nowTranslateX =
|
|
|
- nowTranslateX > mapWrapWidth - 220 + moveLeft
|
|
|
- ? mapWrapWidth - 220 + moveLeft
|
|
|
+ nowTranslateX > mapWrapWidth - 250 + moveLeft
|
|
|
+ ? mapWrapWidth - 250 + moveLeft
|
|
|
: nowTranslateX;
|
|
|
nowTranslateY =
|
|
|
- nowTranslateY < -mapheight + 220 + moveTop ? -mapheight + 220 + moveTop : nowTranslateY;
|
|
|
+ nowTranslateY < -mapheight + 250 + moveTop ? -mapheight + 250 + moveTop : nowTranslateY;
|
|
|
|
|
|
nowTranslateY =
|
|
|
- nowTranslateY > mapWrapHeight - 180 + moveTop
|
|
|
- ? mapWrapHeight - 180 + moveTop
|
|
|
+ nowTranslateY > mapWrapHeight - 220 + moveTop
|
|
|
+ ? mapWrapHeight - 220 + moveTop
|
|
|
: nowTranslateY;
|
|
|
|
|
|
setTranslateX(nowTranslateX);
|
|
@@ -212,8 +213,8 @@ const Map: React.FC<MapProps> = ({
|
|
|
changeSearchText({}); //清空搜索记录 好进行一些操作
|
|
|
} else if (currentFloorId.current != selFloorId) {
|
|
|
//如果两次的selFloorId 不一样 才会更改地图的位置为0 0
|
|
|
- setTranslateX(0);
|
|
|
- setTranslateY(110);
|
|
|
+ setTranslateX(transXInit);
|
|
|
+ setTranslateY(120);
|
|
|
mscale.current = 1;
|
|
|
}
|
|
|
currentFloorId.current = selFloorId;
|
|
@@ -255,6 +256,7 @@ const Map: React.FC<MapProps> = ({
|
|
|
if (event.deltaX < 0) return console.log('向右');
|
|
|
if (event.deltaX > 0) return console.log('向左');
|
|
|
if (event.ctrlKey) {
|
|
|
+ //ctrlKey为true 双指的方向不一致
|
|
|
if (event.deltaY > 0) console.log('向内');
|
|
|
if (event.deltaY < 0) console.log('向外');
|
|
|
var base = -0.009;
|
|
@@ -300,6 +302,9 @@ const Map: React.FC<MapProps> = ({
|
|
|
true,
|
|
|
);
|
|
|
}, []);
|
|
|
+ useEffect(() => {
|
|
|
+ setTranslateX(transXInit);
|
|
|
+ }, [transXInit]);
|
|
|
|
|
|
useEffect(
|
|
|
function () {
|
|
@@ -325,11 +330,12 @@ const Map: React.FC<MapProps> = ({
|
|
|
useEffect(() => {
|
|
|
//console.log('document', document.body.offsetHeight);
|
|
|
var bodyHeight = document.body.offsetHeight;
|
|
|
- setMapHeight(bodyHeight - 145);
|
|
|
+ setMapHeight(bodyHeight - 190);
|
|
|
var bodyWidth = document.body.offsetWidth;
|
|
|
setMapWidth(bodyWidth);
|
|
|
setMarginLeft(-(bodyWidth - 1340) / 2); //1340 是固定宽度值
|
|
|
}, []);
|
|
|
+
|
|
|
return (
|
|
|
<div
|
|
|
className={mapstyles.mapwrap}
|