数维图资讯 文章查看
使用SovitChart快速创建支持全国-省-市的ECharts地图
数维图
2021-11-11

如图所示,我们开发Web系统时经常遇到要使用地图进行展示,普通的需求下我们可以使用ECharts地图即可,使用ECharts开发地图的话需要找地图数据,调用ECharts地图API,配置样式,渲染数据等,一个地图效果做下来花费的精力和时间并不少。这里介绍使用SovitChart提供的地图组件可以很短的时间内完成这个功能。

操作流程:

1. 登录数维图后台进入到SovitChart编辑器。

2. 进行到SovitChart中的图表组件设计

3. 选择地图组件,然后在属性面版中设计地图的样式及功能



4 . 配置动态数据绑定(业务人设为对比每个地区的投资金额,金额不同显示颜色的深浅不一样)。

使用JSON数据源绑定数据的JSON格式定义效果:

[{
 "mapValue":"130000:100"
},{
 "mapValue":"150000:200"
}]


5 . 发布地图组件,在自己的业务系统中使用组件(可以在线集成也可以离线集成)。



6 . 集成组件到自己的网页中,同一组件可以在多个页面中使用。

//引用SovitChart的js核心库

<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>


//在自己的网页需要放置地图的位置定义div容器,并定义一个唯一的id

<!-- 创建一个div,用来集成地图 -->
<div id="chart_map_1" style="width: 95%;height: 600px;">
</div>


//通过js的接口引用组件

<script>
	let sceneMain = null;
	//说明:jCanvasQuery是SovitChart核心库提供的JQuery组件,类似$(),你也可以使用自己引入的JQuery库
	jCanvasQuery(document).ready(function() {
		//创建SovitChart解析器对象
		sceneMain = new SovitChartPaser.SceneMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		//引入图表并在指定的DIV里面显示
		sceneMain.initChart("chart_map_1", {
			pageId: "2910880950147612673" //图表的ID,发布图表的地方可以找到
		},function(type,reObj){
			if(type == "click") {
				console.log(type,reObj);
				alert("点击事件测试");
			}
		},function(id,type,reObj){
			if(type == "change") {
				console.log(id,type,reObj);
				alert("选择地区下拉测试");
			}
		});
	});
</script>

效果图:



7 . 接口使用说明。

组件引用到自己的系统中后,可以通过SovitChart提供的各个接口进行二次开始,具体可以做以下工作:

通过函数返回的对象获取组件(地图)对象,然后可以对组件进行修改,比如改变样式,添加echarts的其他效果。

let mapMain = sceneMain.initChart("chart_div_id", {
	pageId: "2805023880597471236",
}
mapMain是返回的地图对象,有了这个对象后可以使用echarts的api对地图进行修改。

通过向组件发送JSON数据使组件中的数据动态改变。

sceneMain.sendJson("sovitjs_div_id","Json28980712857350963290001",json1);//第二个参数代表在制作的图表page绑定数据时定义的JSON数据源的编号


通过回调函数获取地图各区域的鼠标进入、点击事件。
通过回调函数获取地图下拉框的change事件(下面代码中有两个回调函数,前一个是地图的鼠标事件,后一个是下拉框的改变事件)。

sceneMain.initChart("chart_map_1", {
			pageId: "2910880950147612673" //图表的ID,发布图表的地方可以找到
		},function(type,reObj){
			if(type == "click") {
				console.log(type,reObj);
				alert("点击事件测试");
			}
		},function(id,type,reObj){
			if(type == "change") {
				console.log(id,type,reObj);
				alert("选择地区下拉测试");
			}
		});

给地图添加标注接口

let markJson = [{
				"code": "1001",
				"name": "标注1",
				"value": [119.04, 35.9423]
			},
			{
				"code": "1002",
				"name": "标注2",
				"value": [120.6774, 35.9263]
			}
		];
		sceneMain.putMapMark("chart_div_id", markJson);

通过地区的code或者名称切换地图

sceneMain.changeMap("chart_div_id", "110000");//110000  北京代码
对产品感兴趣,免费使用
热门文章

数维图核心产品

Web3D模型 查看更多的模型

激光切割机,Sovit3D

【模型】激光切割机

工业生产
专业版免费

单月使用¥3 永久使用¥5 下载模型¥10

智慧机房-交换机,Sovit3D

【模型】智慧机房-交换机

园区楼宇
专业版免费

单月使用¥5 永久使用¥10 下载模型¥30

灭火器,Sovit3D

【模型】灭火器

园区楼宇
专业版免费

单月使用¥3 永久使用¥5 下载模型¥10

智慧工厂-厂房2,Sovit3D

【模型】智慧工厂-厂房2

工业生产
专业版免费

单月使用¥3 永久使用¥5 下载模型¥10

工业设备,Sovit3D

【模型】工业设备

工业生产
专业版免费

单月使用¥2 永久使用¥5 下载模型¥8

储油桶-智慧油库,Sovit3D

【模型】储油桶-智慧油库

油气行业
企业版免费

单月使用¥10 永久使用¥20 下载模型¥30

通过数维图软件平台,实现零代码可视化开发!

免费开发我的场景