3.透过现象看本质-webgl加载geojson

原创

于 2023-07-25 16:07:06 发布 · 353 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webgl

该文章介绍了如何利用HTML5的canvas元素结合GeoJSON数据来绘制地图。首先获取GeoJSON数据，然后通过canvas的2D渲染上下文绘制地图，包括坐标转换、设置路径、填充颜色和处理缩放、平移等交互功能。同时，文章还涉及到了鼠标滚轮事件用于地图的缩放以及鼠标点击和拖动事件来实现地图的平移。

通过canvas加载geojson深入解析添加矢量数据本质

// 自行获取json数据
const [state, rs, err] = await getData('./sx.json')
//公共数据
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext("2d"); // canvas元素的contex对象
let width = window.innerWidth; // 画布宽度
let height = window.innerHeight; // 画布高度
canvas.width = width;
canvas.height = height;
let center = [108, 36]
let scale = 100
let zoom = 5
let zooms = {
   
   
    5: 100,
    6: 110,
    7: 130,
    8: 170,
    9: 250,
    10: 410,
    11: 730,
    12: 1470,
    13: 2600,
    14: 5000,
    15: 10000,
    16: 20000,
    17: 40000
}
// 坐标转换
function coordTrans(coord, center) {
   
   
    // coord和center传入的都要是原始经纬度坐标
    // 经纬度坐标，纬度大的点在canvas的坐标系中会处于下方，而现实中应该处于上方，
    // 所以对所有点纬度坐标进行取反修正
    coord = [coord[0], -coord[1]<