如何让geojson在vega lite可视化中与ejs和express一起工作

对不起，如果我没有正确解释这个问题，我是编程新手，但我会尝试一下：

我正在尝试使用express在网站上显示Vega lite可视化效果。它适用于json文件，但每次我尝试使用express.render（）将geojson文件合并到我的.ejs文件中时，控制台都会说：

vega@5：1未捕获（承诺中）类型错误：无法读取属性 未定义的“几何体”

我做错了什么？当我在HTML中进行可视化时，它会工作，但当我尝试使用express和ejs在浏览器中显示它时，它就会停止工作

我的js文件（express server）中的代码如下所示：

const express = require('express');
const expressApp = express();
const fs = require("fs");

expressApp.set("view engine", "ejs")
expressApp.set("views", __dirname)

expressApp.get('/', function(request, response){
    let visData = fs.readFileSync("visData.json", "utf-8");
    let geoVisData = fs.readFileSync("koebenhavns-storkreds.geojson");

    response.render('index', {
        visData: visData,
        geoVisData: geoVisData
    });
})


expressApp.listen(8080, function() {
    console.log('listening on port 8080')
});

let mapVis = {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 1300,
    "height": 1200,
    "view": {"stroke": "transparent"},
    "layer": [{
        "data": {
            "values": <%- geoVisData %>,
            "format": {
                "type": "topojson",
                "feature": "geometry"
            }
        },
        "projection": {
            "type": "mercator"
        },
        "mark": {
            "type": "geoshape",
            "fill": "lightgray",
            "stroke": "white"
        }
    }, {
        "data": {"values": <%- visData %>},
        "projection": {
            "type": "mercator"
        },
        "mark": "circle",
        "params": [{
            "name": "show",
            "select": {"type": "point", "fields": ["hygge"]},
            "bind": "legend"
        }],
        "encoding": {
            "longitude": {
                "field": "longitude",
                "type": "quantitative"
            },
            "latitude": {
                "field": "latitude",
                "type": "quantitative"},
            "size": {
                "value": 30
            },
            "tooltip": [
                {"field": "name", "type": "nominal", "title": "Name"},
                {"field": "neighborhood", "type": "nominal", "title": "Neighborhood"},
                {"field": "accommodationType", "type": "nominal", "title": "Type"},
                {"field": "price", "type": "quantitative", "title": "Price per night"}
            ],
            "color": {
                "field": "hygge", "type": "nominal", "title": "Hygge?",
                "scale": {"range": ["#6BB7B9", "#FF5A5F"]}
            },
            "href": {"field": "link", "type": "nominal"},
            "opacity": {
                "condition": {"param": "show", "value": 1},
                "value": 0.2
            }
        }
    }, {
        "data": {"values": {
                RaadhuspladsenLat: 55.676111,
                RaadhuspladsenLong: 12.568611
            }},
        "projection": {
            "type": "mercator"
        },
        "mark": "circle",
        "encoding": {
            "longitude": {"field": "RaadhuspladsenLong", "type": "quantitative"},
            "latitude": {"field": "RaadhuspladsenLat", "type": "quantitative"},
            "size": {"value": 400},
            "color": {"value": "#FFFF00"},
            "tooltip": {"value": "Rådhuspladsen (Centre of Copenhagen)"}
        },
    }
    ],
    "config": {
        "font": "Avenir"
    }
}

我的ejs文件中的代码如下所示：

const express = require('express');
const expressApp = express();
const fs = require("fs");

expressApp.set("view engine", "ejs")
expressApp.set("views", __dirname)

expressApp.get('/', function(request, response){
    let visData = fs.readFileSync("visData.json", "utf-8");
    let geoVisData = fs.readFileSync("koebenhavns-storkreds.geojson");

    response.render('index', {
        visData: visData,
        geoVisData: geoVisData
    });
})


expressApp.listen(8080, function() {
    console.log('listening on port 8080')
});

let mapVis = {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 1300,
    "height": 1200,
    "view": {"stroke": "transparent"},
    "layer": [{
        "data": {
            "values": <%- geoVisData %>,
            "format": {
                "type": "topojson",
                "feature": "geometry"
            }
        },
        "projection": {
            "type": "mercator"
        },
        "mark": {
            "type": "geoshape",
            "fill": "lightgray",
            "stroke": "white"
        }
    }, {
        "data": {"values": <%- visData %>},
        "projection": {
            "type": "mercator"
        },
        "mark": "circle",
        "params": [{
            "name": "show",
            "select": {"type": "point", "fields": ["hygge"]},
            "bind": "legend"
        }],
        "encoding": {
            "longitude": {
                "field": "longitude",
                "type": "quantitative"
            },
            "latitude": {
                "field": "latitude",
                "type": "quantitative"},
            "size": {
                "value": 30
            },
            "tooltip": [
                {"field": "name", "type": "nominal", "title": "Name"},
                {"field": "neighborhood", "type": "nominal", "title": "Neighborhood"},
                {"field": "accommodationType", "type": "nominal", "title": "Type"},
                {"field": "price", "type": "quantitative", "title": "Price per night"}
            ],
            "color": {
                "field": "hygge", "type": "nominal", "title": "Hygge?",
                "scale": {"range": ["#6BB7B9", "#FF5A5F"]}
            },
            "href": {"field": "link", "type": "nominal"},
            "opacity": {
                "condition": {"param": "show", "value": 1},
                "value": 0.2
            }
        }
    }, {
        "data": {"values": {
                RaadhuspladsenLat: 55.676111,
                RaadhuspladsenLong: 12.568611
            }},
        "projection": {
            "type": "mercator"
        },
        "mark": "circle",
        "encoding": {
            "longitude": {"field": "RaadhuspladsenLong", "type": "quantitative"},
            "latitude": {"field": "RaadhuspladsenLat", "type": "quantitative"},
            "size": {"value": 400},
            "color": {"value": "#FFFF00"},
            "tooltip": {"value": "Rådhuspladsen (Centre of Copenhagen)"}
        },
    }
    ],
    "config": {
        "font": "Avenir"
    }
}

让mapVis={
“$schema”：”https://vega.github.io/schema/vega-lite/v5.json",
“宽度”：1300，
“高度”：1200，
“视图”：{“笔划”：“透明”}，
“层”：[{
“数据”：{
“价值观”：，
“格式”：{
“类型”：“topojson”，
“特征”：“几何体”
}
},
“投影”：{
“类型”：“墨卡托”
},
“标记”：{
“类型”：“地理形状”，
“填充”：“浅灰色”，
“笔划”：“白色”
}
}, {
“数据”：{“值”：}，
“投影”：{
“类型”：“墨卡托”
},
“标记”：“圆圈”，
“参数”：[{
“名称”：“显示”，
“选择”：{“类型”：“点”，“字段”：[“hygge”]}，
“绑定”：“图例”
}],
“编码”：{
“经度”：{
“字段”：“经度”，
“类型”：“定量”
},
“纬度”：{
“字段”：“纬度”，
“类型”：“定量”}，
“尺寸”：{
“价值”：30
},
“工具提示”：[
{“字段”：“名称”、“类型”：“名义”、“标题”：“名称”}，
{“字段”：“邻里”，“类型”：“名义”，“标题”：“邻里”}，
{“字段”：“住宿类型”，“类型”：“名义”，“标题”：“类型”}，
{“字段”：“价格”、“类型”：“数量”、“标题”：“每晚价格”}
],
“颜色”：{
“字段”：“hygge”，“类型”：“标称”，“标题”：“hygge？”，
“比例”：{“范围”：[“#6BB7B9”，“#FF5A5F”]}
},
“href”：{“字段”：“链接”，“类型”：“标称”}，
“不透明度”：{
“条件”：{“参数”：“显示”，“值”：1}，
“价值”：0.2
}
}
}, {
“数据”：{“值”：{
RaadhuspladsenLat:55.676111，
RaadhuspladsenLong:12.568611
}},
“投影”：{
“类型”：“墨卡托”
},
“标记”：“圆圈”，
“编码”：{
“经度”：{“字段”：“RaadhuspladsenLong”，“类型”：“数量”}，
“纬度”：{“字段”：“RaadhuspladsenLat”，“类型”：“定量”}，
“大小”：{“值”：400}，
“颜色”：{“值”：“#FFFF00”}，
“工具提示”：{“值”：“Rådhuspladsen（哥本哈根中心）”}
},
}
],
“配置”：{
“字体”：“Avenir”
}
}