Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
程序员文章站
2022-06-22 19:52:20
series-map组件,在构建地理区域数据可视化时,一般是使用getJSON()来获取geojso数据,然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问,需要搭建http服务器。代码如下: //调用地图geojson $.getJSON('geojson/au-all.geo.json', function (data) { //some codes; }然后通过:http://test.com/进行预览访问。能不能在本地直接点击访问呢?答案是肯定的...
series-map组件,在构建地理区域数据可视化时,一般是使用getJSON()来获取geojso数据,然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问,需要搭建http服务器。
代码如下:
//调用地图geojson
$.getJSON('geojson/au-all.geo.json', function (data) {
//some codes;
}
然后通过:http://test.com/进行预览访问。
能不能在本地直接点击访问呢?答案是肯定的。其步骤如下:
- 获取对应区域的geojson;
- 将geojson文件转换位js文件;
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log('ECharts is not Loaded');
return;
}
if (!echarts.registerMap) {
log('ECharts Map is not loaded')
return;
}
echarts.registerMap('lockdatav',
//将geojson数据内容直接复制到该处即可;
);
}));
将改JS文件保存为lockgeojson.js。
- html文件中直接调用lockgeojson.js;
<!--对应的国家或地区JS文件-->
<script type="text/javascript" src="js/lockgeojson.js"></script>
- echarts代码开发
series: [{
type: 'map',
map: 'lockdatav',//对应JS文件中地图的名称;
roam: true,
zoom: 1,
aspectScale: 1,
nameMap: {//自定义地区的名称映射
'South Australia': '南澳大利亚州',
'New South Wales': '新南威尔士州',
'Queensland': '昆士兰州',
'Tasmania': '塔斯马尼亚',
'Victoria': '维多利亚州',
'Western Australia': '西澳大利亚州',
'Australian Capital Territory': '澳大利亚首都领地',
'Northern Territory': '北领地',
'Norfolk Island': '诺福克岛',
'Jervis Bay Territory': '杰维斯湾地区',
},
label: {
normal: {
show: false,
color: "#fff"
},
emphasis: {
show: true,
color: "#fff"
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
},
}]
- echarts自适应窗口;
//渲染图表,并自适应窗口;
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
Done!
本文地址:https://blog.csdn.net/weixin_41290949/article/details/107375048