Think about one: simply take the house type map as the background picture of jtopo scene

            var canvas = document.getElementById('canvas');            
            var stage = new JTopo.Stage(canvas);
            var scene = new JTopo.Scene(stage);
            scene.background = './img/House.jpg';

However, in this way, the background image is fixed there and cannot follow the scene zoom...

Thinking 2: directly regard the house type diagram as jtopo node

First, the image is loaded into the node, and the node size is set to the image size, and the node position is in the middle

            var houseImg = new Image();
            houseImg .src = './img/House.jpg';
            houseImg .onload = function () {
                var node = new JTopo.Node();
                node.setImage('./img/House.jpg', true); // Set the picture as CAD house type drawing
                node.setSize(houseImg .width,houseImg .height); // Set node size to image size
                node.setCenterLocation(canvasW/2, canvasH/2); // Center node position
                scene.add(node);
            };

Well The picture can be scaled as the scene zooms

Then go to the next step (drag to change the location of the scene instead of changing the location of the house type map)

First of all, I thought that when dragging, record the original position of the picture when the mouse is pressed, when dragging, change the position of the picture to the original position of the recorded picture, and change the position of the scene at the same time. This seems to be what we need...

            var selfX,selfY;
            var mapStartX,mapStartY; // Drag event record start point on map
            node.addEventListener("mousedown",function(event){
                selfX = event.target.x; // Record the node's own location
                selfY = event.target.y;
                mapStartX =  event.offsetX - _self.scene.translateX;
                mapStartY =  event.offsetY - _self.scene.translateY;
            });
            node.addEventListener("mousedrag",function(event){
               stage.cursor = "url(./img/cur/closedhand.cur) 8 8, default";
               event.target.x = selfX;  // Keep the node's own position unchanged
               event.target.y = selfY;
                 // Change scene position
               scene.translateX += ((event.offsetX - _self.scene.translateX) - mapStartX);
               scene.translateY += ((event.offsetY - _self.scene.translateY) - mapStartY);
            });
            node.addEventListener("mouseup",function(event){
                selfX= ""; // Clear node location information
                selfY = "";
            });

Give it a try, eh... All right

Slide wheel, image zoom,,, um, no problem
Slide and drag, picture doesn 't move, scene moves,,, um, no.... Wait, what's wrong with the drag distance..