Question

亲爱的专业人士，祝你生日快乐！我有一点问题。我不久前开始学习javascript和传单，现在我可以使用图层，但是创建我需要的控件现在对我来说很难。所以，我创建了基于多边形形状文件的图块层（它真的很大，大约14000 000点.geojson，topojson - 无法在浏览器中显示它，我不想使用的形状文件）现在我尝试再次创造自行车。我想创建动态传奇。图例的一部分用于检测颜色并通过颜色（十六进制）显示多边形的类型。另一部分用于在不同位置选择地图的3-5种主导颜色。所以我展示了一些代码： 1）http://jsfiddle.net/DV9Bw/1/

2）第二部分看起来像（我想我可以使用它） http://lokeshdhakar.com/projects/color-thief/

任何想法，我的朋友们？附：对不起我的英语不好！我没有练习很长时间=）

所以...这是获取颜色的代码的一部分，但是当我在地图上改变位置时它不起作用......我做错了什么???

var map = L.map('map').setView([51.505, -0.09], 13);
var tl = L.tileLayer('http://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
}).addTo(map);
tl.on('tileload', function(tile, url){
    var top = $(tile.tile).css("top");
    var left = $(tile.tile).css("left");
    var url = $(tile.tile).attr("src");
    createCanvas(top, left, url);
});


var ourCustomControl = L.Control.extend({

  options: {
    position: 'topleft' 
    //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
  },

  onAdd: function (map) {
    var container = L.DomUtil.create('div', 'leaflet-control-custom');
    return container;
  }

});
map.addControl(new ourCustomControl());

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);

        return { x: curleft, y: curtop };
    }

    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255) {
        throw "Invalid color component";
    }
    return ((r << 16) | (g << 8) | b).toString(16);
}

$('#map').on("mousemove", "#canvas",function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var imageData = c.getImageData(0, 0, this.width, this.height);
var pixelArray = imageData.data;

    var p = c.getImageData(x, y, 256, 256).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1],p[2])).slice(-6);
    $('.leaflet-control-custom').html(coord + "<br>" + hex).css("background", hex);
});

function createCanvas(top, left, url){
    var canvas = $('<canvas />').attr({
        id: "canvas",
        width: 256,
        height: 256,
        class: "leaflet-tile leaflet-tile-loaded"
    });
    canvas.css("top", top);
    canvas.css("left", left);
    var ctx = $(canvas)[0].getContext('2d');
    var image = new Image();
    image.onload = function() {
        ctx.drawImage(this, 0, 0);
    };
    image.crossOrigin = "Anonymous";
    image.src = url;
    ctx.drawImage(image, 0, 0);
    $(".leaflet-tile-container").append(canvas);
}

Leaflet

0 个答案: