|
|
@@ -1,11 +1,7 @@
|
|
|
<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>
|
|
|
@@ -35,12 +31,13 @@ const renderMap = () => {
|
|
|
// 颜色或文字的配置
|
|
|
let option = {
|
|
|
geo: [
|
|
|
+ //线段层
|
|
|
{
|
|
|
type: "map",
|
|
|
aspectScale: 1, // 横向拉伸
|
|
|
zlevel: 3,
|
|
|
tooltip: {},
|
|
|
- zoom: 1.01, //缩放比例
|
|
|
+ zoom: 1, //缩放比例
|
|
|
roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
map: "fujian_full",
|
|
|
nameMap: "福建地图",
|
|
|
@@ -60,9 +57,9 @@ const renderMap = () => {
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
areaColor: "transparent",
|
|
|
- borderWidth: 1,
|
|
|
+ borderWidth: 2,
|
|
|
borderColor: "#fff",
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "rgba(29,166,176,0)",
|
|
|
@@ -77,59 +74,62 @@ const renderMap = () => {
|
|
|
Alaska: [20, -20],
|
|
|
},
|
|
|
},
|
|
|
- // {
|
|
|
- // type: "map",
|
|
|
- // aspectScale: 1, // 横向拉伸
|
|
|
- // zlevel: 2,
|
|
|
- // tooltip: {},
|
|
|
- // zoom: 1, //缩放比例
|
|
|
- // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- // map: "fujian_full",
|
|
|
- // nameMap: "福建地图",
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // normal: {
|
|
|
- // show: true, // 默认地图文字字号和字体颜色
|
|
|
- // fontSize: 10,
|
|
|
- // color: "#ffffff",
|
|
|
- // },
|
|
|
- // emphasis: {
|
|
|
- // show: true,
|
|
|
- // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
- // color: "rgba(0,0,0,0)",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // areaColor: "rgba(0,0,0,0)",
|
|
|
- // borderWidth: 0,
|
|
|
- // borderColor: "#fff",
|
|
|
- // shadowColor: "rgba(29,166,176,0.65)",
|
|
|
- // shadowOffsetY: 8,
|
|
|
- // shadowBlur: 1,
|
|
|
- // },
|
|
|
- // emphasis: {
|
|
|
- // areaColor: "rgba(29,166,176,0)",
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // },
|
|
|
+ //颜色层
|
|
|
+ {
|
|
|
+ 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(29,166,176,0.35)",
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "rgba(29,166,176,0.45)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutSize: 877,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //阴影层
|
|
|
|
|
|
- // layoutCenter: ["50%", "44.5%"],
|
|
|
- // layoutSize: 877,
|
|
|
- // top: 0,
|
|
|
- // left: 0,
|
|
|
- // textFixed: {
|
|
|
- // Alaska: [20, -20],
|
|
|
- // },
|
|
|
- // },
|
|
|
{
|
|
|
type: "map",
|
|
|
aspectScale: 1, // 横向拉伸
|
|
|
- zlevel: 1,
|
|
|
+ zlevel: 0,
|
|
|
tooltip: {},
|
|
|
- zoom: 1.01, //缩放比例
|
|
|
+ zoom: 1, //缩放比例
|
|
|
roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- map: "fujian_full",
|
|
|
+ map: "fujian",
|
|
|
nameMap: "福建地图",
|
|
|
label: {
|
|
|
show: false,
|
|
|
@@ -137,6 +137,7 @@ const renderMap = () => {
|
|
|
show: false, // 默认地图文字字号和字体颜色
|
|
|
fontSize: 10,
|
|
|
color: "#ffffff",
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false,
|
|
|
@@ -146,15 +147,22 @@ const renderMap = () => {
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- areaColor: "rgba(29,166,176,0.55)",
|
|
|
+ areaColor: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 5,
|
|
|
+ borderColor:"rgba(0,166,166,1)"
|
|
|
+ // shadowBlur:10
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "rgba(29,166,176,0)",
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
|
|
|
- layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutCenter: ["50%", "45%"],
|
|
|
layoutSize: 877,
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
@@ -162,15 +170,14 @@ const renderMap = () => {
|
|
|
Alaska: [20, -20],
|
|
|
},
|
|
|
},
|
|
|
- //重影子
|
|
|
{
|
|
|
type: "map",
|
|
|
aspectScale: 1, // 横向拉伸
|
|
|
- zlevel: -1,
|
|
|
+ zlevel: 0,
|
|
|
tooltip: {},
|
|
|
- zoom: 1.01, //缩放比例
|
|
|
+ zoom: 1, //缩放比例
|
|
|
roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- map: "fujian_full",
|
|
|
+ map: "fujian",
|
|
|
nameMap: "福建地图",
|
|
|
label: {
|
|
|
show: false,
|
|
|
@@ -178,6 +185,7 @@ const renderMap = () => {
|
|
|
show: false, // 默认地图文字字号和字体颜色
|
|
|
fontSize: 10,
|
|
|
color: "#ffffff",
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false,
|
|
|
@@ -187,39 +195,22 @@ const renderMap = () => {
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- borderWidth: 10,
|
|
|
- borderColor: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(29,166,176,0.55)", // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(29,166,176,0.55)", // 0% 处的颜色
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- ],
|
|
|
- globalCoord:true
|
|
|
-
|
|
|
- },
|
|
|
- areaColor:"rgba(255,255,255,0)",
|
|
|
- shadowColor: "rgba(255, 255, 255,1)",
|
|
|
- shadowOffsetY: 4,
|
|
|
- shadowBlur: 0,
|
|
|
+ areaColor: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 5,
|
|
|
+ borderColor:"rgba(0,120,120,1)"
|
|
|
+ // shadowBlur:10
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
emphasis: {
|
|
|
-
|
|
|
+ areaColor: "rgba(29,166,176,0)",
|
|
|
+ borderWidth: 0,
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
|
|
|
- layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutCenter: ["50%", "45.5%"],
|
|
|
layoutSize: 877,
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
@@ -230,11 +221,11 @@ const renderMap = () => {
|
|
|
// {
|
|
|
// type: "map",
|
|
|
// aspectScale: 1, // 横向拉伸
|
|
|
- // zlevel: -2,
|
|
|
+ // zlevel: 0,
|
|
|
// tooltip: {},
|
|
|
- // zoom: 1.01, //缩放比例
|
|
|
+ // zoom: 1, //缩放比例
|
|
|
// roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- // map: "fujian_full",
|
|
|
+ // map: "fujian",
|
|
|
// nameMap: "福建地图",
|
|
|
// label: {
|
|
|
// show: false,
|
|
|
@@ -242,6 +233,7 @@ const renderMap = () => {
|
|
|
// show: false, // 默认地图文字字号和字体颜色
|
|
|
// fontSize: 10,
|
|
|
// color: "#ffffff",
|
|
|
+
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// show: false,
|
|
|
@@ -251,19 +243,22 @@ const renderMap = () => {
|
|
|
// },
|
|
|
// itemStyle: {
|
|
|
// normal: {
|
|
|
- // borderWidth: 15,
|
|
|
- // borderColor: "#fff",
|
|
|
- // areaColor:"rgba(255,255,255,0)",
|
|
|
- // shadowColor: "rgba(0, 0, 0,0.5)",
|
|
|
- // shadowOffsetY: 5,
|
|
|
- // shadowBlur: 15,
|
|
|
+ // areaColor: "rgba(0,0,0,0)",
|
|
|
+ // borderWidth: 1,
|
|
|
+ // borderColor:"rgba(255,255,255,1)"
|
|
|
+ // // shadowBlur:10
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
-
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
// },
|
|
|
+
|
|
|
// },
|
|
|
|
|
|
- // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutCenter: ["50%", "45.4%"],
|
|
|
// layoutSize: 877,
|
|
|
// top: 0,
|
|
|
// left: 0,
|
|
|
@@ -271,6 +266,7 @@ const renderMap = () => {
|
|
|
// Alaska: [20, -20],
|
|
|
// },
|
|
|
// },
|
|
|
+
|
|
|
// {
|
|
|
// type: "map",
|
|
|
// aspectScale: 1, // 横向拉伸
|
|
|
@@ -278,7 +274,7 @@ const renderMap = () => {
|
|
|
// tooltip: {},
|
|
|
// zoom: 1.01, //缩放比例
|
|
|
// roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
- // map: "fujian_full",
|
|
|
+ // map: "fujian",
|
|
|
// nameMap: "福建地图",
|
|
|
// label: {
|
|
|
// show: false,
|
|
|
@@ -286,6 +282,7 @@ const renderMap = () => {
|
|
|
// show: false, // 默认地图文字字号和字体颜色
|
|
|
// fontSize: 10,
|
|
|
// color: "#ffffff",
|
|
|
+
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// show: false,
|
|
|
@@ -295,39 +292,22 @@ const renderMap = () => {
|
|
|
// },
|
|
|
// itemStyle: {
|
|
|
// normal: {
|
|
|
- // borderWidth: 4,
|
|
|
- // borderColor: {
|
|
|
- // type: "linear",
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: "#20a2e1", // 0% 处的颜色
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 0.8,
|
|
|
- // color: "#085473", // 0% 处的颜色
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: "#054660", // 50% 处的颜色
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // shadowColor: "rgba(172, 122, 255,0.5)",
|
|
|
- // shadowOffsetY: 5,
|
|
|
- // shadowBlur: 15,
|
|
|
+ // 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%", "44.5%"],
|
|
|
+ // layoutCenter: ["50%", "45%"],
|
|
|
// layoutSize: 877,
|
|
|
// top: 0,
|
|
|
// left: 0,
|
|
|
@@ -338,43 +318,44 @@ const renderMap = () => {
|
|
|
// {
|
|
|
// type: "map",
|
|
|
// aspectScale: 1, // 横向拉伸
|
|
|
- // zlevel: -2,
|
|
|
+ // zlevel: 1,
|
|
|
// 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)",
|
|
|
// },
|
|
|
// },
|
|
|
// itemStyle: {
|
|
|
// normal: {
|
|
|
- // areaColor: "rgba(29,166,176,0)",
|
|
|
- // borderWidth: 0,
|
|
|
- // borderColor: "#fff",
|
|
|
- // shadowColor: "rgba(29,166,176,0.95)",
|
|
|
- // shadowOffsetY: 20,
|
|
|
- // shadowBlur: 0,
|
|
|
+ // areaColor: "rgba(29,166,176,0.65)",
|
|
|
+ // // shadowBlur:10
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// areaColor: "rgba(29,166,176,0)",
|
|
|
// borderWidth: 0,
|
|
|
// },
|
|
|
+
|
|
|
// },
|
|
|
|
|
|
- // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutCenter: ["50%", "46.5%"],
|
|
|
// layoutSize: 877,
|
|
|
- // top: 0,
|
|
|
+ // top: 20,
|
|
|
// left: 0,
|
|
|
// textFixed: {
|
|
|
// Alaska: [20, -20],
|
|
|
@@ -382,6 +363,60 @@ const renderMap = () => {
|
|
|
// },
|
|
|
],
|
|
|
series: [
|
|
|
+ // {
|
|
|
+ // 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)'
|
|
|
+
|
|
|
+ // },
|
|
|
+
|
|
|
+
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: 'rgba(255,0,0,0.01)'
|
|
|
+ // },
|
|
|
+ // select: {
|
|
|
+ // },
|
|
|
+ // zlevel: 2,
|
|
|
+ // data: []
|
|
|
+ // },
|
|
|
{
|
|
|
type: "scatter",
|
|
|
zlevel: 99,
|
