|
@@ -50,7 +50,7 @@ const Map: React.FC<MapProps> = ({
|
|
|
//const [mscale, setMscale] = useState<number>(1);
|
|
|
const mscale = useRef<number>(1);
|
|
|
//最大的缩放比例
|
|
|
- //const [maxscale, setMaxscale] = useState<number>(1.8);
|
|
|
+
|
|
|
const [minscale, setMinscale] = useState<number>(0.8);
|
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
|
|
@@ -86,31 +86,25 @@ const Map: React.FC<MapProps> = ({
|
|
|
var mapheight = mapSize.height * mscale.current;
|
|
|
var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
- console.log(
|
|
|
- '-translateX + moveLeft',
|
|
|
- moveLeft,
|
|
|
- translateX,
|
|
|
- -translateX + moveLeft,
|
|
|
- mapwidth,
|
|
|
- );
|
|
|
- console.log('-translateY + moveTop', moveTop, translateY, -translateY + moveTop, mapheight);
|
|
|
+
|
|
|
+ //console.log('-translateY + moveTop', moveTop, translateY, -translateY + moveTop, mapheight);
|
|
|
if (-translateX + moveLeft > mapwidth - 220) {
|
|
|
//不能再往左 translateX < -mapwidth + 220+moveLeft
|
|
|
- console.log('zuozuozuo');
|
|
|
+ //console.log('zuozuozuo');
|
|
|
}
|
|
|
if (-translateY + moveTop > mapheight - 220) {
|
|
|
//不能再往上 translateY < -mapheight + 220+moveTop
|
|
|
- console.log('shangshang');
|
|
|
+ //console.log('shangshang');
|
|
|
}
|
|
|
|
|
|
if (translateX - moveLeft > mapWrapWidth - 220) {
|
|
|
//不能再往右 translateX > mapWrapWidth - 220+moveLeft
|
|
|
- console.log('youyou');
|
|
|
+ //console.log('youyou');
|
|
|
}
|
|
|
|
|
|
if (translateY - moveTop > mapWrapHeight - 220) {
|
|
|
//不能再往下 translateY > mapWrapHeight - 220+moveTop
|
|
|
- console.log('xiaxia');
|
|
|
+ //console.log('xiaxia');
|
|
|
}
|
|
|
var nowTranslateX = translateX + nowPageX - startPageX;
|
|
|
var nowTranslateY = translateY + nowPageY - startPageY;
|
|
@@ -148,7 +142,7 @@ const Map: React.FC<MapProps> = ({
|
|
|
|
|
|
var mscaleTemp: number = Number((mscale.current + 0.1).toFixed(4));
|
|
|
mscale.current = Math.min(mscaleTemp, maxscale);
|
|
|
-
|
|
|
+ console.log('mscale.current', mscale.current, maxscale, minscale);
|
|
|
var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
|
|
@@ -253,25 +247,9 @@ const Map: React.FC<MapProps> = ({
|
|
|
}
|
|
|
}, [searchText]);
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- // todo 要不要用呢
|
|
|
- document.querySelector('#root').addEventListener(
|
|
|
- 'mouseup',
|
|
|
- function () {
|
|
|
- //console.log('mouseUpEvent');
|
|
|
- setCanMove(false);
|
|
|
- },
|
|
|
- true,
|
|
|
- );
|
|
|
-
|
|
|
- var mapDom = document.querySelector('#map');
|
|
|
- //console.log('document.querySelector("#map")', mapDom);
|
|
|
- let tscale = 1;
|
|
|
- //控制板的事件
|
|
|
- mapDom.addEventListener('wheel', function (event) {
|
|
|
- //debugger;
|
|
|
+ const mapWheel = useCallback(
|
|
|
+ (event) => {
|
|
|
event.preventDefault();
|
|
|
- console.log('wheel', event);
|
|
|
if (Math.abs(event.deltaX) !== 0 && Math.abs(event.deltaY) !== 0)
|
|
|
return console.log('没有固定方向');
|
|
|
if (event.deltaX < 0) return console.log('向右');
|
|
@@ -284,7 +262,7 @@ const Map: React.FC<MapProps> = ({
|
|
|
base = -0.0006;
|
|
|
}
|
|
|
var mscaleTemp = mscale.current + event.deltaY * base; //缩放倍率缓存
|
|
|
- //console.log('mscaleTemp', mscale.current, mscaleTemp);
|
|
|
+ console.log('mscaleTemp', mscale.current, mscaleTemp, minscale, maxscale);
|
|
|
mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale); //缩放倍率赋值
|
|
|
} else {
|
|
|
if (event.deltaY > 0) console.log('向上');
|
|
@@ -307,16 +285,44 @@ const Map: React.FC<MapProps> = ({
|
|
|
setMoveLeft(moveWidth);
|
|
|
|
|
|
changeMap(mscale.current, moveWidth, moveHeight);
|
|
|
- });
|
|
|
+ },
|
|
|
+ [maxscale],
|
|
|
+ );
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ // todo 要不要用呢
|
|
|
+ document.querySelector('#root').addEventListener(
|
|
|
+ 'mouseup',
|
|
|
+ function () {
|
|
|
+ //console.log('mouseUpEvent');
|
|
|
+ setCanMove(false);
|
|
|
+ },
|
|
|
+ true,
|
|
|
+ );
|
|
|
}, []);
|
|
|
|
|
|
+ useEffect(
|
|
|
+ function () {
|
|
|
+ var mapDom = document.querySelector('#map');
|
|
|
+ //console.log('document.querySelector("#map")', mapDom);
|
|
|
+ console.log('maxscalemaxscalemaxscale', maxscale);
|
|
|
+ //控制板的事件
|
|
|
+ if (maxscale > 1) {
|
|
|
+ mapDom.addEventListener('wheel', function (event) {
|
|
|
+ //debugger;
|
|
|
+ mapWheel(event);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [maxscale],
|
|
|
+ );
|
|
|
//展示比例尺
|
|
|
var showscale = useMemo(() => {
|
|
|
return (mscale.current * 100).toFixed(0);
|
|
|
}, [mscale.current]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- console.log('document', document.body.offsetHeight);
|
|
|
+ //console.log('document', document.body.offsetHeight);
|
|
|
var bodyHeight = document.body.offsetHeight;
|
|
|
setMapHeight(bodyHeight - 145);
|
|
|
var bodyWidth = document.body.offsetWidth;
|
|
@@ -348,6 +354,11 @@ const Map: React.FC<MapProps> = ({
|
|
|
width: mapSize.width,
|
|
|
height: mapSize.height,
|
|
|
}}
|
|
|
+ // onWheel={(event) => {
|
|
|
+ // //event.stopPropagation();
|
|
|
+ // //event.preventDefault();
|
|
|
+ // mapWheel(event);
|
|
|
+ // }}
|
|
|
>
|
|
|
{mapList.map(function (item, index) {
|
|
|
return render(item, index);
|