d3.js 套索绘制多边形形状搜索工具 - 在谷歌地图上(获取给定区域的坐标/用户) [英] d3.js Lasso Drawing Polygon Shape Search Tool - on a google map (getting the coordinates/users in a given area)

问题描述

尝试构建一个位置搜索应用，显示谷歌地图 - 在用户绘制的地图上，它会显示位于该区域内的所有用户.

我也发现了这个例子 - 但它看起来笨拙/不流畅 - "

<小时>

这演示了如何绘制多边形和手绘形状.

$(".drawfreehand").click(function(e) {e.preventDefault();console.log("手绘");函数 drawFreeHand(){//多边形that.newShape= new google.maps.Polyline({map:that.map,clickable:false});//移动监听器var move = google.maps.event.addListener(that.map,'mousemove',function(e){that.newShape.getPath().push(e.latLng);});//鼠标监听器google.maps.event.addListenerOnce(that.map,'mouseup',function(e){google.maps.event.removeListener(移动);var path= that.newShape.getPath();that.newShape.setMap(null);that.newShape=new google.maps.Polygon({map:that.map,path:path});google.maps.event.clearListeners(that.map.getDiv(), 'mousedown');使能够()that.newShape.setEditable(false);that.revealInsidePolygon(that.newShape);});}功能禁用(){that.map.setOptions({可拖动:假，缩放控制:假，滚轮:假，disableDoubleClickZoom: 假});}功能启用(){that.map.setOptions({可拖动:真实，缩放控制:真，滚轮:真的，disableDoubleClickZoom: 真});}禁用()google.maps.event.addDomListener(that.map.getDiv(),'mousedown',function(e){drawFreeHand()});});

Trying to build a location search app, that displays a google map - on the user drawing on the map it reveals any users that are located within that region.

I've also found this example - but it seems clunky/unsmooth - http://jsfiddle.net/pPMqQ/34/

http://jsfiddle.net/4xXQT/156/

var width = 960,
    height = 500;

var points = d3.range(1, 5).map(function(i) {
  return [i * width / 5, 50 + Math.random() * (height - 100)];
});

var dragged = null,
    selected = points[0];

var line = d3.svg.line();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("tabindex", 1);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("mousedown", mousedown);

svg.append("path")
    .datum(points)
    .attr("class", "line")
    .call(redraw);

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup)
    .on("keydown", keydown);

d3.select("#interpolate")
    .on("change", change)
  .selectAll("option")
    .data([
      "linear",
      "step-before",
      "step-after",
      "basis",
      "basis-open",
      "basis-closed",
      "cardinal",
      "cardinal-open",
      "cardinal-closed",
      "monotone"
    ])
  .enter().append("option")
    .attr("value", function(d) { return d; })
    .text(function(d) { return d; });

svg.node().focus();

function redraw() {
  svg.select("path").attr("d", line);

  var circle = svg.selectAll("circle")
      .data(points, function(d) { return d; });

  circle.enter().append("circle")
      .attr("r", 1e-6)
      .on("mousedown", function(d) { selected = dragged = d; redraw(); })
    .transition()
      .duration(750)
      .ease("elastic")
      .attr("r", 6.5);

  circle
      .classed("selected", function(d) { return d === selected; })
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });

  circle.exit().remove();

  if (d3.event) {
    d3.event.preventDefault();
    d3.event.stopPropagation();
  }
}

function change() {
  line.interpolate(this.value);
  redraw();
}

function mousedown() {
  points.push(selected = dragged = d3.mouse(svg.node()));
  redraw();
}

function mousemove() {
  if (!dragged) return;
  var m = d3.mouse(svg.node());
  dragged[0] = Math.max(0, Math.min(width, m[0]));
  dragged[1] = Math.max(0, Math.min(height, m[1]));
  redraw();
}

function mouseup() {
  if (!dragged) return;
  mousemove();
  dragged = null;
}

function keydown() {
  if (!selected) return;
  switch (d3.event.keyCode) {
    case 8: // backspace
    case 46: { // delete
      var i = points.indexOf(selected);
      points.splice(i, 1);
      selected = points.length ? points[i > 0 ? i - 1 : 0] : null;
      redraw();
      break;
    }
  }
}

解决方案

The latest code "http://jsfiddle.net/Cbk9J/188/"

---

This demonstrates how to draw polygons and freehand shapes.

$(".drawfreehand").click(function(e) {
    e.preventDefault();
    console.log("drawfreehand");

    function drawFreeHand(){

        //the polygon
        that.newShape= new google.maps.Polyline({map:that.map,clickable:false});

        //move-listener
        var move = google.maps.event.addListener(that.map,'mousemove',function(e){
            that.newShape.getPath().push(e.latLng);
        });

        //mouseup-listener
        google.maps.event.addListenerOnce(that.map,'mouseup',function(e){


            google.maps.event.removeListener(move);

            var path= that.newShape.getPath();

            that.newShape.setMap(null);

            that.newShape=new google.maps.Polygon({map:that.map,path:path});


            google.maps.event.clearListeners(that.map.getDiv(), 'mousedown');

            enable()

            that.newShape.setEditable(false);
            that.revealInsidePolygon(that.newShape);

        });
    }

    function disable(){
        that.map.setOptions({
            draggable: false, 
            zoomControl: false, 
            scrollwheel: false, 
            disableDoubleClickZoom: false
        });
    }

    function enable(){
        that.map.setOptions({
            draggable: true, 
            zoomControl: true, 
            scrollwheel: true, 
            disableDoubleClickZoom: true
        });
    }

    disable()

    google.maps.event.addDomListener(that.map.getDiv(),'mousedown',function(e){
        drawFreeHand()
    });


});

这篇关于d3.js 套索绘制多边形形状搜索工具 - 在谷歌地图上(获取给定区域的坐标/用户)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！