|
百度地图API能够直接划分区级别的行政划分：
如果是在线访问的系统可以参考链接https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618#comments；
如果是离线的系统，可以通过这个echarts地址下载实现离线地图https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
但是对于乡镇级别的行政划分，百度地图无法直接获取，这时可能通过三种方式实现：
1、使用静态图片和Dreamweaver做map area，因为是图片所以适应性差，可以参考这个地址下载“”各区、地级市的图片“
 
接下来使用Dreamweaver或者其他工具来做map area，选择一张地图，我点 我点 我点 很快把各个热点点出来
最后增加click事件，或者其他事件
这样就完成了，把代码复制到自己工程
2、使用AI（AdobeIllustratorCS） 画svg图，通过svg的path增加click事件
使用曲率工具画出来的，导出svg时是path，path直接增加onclick事件就行；使用钢笔工具画出的svg，导出是polygon，polygon无法直接增加onclick事件；
3、使用GeoJson数据做echarts或者百度 高德 图，适应性强。但是GeoJson获取麻烦，获取方式可能自己通过工具画，或者购买shp文件实现。
这里介绍下不专业的自己画，通过http://geojson.io/#map=10/31.3396/120.9718绘制地图边界
通过地图画多边形，然后在右侧得到GeoJson数据，将GeoJson放入ECharts中，得到离线地图
/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
http://echarts.baidu.com/option.html#series-map.geoIndex
并且加了pin气泡图标以示数值大小
*/
var uploadedDataURL = "/asset/get/s/data-1509940365453-SkScnUTCW.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.67520141601561,
31.22337141316801
],
[
120.66970825195312,
31.213975956122024
],
[
120.6683349609375,
31.1634593819847
],
[
120.67245483398438,
31.123496964067325
],
[
120.67245483398438,
31.067050772707812
],
[
120.68069458007814,
31.04705137289917
],
[
120.78369140624999,
31.04705137289917
],
[
120.86746215820314,
31.05058098421751
],
[
120.94161987304686,
31.071755902820133
],
[
121.01028442382812,
31.089398067100554
],
[
121.05285644531249,
31.11526731701526
],
[
121.04873657226561,
31.142304905845737
],
[
121.025390625,
31.196356957735073
],
[
120.90316772460938,
31.225720131523712
],
[
120.8441162109375,
31.258596058801725
],
[
120.67520141601561,
31.22337141316801
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.84548950195312,
31.260943901385993
],
[
120.84686279296874,
31.256248157815243
],
[
120.90042114257812,
31.22337141316801
],
[
121.025390625,
31.196356957735073
],
[
121.0638427734375,
31.11879439598953
],
[
121.07208251953125,
31.12702373719877
],
[
121.1077880859375,
31.21867380136463
],
[
121.12701416015624,
31.30084828737045
],
[
121.08993530273438,
31.347772997537877
],
[
120.9649658203125,
31.380606373669693
],
[
120.87432861328125,
31.361845848762645
],
[
120.84548950195312,
31.260943901385993
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.87295532226562,
31.365363732463518
],
[
121.08581542968751,
31.525873333239655
],
[
120.97869873046875,
31.590234076606844
],
[
120.77270507812499,
31.60544012595478
],
[
120.60791015625,
31.577365480690492
],
[
120.54336547851562,
31.46381099222185
],
[
120.63400268554689,
31.380606373669693
],
[
120.65185546875,
31.27268223818717
],
[
120.79330444335938,
31.267987078700706
],
[
120.83999633789062,
31.26329168556556
],
[
120.87020874023438,
31.347772997537877
],
[
120.84548950195312,
31.258596058801725
],
[
120.87295532226562,
31.365363732463518
]
]
]
}
}
]
};
echarts.registerMap('jiangxi', geoJson);
myChart.hideLoading();
var geoCoordMap = {
'AAA市': [120.84548950195312, 31.258596058801725],
'BBB市': [121.08581542968751, 31.258596058801725],
'CCC市': [120.79330444335938,31.347772997537877]
}
var data = [{
name: 'AAA市',
value: 199
},
{
name: 'BBB市',
value: 152
},
{
name: 'CCC市',
value: 299
}
];
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title : {
text : '“昆山” - 江苏省',
subtext : '',
x : 'center',
textStyle: {
color : '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof(params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['credit_pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// dataView: {readOnly: false},
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: 'jiangxi',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [{
name: 'credit_pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'jiangxi',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
myChart.setOption(option);
});
|