主页 / 问题 / 1038930
Accepted
Кирилл
Asked:2020-10-26 22:52:47 +0000 UTC2020-10-26 22:52:47 +0000 UTC

在画布上绘图的国家和地区的边界坐标？

  • 772

画布上有一个地图示例：http ://tomsgroup.ru/ru/projects/ 绘制它的脚本在文件http://tomsgroup.ru/tpl/default/js/tpl.js 所有区域存储为具有坐标的对象，然后在其上进行绘图。

像这样的坐标：点：[[581,404],[580,396],[583,392]]

问题：我在哪里可以获得任何国家或地区的这种坐标以进行相同的渲染？像GADM这样的服务有很多种，但是都提供了经纬度坐标，不适合简单的将它们投影到画布上的x/y坐标系上。也许在某个地方您可以将纬度和经度转换为 x / y 坐标，或者是否有一些服务可以让您立即使用它而不会出现问题？

javascript

1 个回答

  1. Best Answer

    可以使用 d3.js 和用于处理投影的模块来完成类似的事情 - d3.geo

    let rnd = n => Math.floor(Math.random()*n);

let projection = d3.geoMercator()
                   .rotate([-154, 0])
                   .scale(190)
                   .center([0, 63])

let path = d3.geoPath()
             .projection(projection)

let ctx1 = canvas(true);
let ctx2 = canvas(false);
let tooltip = d3.select('body')                         
               .append('div')
               .style('position', 'absolute')
              .style('pointer-events', 'none')
let features, pickingBuffer, mouseover, map, pickingMap = {};

let canv = document.querySelector('canvas');
canv.addEventListener('mousemove', e => {
     if (!pickingBuffer) 
       return
     let prev = mouseover;
     let offset = (e.layerY*600+e.layerX)*4;
     let r = pickingBuffer[offset];
     let g = pickingBuffer[offset+1];
     let b = pickingBuffer[offset+2];
     mouseover = pickingMap[`rgb(${r},${g},${b})`];
     tooltip.style('top', e.offsetY + canv.offsetTop + 'px')
            .style('left', 15 + e.offsetX + canv.offsetLeft + 'px')
            .html(mouseover?mouseover.properties.name:'')  
     if (prev === mouseover) 
       return;
     ctx1.putImageData(map, 0, 0);
     mouseover && fill(ctx1, mouseover, 'red');
});

d3.json("https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/russia.geojson").then(json => {
    features = json.features;
    features.forEach((feature, i) => {
        feature.color = `hsl(${i*69.5},65%,65%)`;
        while (!feature.pick || pickingMap[feature.pick])
          feature.pick = `rgb(${rnd(255)},${rnd(255)},${rnd(255)})`;
        pickingMap[feature.pick] = feature;
        fill(ctx1, feature, feature.color);
        fill(ctx2, feature, feature.pick);
    });
    pickingBuffer = ctx2.getImageData(0,0,600,400).data;
    map = ctx1.getImageData(0,0,600,400);
});

function canvas(visible) {
    let canvas = d3.select('body')                         
               .append('canvas')
               .attr('height', 400)
               .attr('width', 600)
               .node();
    !visible && canvas.remove();
    return canvas.getContext('2d')
}

function fill(c, feature, color) {
    c.fillStyle = color;
    c.beginPath();
    path.context(c)(feature);
    c.fill();
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

    • 2

相关问题