Konvajs 实现地图测距尺

KonvaJS 是一个 HTML5 Canvas 库，可以用来创建各种图形和动画。要实现地图测距尺功能，可以先在 KonvaJS 中将地图加载为底图，然后在上面添加测距尺工具。

以下是实现地图测距尺的大致步骤：

1. 加载地图底图

首先需要将地图加载为底图，可以使用 Konva.Image 对象加载图片。

var imgObj = new Image();
imgObj.onload = function() {
  var map = new Konva.Image({
    image: imgObj,
    x: 0,
    y: 0,
    width: 800, // 地图宽度
    height: 600 // 地图高度
  });
  layer.add(map);
  layer.draw();
};
imgObj.src = 'map.jpg'; // 地图图片路径

2. 添加测距尺工具

可以使用 Konva.Line 对象来实现测距尺功能，可以通过鼠标拖拽来绘制线条，同时计算线段长度并显示在测距尺上。

var line = null;
var distance = 0;
var text = new Konva.Text({
  x: 10,
  y: 10,
  text: 'Distance: 0',
  fontSize: 18,
  fontFamily: 'Calibri',
  fill: 'black'
});
layer.add(text);

stage.on('mousedown', function(e) {
  if (!line) {
    line = new Konva.Line({
      stroke: 'black',
      strokeWidth: 2,
      points: [e.clientX, e.clientY]
    });
    layer.add(line);
    layer.draw();
  }
});

stage.on('mousemove', function(e) {
  if (line) {
    var pos = stage.getPointerPosition();
    line.points([line.points()[0], line.points()[1], pos.x, pos.y]);
    distance = Math.sqrt(Math.pow(pos.x - line.points()[0], 2) + Math.pow(pos.y - line.points()[1], 2));
    text.text('Distance: ' + distance.toFixed(2) + ' pixels');
    layer.draw();
  }
});

stage.on('mouseup', function(e) {
  if (line) {
    line = null;
  }
});

3. 完整代码

var imgObj = new Image();
imgObj.onload = function() {
  var stage = new Konva.Stage({
    container: 'container',
    width: 800,
    height: 600
  });
  var layer = new Konva.Layer();
  var map = new Konva.Image({
    image: imgObj,
    x: 0,
    y: 0,
    width: 800,
    height: 600
  });
  var line = null;
  var distance = 0;
  var text = new Konva.Text({
    x: 10,
    y: 10,
    text: 'Distance: 0',
    fontSize: 18,
    fontFamily: 'Calibri',
    fill: 'black'
  });
  layer.add(map);
  layer.add(text);
  stage.add(layer);

  stage.on('mousedown', function(e) {
    if (!line) {
      line = new Konva.Line({
        stroke: 'black',
        strokeWidth: 2,
        points: [e.clientX, e.clientY]
      });
      layer.add(line);
      layer.draw();
    }
  });

  stage.on('mousemove', function(e) {
    if (line) {
      var pos = stage.getPointerPosition();
      line.points([line.points()[0], line.points()[1], pos.x, pos.y]);
      distance = Math.sqrt(Math.pow(pos.x - line.points()[0], 2) + Math.pow(pos.y - line.points()[1], 2));
      text.text('Distance: ' + distance.toFixed(2) + ' pixels');
      layer.draw();
    }
  });

  stage.on('mouseup', function(e) {
    if (line) {
      line = null;
    }
  });
};
imgObj.src = 'map.jpg';

注意：以上代码仅为示例，可能需要根据实际情况进行修改。