本项目的是打造一款可以通过简单轻量化配置就可以快速上手的三维地图工具库。目前本工具库底层基于three.js Javascript 三维库实现。
import V3Map from "../../../src/V3Map";
const configuration = {
background: {
color: "#1D466A"
},
fonts: {
alibaba: "../assets/alibaba_puhui_regular.json"
},
title: {
show: true,
fontSize: 1,
font: "alibaba",
text: "浙江省驾驶舱大屏",
mirror: true,
mirrorOpacityRate: 0.2,
depthDelta: 0.8,
verticalDelta: 10,
},
subtitle: {
color: 0xcccccc,
show: true,
fontSize: 0.3,
font: "alibaba",
text: "ZHE JIANG PROVINCE CENTRY SCREEN",
mirror: true,
mirrorOpacityRate: 0.2,
depthDelta: 0.2,
verticalDelta: 10
},
depth: 0.5,
border: {
show: true,
width: 0.06,
src: "../assets/boundary.png",
},
main: {
border: {
show: true,
depthDelta: 0.001,
color: 0xffffff,
weight: 1.0
},
dataMark: {
show: true,
url: "../assets/mark.png",
scale: 0.6
}
},
dataLabel: {
show: true,
className: "v3map-data-datalabel",
},
flowing: {
show: true,
url: "../assets/flow.png",
minDepthDelta: 0.0001,
maxDepthDelta: 1,
series: [
{
start: 330200,
end: 330100
}
]
},
bar: {
show: true,
width: 0.16,
depthDelta: 0.01,
maxHeight: 2.4,
opacity: 0.9,
color: 0xffffff,
src: "../assets/pillar.png",
scatter: "../assets/scatter.png",
scatterRate: 4,
dataLabel: {
show: true,
className: "v3map-chart-datalabel",
style: {
color: "#ffffff",
fontSize: "12px"
}
}
},
events: {
select: {
onSelect: function () { },
depthDelta: 0.2,
border: {
weight: 2.0
}
}
}
};
const series = [{
type: "bar",
data: [{
key: 330100,
name: "杭州市总人口",
value: 1078
}, {
key: 330200,
name: "宁波市总人口",
value: 800
}]
}];
const map = new V3Map(configuration, v3map_data_source, series);
map.render(document.getElementById("map"));
- v3map_data_source 是绘制三维地图需要的地图经纬度坐标数据。具体参考事例里的资源文件夹中找到。
- configuration是设置三维地图渲染的配置项，包括三维地图的整体选项以及边框，文本标签，图标表示，流光动画以及事件处理等。
- series用于指定基于三维地图基础上柱状图等图表功能的数据。目前仅支持柱状图。series可空。
- 地图渲染需要指定在HTML页面的容器。
V3Map默认包含了打包版本。只需要在HTML页面中通过常规Javascript脚本引入的方式引入V3Map的分发脚本。默认分发脚本在dist目录下可以找到。
在页面中需要引入如下v3map.css层叠样式表，three.bundle.js及v3map.bundle.js脚本。
<link href="../../dist/v3map.css" rel="stylesheet" />
<script type="text/javascript" src="dist/three.bundle.js"></script>
<script type="text/javascript" src="dist/v3map.bundle.js"></script>
引入脚本后，就可以直接使用V3Map对象进行地图构建。详细用法请见import使用。
const map = new V3Map(configuration, dataSource, series);
map.render(document.getElementById("map"));
V3Map提供了诺干个事例，包括如何设置标题，文本标签，图标，流光动线，事件以及柱状图等。具体事例请查看examples目录。如果需要查看事例，可以运行下面的命令启动vite。
npx vite
- API文档请查看docs目录，希望能对你有所帮助。
- 修复地图数据中无中心点的单元展示报错bug。
- 增加地图可以根据垂直平面视角调整的功能。
- 更新溜边同时支持单一颜色的设置。
- V3Map实现标题及副标题显示。
- V3Map实现整体基础地图模型高光边框的展示。
- V3Map实现简单柱状图表功能。
- V3Map实现图表数据更新接口。
- 修复V3Map模型锯齿化bug。
- 修复V3Map模型模糊bug。
- 变更V3Map配置项数据模型。
2024年03月08日