本文介绍如何在景宁畲族自治县制作一个四级下钻的地图，由于官网未提供乡镇划分，作者通过HTML、CSS、JavaScript及Echarts实现，包括主页面、JS文件的设置，以及相关地图数据文件的引用。
完成的样图是这样的，写的不好也不好看，仅供参考，欢迎各位指点不足
景宁县是省级下钻四级地图，官网上没有划分乡镇的，所以乡镇只能自己划分
我的页面是jsp文件，所以有单独的js文件
1.主页面
<div class="map4" id="map" style="height: 8rem;"></div>2.JS文件
$(function () {
map();
function map() {
var data = [
{name: '红星街道', coord: [119.64, 27.98], value: 39228},
{name: '鹤溪街道', coord: [119.74, 28.01], value: 36960},
{name: '渤海镇', coord: [119.82, 28.03], value: 1467},
{name: '东坑镇', coord: [119.72, 27.79], value: 4227},
{name: '英川镇', coord: [119.32, 27.85], value: 2874},
{name: '沙湾镇', coord: [119.47, 27.85], value: 3872},
{name: '大均乡', coord: [119.57, 27.94], value: 1400},
{name: '澄照乡', coord: [119.62, 27.93], value: 4608},
{name: '梅岐乡', coord: [119.76, 27.91], value: 871},
{name: '郑坑乡', coord: [119.81, 27.98], value: 1047},
{name: '大漈乡', coord: [119.59, 27.81], value: 1328},
{name: '景南乡', coord: [119.65, 27.75], value: 1466},
{name: '雁溪乡', coord: [119.59, 27.73], value: 641},
{name: '鸬鹚乡', coord: [119.41, 27.88], value: 2005},
{name: '梧桐乡', coord: [119.51, 27.89], value: 1757},
{name: '标溪乡', coord: [119.52, 27.84], value: 935},
{name: '毛垟乡', coord: [119.39, 27.72], value: 1082},
{name: '秋炉乡', coord: [119.33, 27.72], value: 892},
{name: '大地乡', coord: [119.47, 27.77], value: 961},
{name: '家地乡', coord: [119.53, 27.71], value: 492},
{name: '九龙乡', coord: [119.85, 28.09], value: 2898},
];
//data中name是各个乡镇的名字，coord是坐标，value是数值
//初始化echarts实例
var myChart = echarts.init(document.getElementById('map'), 'macarons');
var option = {
tooltip: {
trigger: 'item',
triggerOn: "mousemove",
showContent: true, //是否显示提示框浮层
alwaysShowContent: false, //是否永远显示提示框内容
showDelay: 0, //浮层显示的延迟，单位为 ms
hideDelay: 100, //浮层隐藏的延迟，单位为 ms
enterable: false, //鼠标是否可进入提示框浮层中
confine: false, //是否将 tooltip 框限制在图表的区域内。
transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
formatter: function (params) {
if (params.data != undefined) {
info = params.name + '</br>七人普人数' + ' : ' + params.data.value + '人';
return info;
}
},
position: function (p) {
//提示框的位置，随鼠标hover的位置进行改变
return [p[0] + 10, p[1] - 10];
},
y: "bottom",
textStyle: {
fontSize: 15,
},
order: "seriesDesc",
},
toolbox: {
show: false,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
roamController: {
show: false,
x: 'right',
mapTypeControl: {
'丽水市': true
}
},
series: [
{
name: '各区域数量',
type: 'map',
mapType: '丽水市',
room: 1.2,
label: {
normal: {
color: 'rgb(234,235,250)',
formatter: '{b}',
position: [-12, -1],
show: false
}
},
geoIndex: 0,
itemStyle: {
normal: {
color: '#2B5890', //地图颜色
borderWidth: 5, //分界线wdith
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#20a2e1", // 0% 处的颜色
},
{
offset: 0.8,
color: "#22a2e1", // 80% 处的颜色
},
{
offset: 1,
color: "#00ffea", // 100% 处的颜色
},
],
},
shadowColor: "rgba(29, 111, 165,0.5)",
shadowOffsetY: 15,
shadowBlur: 20,
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#17498d", // 0% 处的颜色
},
{
offset: 1,
color: "#3a95fd", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
label: {
show: true, //是否显示高亮
textStyle: {
color: '#fff', //高亮文字颜色
},
},
itemStyle: {
color: '#0489d6', //地图高亮颜色
},
areaColor: '#53a6ef',
}
},
roam: false,
showLegendSymbol: true,
// zlevel: 5,
data: '丽水市',
markPoint: {
symbol: "",//标记点的图片 我是引用的base64 太长了就删掉了
symbolSize: [20, 20], // 图片大小
label: {
show: true,
position: 'bottom',
color: '#fff',
formatter: function (params) {
return params.data.name
}
},
data: data
}
},
]
}
;
$.get('./json/jingNing.json', function (chinaJson) {
echarts.registerMap('丽水市', chinaJson);
myChart.setOption(
option
);
});
//使用制定的配置项和数据显示图表
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
})
3.引入echarts文件和china.js(这两个文件网上下载即可)
<script type="text/javascript" src="./json/china.js"></script>
<script type="text/javascript" src="./JS/echarts-gl.min.js"></script>4.引入area_echarts.js文件
<script type="text/javascript" src="./json/area_echarts.js"></script>5.jingNing.json文件
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"adcode": 331127,
"name": "景宁畲族自治县",
"center": [
119.634669,
27.977247
],
"centroid": [
119.613501,
27.891149
],
"childrenNum": 0,
"level": "district",
"acroutes": [
100000,
330000,
331100
],
"parent": {
"adcode": 331100
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
119.902173,
28.185508
],
[
119.891569,
28.15934
],
[
119.887761,
28.154748
],
[
119.877593,
28.152696
],
[
119.875013,
28.152675
],
[
119.861533,
28.161793
],
[
119.850611,
28.165844
],
[
119.847002,
28.165662
],
[
119.844015,
28.160309
],
[
119.8444,
28.1544
],
[
119.847195,
28.151957
],
[
119.854219,
28.142687
],
[
119.857525,
28.135249
],
[
119.858316,
28.131225
],
[
119.85626,
28.127125
],
[
119.854685,
28.125308
],
[
119.84843,
28.120978
],
[
119.847017,
28.121058
],
[
119.838395,
28.127018
],
[
119.83296,
28.134547
],
[
119.831888,
28.136852
],
[
119.826586,
28.139794
],
[
119.820996,
28.141128
],
[
119.816397,
28.139927
],
[
119.813343,
28.133374
],
[
119.810925,
28.131798
],
[
119.801497,
28.130887
],
[
119.800299,
28.128556
],
[
119.800358,
28.118807
],
[
119.798325,
28.115565
],
[
119.794568,
28.114525
],
[
119.789791,
28.11527
],
[
119.783351,
28.115522
],
[
119.779617,
28.116256
],
[
119.773235,
28.116562
],
[
119.770936,
28.113662
],
[
119.768288,
28.109224
],
[
119.763593,
28.105214
],
[
119.759193,
28.103622
],
[
119.753233,
28.103145
],
[
119.749684,
28.103756
],
[
119.742896,
28.103998
],
[
最低0.47元/天 解锁文章
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
