Vega 可缩放美国地图
问题描述 投票：0回答：3
我想使用这张地图https://vega.github.io/vega/examples/zoomable-world-map/但仅限于美国。
我用过这个规格。
private specVega = {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An interactive world map supporting pan and zoom.",
"width": 900,
"height": 500,
"autosize": "none",
"signals": [
{ "name": "tx", "update": "width / 2" },
{ "name": "ty", "update": "height / 2" },
{
"name": "scale",
"value": 150,
"on": [{
"events": {"type": "wheel", "consume": true},
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
}]
},
{
"name": "angles",
"value": [0, 0],
"on": [{
"events": "mousedown",
"update": "[rotateX, centerY]"
}]
},
{
"name": "cloned",
"value": null,
"on": [{
"events": "mousedown",
"update": "copy('projection')"
}]
},
{
"name": "start",
"value": null,
"on": [{
"events": "mousedown",
"update": "invert(cloned, xy())"
}]
},
{
"name": "drag", "value": null,
"on": [{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}]
},
{
"name": "delta", "value": null,
"on": [{
"events": {"signal": "drag"},
"update": "[drag[0] - start[0], start[1] - drag[1]]"
}]
},
{
"name": "rotateX", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "angles[0] + delta[0]"
}]
},
{
"name": "centerY", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "clamp(angles[1] + delta[1], -60, 60)"
}]
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": {"signal": "scale"},
"rotate": [{"signal": "rotateX"}, 0, 0],
"center": [0, {"signal": "centerY"}],
"translate": [{"signal": "tx"}, {"signal": "ty"}]
}
],
"data": [
{
"name": "counties",
values: null,
"format": {"type": "topojson", "feature": "states"},
},
{
"name": "graticule",
"transform": [
{ "type": "graticule", "step": [15, 15] }
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "graticule"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"stroke": {"value": "#ddd"},
"fill": {"value": null}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
},
{
"type": "shape",
"from": {"data": "states"},
"encode": {
"enter": {
"strokeWidth": {"value": 0.5},
"stroke": {"value": "#bbb"},
"fill": {"value": "#e5e8d3"}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
}
this.specVega["data"][0]["values"] = "data/us-10m.json" （这只是为了了解我使用了哪些数据）
所以我在这里只放了美国的数据，但它不起作用。控制台出现错误：
Undefined data set name: "states"
一般来说，我只需要一张仅适用于美国的可缩放地图，我将其用作气泡地图。 如果这张地图有缩放功能，我肯定会使用它https://vega.github.io/vega-lite/examples/geo_layer.html
3个回答
1
投票
投票
这是“albersUsa”投影中按州或县划分的美国地图的工作示例。通过鼠标滚轮进行缩放，通过鼠标单击拖动进行平移。为了获得更好的性能，缩放和平移最好针对州而不是县进行。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An interactive USA map supporting pan and zoom.",
"width": 900,
"height": 500,
"autosize": "none",
"signals": [
{
"name": "signal_show_map_graticule",
"value": true,
"bind": {
"input": "checkbox",
"name": "Map graticule: "}
},
{
"name": "signal_states_or_counties",
"value": "states",
"bind": { "input": "select",
"options": ["states", "counties"],
"name": "Map areas: "
}
},
{
"name": "signal_map_scale",
"value": 1000,
"bind": {"input": "range", "min": 1000, "max": 4000, "step": 50, "name": "Map scale: "},
"on": [{
"events": {"type": "wheel", "consume": true},
"update": "round(clamp(signal_map_scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 1000, 4000))"
}]
},
{ "name": "signal_translate_xy",
"value": [450, 250],
"update": "[clamp(signal_translate_last_xy[0] + signal_mouse_delta_xy[0], -300, 1200), clamp(signal_translate_last_xy[1] + signal_mouse_delta_xy[1], -200, 800)]"
},
{ "name": "signal_translate_last_xy",
"value": [450, 250],
"on": [{
"events": [
{"type": "mousedown"}
],
"update": "signal_translate_xy"
}]
},
{
"name": "signal_mouse_start_xy",
"value": [0, 0],
"on": [{
"events": [
{"type": "mousedown"}
],
"update": "xy()"
}]
},
{
"name": "signal_mouse_drag_xy",
"value": [0, 0],
"on": [{
"events": [
{
"type": "mousemove",
"between": [
{"type": "mousedown"},
{"type": "mouseup"}
]
}
],
"update": "xy()"
}]
},
{
"name": "signal_mouse_delta_xy",
"value": [0, 0],
"update": "[signal_mouse_drag_xy[0] - signal_mouse_start_xy[0], signal_mouse_drag_xy[1] - signal_mouse_start_xy[1]]"
}
],
"projections": [
{
"name": "map_projection",
"type": "albersUsa",
"scale": {"signal": "signal_map_scale"},
"translate": {"signal": "signal_translate_xy"}
}
],
"data": [
{
"name": "data_geo_usa",
"url": "data/us-10m.json",
"format": {
"type": "topojson",
"feature": {"signal": "signal_states_or_counties"}
}
},
{
"name": "data_geo_graticule",
"transform": [
{ "type": "graticule", "step": [5, 5] }
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "data_geo_graticule"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"stroke": {"value": "#ddd"}
},
"update": {
"strokeOpacity": {"signal": "signal_show_map_graticule ? 1 : 0"}
}
},
"transform": [
{ "type": "geoshape", "projection": "map_projection" }
]
},
{
"type": "shape",
"from": {"data": "data_geo_usa"},
"encode": {
"enter": {
"strokeWidth": {"value": 0.5},
"stroke": {"value": "#bbb"},
"fill": {"value": "#e5e8d3"}
}
},
"transform": [
{ "type": "geoshape", "projection": "map_projection" }
]
}
] }
1
投票
投票
将“数据”更改为：
"data": [
{
"name": "states",
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
},
1
投票
投票
抱歉，我不是地图专家。我有以下情况，其中缩放工作正常，但拖动有点卡顿，但绝对有用。我可能需要相当长的时间才能让它变得更好。
罗伊的答案是你的另一种选择。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": "none",
"background": "white",
"padding": 5,
"width": 500,
"height": 300,
"signals": [
{"name": "tx", "update": "width / 2"},
{"name": "ty", "update": "height / 2"},
{
"name": "scale",
"value": 685,
"on": [
{
"events": {"type": "wheel", "consume": true},
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
}
]
},
{
"name": "angles",
"value": [222, 146],
"on": [{"events": "mousedown", "update": "[rotateX, centerY]"}]
},
{
"name": "cloned",
"value": null,
"on": [{"events": "mousedown", "update": "copy('projection')"}]
},
{
"name": "start",
"value": null,
"on": [{"events": "mousedown", "update": "invert(cloned, xy())"}]
},
{
"name": "drag",
"value": null,
"on": [
{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}
]
},
{
"name": "delta",
"value": null,
"on": [
{
"events": {"signal": "drag"},
"update": "[(drag[0] - start[0])*4, (start[1] - drag[1])*4]"
}
]
},
{
"name": "rotateX",
"value": 250,
"on": [{"events": {"signal": "delta"}, "update": "angles[0] + delta[0]"}]
},
{
"name": "centerY",
"value": 140,
"on": [{"events": {"signal": "delta"}, "update": "angles[1] + delta[1]"}]
}
],
"data": [
{
"name": "source_0",
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
}
],
"projections": [
{
"name": "projection",
"scale": {"signal": "scale"},
"translate": [{"signal": "rotateX"}, {"signal": "centerY"}],
"type": "albersUsa"
}
],
"marks": [
{
"name": "marks",
"type": "shape",
"style": ["geoshape"],
"from": {"data": "source_0"},
"encode": {
"update": {"fill": {"value": "lightgray"}, "stroke": {"value": "white"}}
},
"transform": [{"type": "geoshape", "projection": "projection"}]
}
]
}
最新问题
- 调试 CloudFormation 验证问题
- 在下一个查询的 WHERE 子句中使用一个查询的结果
- 点击时动画冻结
- React Native - 如何在 Android 上的 TextInput 中显示滚动条
- Helm Release 卡在卸载状态
- Laravel 4：更新记录时具有额外条件的独特验证
- 无法在评论表中附加topic_id
- SharePoint 页面未在 MS Teams 下应用程序的个人选项卡中加载
- 使用 select 查询的结果作为另一个 select 查询中的 where 子句的参数？
- 小数据集上的 r 平方分数变化极大
- VB.NET - 我可以在一个列表（字符串）上使用 LINQ 来查找以另一个列表（字符串）中的项目结尾的字符串吗？
- 如何从 YII 配置中检索值并在配置中创建自定义参数？
- 为表的每一行运行存储过程
- Yii2模型公共属性
- 为什么 VSCode 的集成终端会忽略 conda activate 但尊重 .bashrc 中 Poetry 路径的更新？
- 如何对不相交的集合进行分割操作？
- Java巴拿马/外部函数和内存API：读取未知长度的字节数组
- 如何使用 Mongo Projections 排除数组的字段
- FastAPI POST - 错误 422 详细信息'': ( ( loc'':(正文文件 msg'': 必填字段''，类型 '': value_error 缺失)))
- @font-face 不适用于 Wordpress 中的子主题
© www.soinside.com 2019 - 2024. All rights reserved.