将纬度和经度转换为网页上的 x,y 网格

Question

我正在尝试将不同人位置的纬度和经度值放入网格状二维显示中，其中 y = 经度和 x = 纬度 2D。我如何使用 html、css、java 来做到这一点？我只是从另一个问题中发现，也许我可以使用 ArcGis Api 将值转换为 X 和 Y。但是我如何将它们放置在屏幕上，以便它们具有正确的位置？

我有经纬度代码：

const getLocation = document.getElementById("btn");

getLocation.addEventListener("click", evt=> {
    if("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(position=> {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;

            console.log(latitude,longitude);
        },error=>{
            console.log(error.code);
        });
    }else {
        console.log("not supported")
    }
});

Answer 1

因此，您已经确定需要将纬度/经度转换为笛卡尔坐标，即 x 和 y 数字。所以，我会尽力帮助你。

我做这样的事情的首选解决方案是 canvas api，你绝对可以在上面绘制任何你想要的东西。

所以，这里开始......希望它有所帮助！

console.log("Plotted!"); // check we're connected to html file!
// get the canvas element from the doc
const canvas = document.getElementById("canvas");

// create the canvas context
//a context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
const ctx = canvas.getContext("2d");
// set the colour of the canvas background
canvas.style.backgroundColor = "#999";

// define your orgin long/lat = 0 at center for instance
let oX = canvas.width / 2;
let oY = canvas.height / 2;

// let's plot the oX/oY axis
//a. Set the line style options
ctx.strokeStyle = "#aaf";
ctx.lineWidth = 3;

//b. Draw the x axis line
ctx.beginPath();
ctx.moveTo(0, oY); // set start point of line
ctx.lineTo(oX * 2, oY); // end point of line
ctx.stroke(); // draw it

//c. Draw the y axis line
ctx.beginPath();
ctx.moveTo(oX, 0); // set start point of line
ctx.lineTo(oX, oY * 2); // end point of line
ctx.stroke(); // draw it

// plot your coords
// I'm using the canvas api's rectangle method to
// draw a rectangle of the point we want to plot
// for convenience!

// convenience vars for our plot point's width/height
let ppW = 10,
  ppH = 10;

// and then it's useful to to have the center points!
let ppwCenter = ppW / 2,
  pphCenter = ppH / 2;

//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(128, 0, 0, 0.25)";

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter, oY - pphCenter, ppW, ppH); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();

// plot another point in the middle of the top right quadrant
//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(0, 0, 255, 0.25)";

// vars for your plot point coords, long/lat
let x, y;

// ****** Plotting With Decimal Degrees ****** \
//your plot points could be defined as oX +/- something
// it's up to you to define the resolution of your graph
x = oX * 0.5; // half of the quadrant's width
y = oY * 0.5; // half of the quadrant's height

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter + x, oY - pphCenter - y, 10, 10); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();
console.log(oX, x, y);

// So if you have your long/lat coords in decimal degrees
// you could simply plot
x = 30.6789; // logitude in decimal deg
y = 15.23456 * -1; // latitude in decimal deg

//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(255, 0, 255, 0.5)";

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter + x, oY - pphCenter + y, 10, 10); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();

<canvas id="canvas"></canvas>

编辑：有一个 link 可能有助于将经度/纬度转换为笛卡尔坐标

这是一个使用背景图片的版本：

// make the canvas element and add it to the DOM
let canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
canvas.style.border = "1px solid black";
canvas.style.backgroundColor = "white";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

// set the colour of the canvas background
canvas.style.backgroundColor = "#999";
canvas.width = 360; // 360deg
canvas.height = 180;

// declare var to hold our chart/background
let worldImg;

let loadImg = new Promise(() => {
  //Load an image
  worldImg = new Image();
  worldImg.addEventListener("load", loadHandler, false);
  worldImg.src =
    "https://stuartcodes.000webhostapp.com/pexels-pixabay-41949.png";
  console.log(worldImg);
});

//The loadHandler is called when the image has loaded
function loadHandler() {
  console.log("OK");

  // draw the image that we want as the background
  ctx.drawImage(worldImg, 0, 0);

  // then draw everything else

  // define your orgin lat'/long' = 0 at center for instance
  let oX = canvas.width / 2;
  let oY = canvas.height / 2;

  // let's plot the oX/oY axis
  //a. Set the line style options
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 0.5;

  //b. Draw the x axis line
  ctx.beginPath();
  ctx.moveTo(0, oY); // set start point of line
  ctx.lineTo(oX * 2, oY); // end point of line
  ctx.stroke(); // draw it

  //c. Draw the y axis line
  ctx.beginPath();
  ctx.moveTo(oX, 0); // set start point of line
  ctx.lineTo(oX, oY * 2); // end point of line
  ctx.stroke(); // draw it

  // plot your coords
  // I'm using the canvas api's rectangle method to
  // draw a rectangle of the point we want to plot
  // for convenience!

  // convenience vars for our plot point's width/height
  let ppW = 10,
    ppH = 10;

  // and then it's useful to to have the center points!
  let ppwCenter = ppW / 2,
    pphCenter = ppH / 2;

  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(128, 0, 0, 0.75)";

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter, oY - pphCenter, ppW, ppH); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();

  // plot another point in the middle of the top right quadrant
  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(0, 0, 255, 0.75)";

  // vars for your plot point coords, long/lat
  let x, y;

  // ****** Ploting With Decimal Degrees ****** \
  //your plot points could be defined as oX +/- something
  // it's up to you to define the resolution of your graph
  x = oX * 0.5; // half of the quadrant's width
  y = oY * 0.5; // half of the quadrant's height

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter - y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
  console.log(oX, x, y);

  // So if you have your long/lat coords in decimal degrees

  /*  https://www.latlong.net/degrees-minutes-seconds-to-decimal-degrees

  Decimal Degrees = degrees + (minutes/60) + (seconds/3600)

  DD = d + (min/60) + (sec/3600)
  */
  
  // you could simply plot
  x = 30.6789; // longitude in decimal deg
  // y = -1 * number is a correction for the canvas
  // so that negative numbers fall south of the equator
  y = -1 * 15.23456; // latitude in decimal deg

  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(255, 0, 255, 0.75)";

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter + y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
}