|
|
@@ -1,7 +1,11 @@
|
|
|
<template>
|
|
|
<div class="W-full pr30 pl30 pt30 bg-green">
|
|
|
<div class="mr-auto ml-auto w877 relative bg-black">
|
|
|
- <img id="bg" style="width: 877px; height: 866px" src="http://www.bigemap.com/map_source/satel/small/14.png" />
|
|
|
+ <img
|
|
|
+ id="bg"
|
|
|
+ style="width: 877px; height: 866px"
|
|
|
+ src="http://www.bigemap.com/map_source/satel/small/14.png"
|
|
|
+ />
|
|
|
<canvas width="877" height="968" id="fuzhou"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -21,27 +25,24 @@ const logOut = () => {
|
|
|
router.push("/login");
|
|
|
});
|
|
|
};
|
|
|
-var imageDom = document.createElement("img");
|
|
|
-imageDom.src = img149;
|
|
|
-imageDom.onload = function (e) {
|
|
|
- imageDom.width = 480
|
|
|
-}
|
|
|
const renderMap = () => {
|
|
|
+ var imageDom = document.createElement("img");
|
|
|
+ imageDom.src = "http://www.bigemap.com/map_source/satel/small/14.png";
|
|
|
echarts.registerMap("fujian", fujian as any);
|
|
|
- echarts.registerMap("fujian_full", fujian_full as any);
|
|
|
+ echarts.registerMap("fuzhou_full", fuzhou_full as any);
|
|
|
echarts.registerMap("fujian_full", fujian_full as any);
|
|
|
let Chart = echarts.init(document.getElementById("fuzhou") as HTMLElement);
|
|
|
// 颜色或文字的配置
|
|
|
-
|
|
|
let option = {
|
|
|
geo: [
|
|
|
+ //线段层
|
|
|
{
|
|
|
type: "map",
|
|
|
aspectScale: 1, // 横向拉伸
|
|
|
zlevel: 3,
|
|
|
tooltip: {},
|
|
|
zoom: 1, //缩放比例
|
|
|
- roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ roam: false, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
map: "fujian_full",
|
|
|
nameMap: "福建地图",
|
|
|
label: {
|
|
|
@@ -60,15 +61,55 @@ const renderMap = () => {
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
areaColor: "transparent",
|
|
|
- borderWidth: 1,
|
|
|
+ borderWidth: 2,
|
|
|
borderColor: "#fff",
|
|
|
-
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "rgba(29,166,176,0)",
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutSize: 877,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //颜色层
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ aspectScale: 1, // 横向拉伸
|
|
|
+ zlevel: 2,
|
|
|
+ tooltip: {},
|
|
|
+ zoom: 1, //缩放比例
|
|
|
+ roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ map: "fujian",
|
|
|
+ nameMap: "福建地图",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false, // 默认地图文字字号和字体颜色
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: "rgba(0,126,126,0.45)",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "rgba(29,166,176,0.45)",
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
},
|
|
|
+
|
|
|
layoutCenter: ["50%", "44.5%"],
|
|
|
layoutSize: 877,
|
|
|
top: 0,
|
|
|
@@ -77,24 +118,68 @@ const renderMap = () => {
|
|
|
Alaska: [20, -20],
|
|
|
},
|
|
|
},
|
|
|
+ //阴影层
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ aspectScale: 1, // 横向拉伸
|
|
|
+ zlevel: 0,
|
|
|
+ tooltip: {},
|
|
|
+ zoom: 1, //缩放比例
|
|
|
+ roam: false, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ map: "fujian",
|
|
|
+ nameMap: "福建地图",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false, // 默认地图文字字号和字体颜色
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: "rgba(0,0,0,0)",
|
|
|
+ borderWidth:8,
|
|
|
+ borderColor: "rgba(0,106,116,1)",
|
|
|
+ // shadowBlur:10
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "rgba(0,0,0,0)",
|
|
|
+ borderWidth:8,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ layoutCenter: ["50%", "45%"],
|
|
|
+ layoutSize: 877,
|
|
|
+
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
// {
|
|
|
// type: "map",
|
|
|
// aspectScale: 1, // 横向拉伸
|
|
|
- // zlevel: 2,
|
|
|
+ // zlevel: 0,
|
|
|
// tooltip: {},
|
|
|
// zoom: 1, //缩放比例
|
|
|
// roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- // map: "fujian_full",
|
|
|
+ // map: "fujian",
|
|
|
// nameMap: "福建地图",
|
|
|
// label: {
|
|
|
- // show: true,
|
|
|
+ // show: false,
|
|
|
// normal: {
|
|
|
- // show: true, // 默认地图文字字号和字体颜色
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
// fontSize: 10,
|
|
|
// color: "#ffffff",
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
- // show: true,
|
|
|
+ // show: false,
|
|
|
// fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
// color: "rgba(0,0,0,0)",
|
|
|
// },
|
|
|
@@ -102,11 +187,52 @@ const renderMap = () => {
|
|
|
// itemStyle: {
|
|
|
// normal: {
|
|
|
// areaColor: "rgba(0,0,0,0)",
|
|
|
+ // borderWidth: 5,
|
|
|
+ // borderColor: "rgba(29,166,176,0.45)",
|
|
|
+ // // shadowBlur:10
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
// borderWidth: 0,
|
|
|
- // borderColor: "#fff",
|
|
|
- // shadowColor: "rgba(29,166,176,0.65)",
|
|
|
- // shadowOffsetY: 8,
|
|
|
- // shadowBlur: 1,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+
|
|
|
+ // layoutCenter: ["50%", "45.3%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: 0,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // normal: {
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // areaColor: "rgba(0,0,0,0)",
|
|
|
+ // borderWidth: 1,
|
|
|
+ // borderColor: "rgba(255,255,255,0.8)",
|
|
|
+ // // shadowBlur:10
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// areaColor: "rgba(29,166,176,0)",
|
|
|
@@ -114,7 +240,7 @@ const renderMap = () => {
|
|
|
// },
|
|
|
// },
|
|
|
|
|
|
- // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutCenter: ["50%", "45.3%"],
|
|
|
// layoutSize: 877,
|
|
|
// top: 0,
|
|
|
// left: 0,
|
|
|
@@ -125,11 +251,11 @@ const renderMap = () => {
|
|
|
{
|
|
|
type: "map",
|
|
|
aspectScale: 1, // 横向拉伸
|
|
|
- zlevel: 1,
|
|
|
+ zlevel: -1,
|
|
|
tooltip: {},
|
|
|
zoom: 1, //缩放比例
|
|
|
roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- map: "fujian_full",
|
|
|
+ map: "fujian",
|
|
|
nameMap: "福建地图",
|
|
|
label: {
|
|
|
show: false,
|
|
|
@@ -137,6 +263,7 @@ const renderMap = () => {
|
|
|
show: false, // 默认地图文字字号和字体颜色
|
|
|
fontSize: 10,
|
|
|
color: "#ffffff",
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false,
|
|
|
@@ -146,15 +273,20 @@ const renderMap = () => {
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- areaColor: "rgba(29,166,176,0.55)",
|
|
|
+ areaColor: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 11.5,
|
|
|
+ borderColor:"rgba(255,255,255,0.7)"
|
|
|
+ // shadowBlur:10
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
- areaColor: "rgba(29,166,176,0)",
|
|
|
+ areaColor: "rgba(0,166,176,0)",
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
|
|
|
- layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutCenter: ["50%", "45%"],
|
|
|
layoutSize: 877,
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
@@ -163,73 +295,187 @@ const renderMap = () => {
|
|
|
},
|
|
|
},
|
|
|
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: 0,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1.01, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // normal: {
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // areaColor: "rgba(0,0,0,0)",
|
|
|
+ // borderWidth: 9,
|
|
|
+ // borderColor:"rgba(255,255,255,1)"
|
|
|
+ // // shadowBlur:10
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // },
|
|
|
+
|
|
|
+ // },
|
|
|
+
|
|
|
+ // layoutCenter: ["50%", "45%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: 1,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // normal: {
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // areaColor: "rgba(29,166,176,0.65)",
|
|
|
+ // // shadowBlur:10
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // },
|
|
|
+
|
|
|
+ // },
|
|
|
+
|
|
|
+ // layoutCenter: ["50%", "46.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 20,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
],
|
|
|
series: [
|
|
|
- {
|
|
|
- type: 'map',
|
|
|
- map: 'fujian_full',
|
|
|
- aspectScale: 1,
|
|
|
- zoom: 1,
|
|
|
+ // {
|
|
|
+ // type: 'map',
|
|
|
+ // map: 'fujian',
|
|
|
+ // aspectScale: 1,
|
|
|
+ // zoom: 1,
|
|
|
+ // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // roam: false,
|
|
|
+ // selectedMode: 'multiple',
|
|
|
+ // tooltip: {
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 32
|
|
|
+ // },
|
|
|
+ // formatter: function (params) {
|
|
|
+ // if (params.value) {
|
|
|
+ // return `${params.name}：${params.value}`
|
|
|
+ // } else {
|
|
|
+ // return ''
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // color: '#FFF',
|
|
|
+ // fontSize: 25,
|
|
|
+ // formatter: function (value) {
|
|
|
+ // if (value.name == '南海诸岛') {
|
|
|
+ // return ' '
|
|
|
+ // }
|
|
|
+ // return '{a|' + value.name + '}'
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // borderColor: '#4f83b3',
|
|
|
+ // borderWidth: 0,
|
|
|
+ // shallowColor: '#ff4400',
|
|
|
+ // shadowOffsetY: 0,
|
|
|
+ // areaColor: 'rgba(255,0,0,0.01)'
|
|
|
|
|
|
- layoutCenter: ["50%", "44.5%"],
|
|
|
- layoutSize: 877,
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- roam: false,
|
|
|
- selectedMode: 'multiple',
|
|
|
- tooltip: {
|
|
|
- textStyle: {
|
|
|
- fontSize: 32
|
|
|
- },
|
|
|
- formatter: function (params) {
|
|
|
- if (params.value) {
|
|
|
- return `${params.name}：${params.value}`
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ // },
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: 'rgba(255,0,0,0.01)'
|
|
|
+ // },
|
|
|
+ // select: {
|
|
|
+ // },
|
|
|
+ // zlevel: 2,
|
|
|
+ // data: []
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ zlevel: 99,
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ symbol: "pin",
|
|
|
+ legendHoverLink: true,
|
|
|
+ symbolSize: [60, 60],
|
|
|
+ // 这里渲染标志里的内容以及样式
|
|
|
label: {
|
|
|
show: true,
|
|
|
- color: '#FFF',
|
|
|
- fontSize: 25,
|
|
|
- formatter: function (value) {
|
|
|
- if (value.name == '南海诸岛') {
|
|
|
- return ' '
|
|
|
- }
|
|
|
- return '{a|' + value.name + '}'
|
|
|
+ formatter(value) {
|
|
|
+ return value.data.value[2];
|
|
|
},
|
|
|
+ color: "#fff",
|
|
|
},
|
|
|
+ // 标志的样式
|
|
|
itemStyle: {
|
|
|
- borderColor: '#4f83b3',
|
|
|
- borderWidth: 2,
|
|
|
- areaColor: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: 'transparent' // 0% 处的颜色
|
|
|
- // color: '#fff' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'transparent' // 100% 处的颜色
|
|
|
- // color: '#fff' // 100% 处的颜色
|
|
|
- }],
|
|
|
- global: true, // 缺省为 false
|
|
|
- // image: ''
|
|
|
+ normal: {
|
|
|
+ color: "rgba(255,0,0,1)",
|
|
|
+ shadowBlur: 2,
|
|
|
+ shadowColor: "D8BC37",
|
|
|
},
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- },
|
|
|
- select: {
|
|
|
+ // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
|
|
|
+ // 至于如何展示，完全是靠上面的formatter来自己定义的
|
|
|
+ data: [
|
|
|
+ { name: "西藏", value: [91.23, 29.5, 2333] },
|
|
|
+ { name: "黑龙江", value: [128.03, 47.01, 1007] },
|
|
|
+ { name: "福州", value: [119.1747, 26.0427, 1007] },
|
|
|
+ ],
|
|
|
+ showEffectOn: "render",
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: "stroke",
|
|
|
},
|
|
|
- zlevel: 2,
|
|
|
- data: []
|
|
|
- }
|
|
|
-
|
|
|
+ hoverAnimation: true,
|
|
|
+ },
|
|
|
],
|
|
|
};
|
|
|
Chart.setOption(option);
|
