|
|
@@ -4,7 +4,8 @@ const arrow = new Image();
|
|
|
arrow.src = getImageUrl("home/map_select.png");
|
|
|
const mapBg = new Image();
|
|
|
mapBg.src = getImageUrl("home/map_bg.png");
|
|
|
-
|
|
|
+const onetow = new Image();
|
|
|
+onetow.src = getImageUrl("home/123.png");
|
|
|
export const optionHandle = (regionCode: string,
|
|
|
list: object[]) => {
|
|
|
return {
|
|
|
@@ -71,90 +72,89 @@ export const optionHandle = (regionCode: string,
|
|
|
return tipHtml;
|
|
|
},
|
|
|
},
|
|
|
- geo: [
|
|
|
- {
|
|
|
- layoutCenter: ['50%', '50%'],//位置
|
|
|
- layoutSize: '180%',//大小
|
|
|
- show: true,
|
|
|
- map: regionCode,
|
|
|
- roam: false,
|
|
|
- zoom: 0.65,
|
|
|
- aspectScale: 1,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- areaColor: {
|
|
|
- type: "linear",
|
|
|
- x: 1200,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(38,134,132,0.35)", // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(38,134,132,0.75)", // 50% 处的颜色
|
|
|
- },],
|
|
|
- global: true, // 缺省为 false
|
|
|
- },
|
|
|
- borderColor: "#c0f3fb",
|
|
|
- borderWidth: 1,
|
|
|
- shadowColor: "#8cd3ef",
|
|
|
- shadowOffsetY: 10,
|
|
|
- shadowBlur: 120,
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: "map",
|
|
|
- map: regionCode,
|
|
|
- aspectScale: 1,
|
|
|
- zoom: 0.65,
|
|
|
- layoutCenter: ["50%", "54%"],
|
|
|
- layoutSize: "180%",
|
|
|
- roam: false,
|
|
|
- silent: true,
|
|
|
- itemStyle: {
|
|
|
- borderWidth: 2,
|
|
|
- borderColor: "rgba( 38,134,132,0.8)",
|
|
|
- shadowColor: "rgba(29, 111, 165,0.8)",
|
|
|
- shadowOffsetY: 10,
|
|
|
- shadowBlur: 2,
|
|
|
- areaColor: "rgba(5,21,35,0.2)",
|
|
|
- borderType: "dashed",
|
|
|
- },
|
|
|
+ // geo: [
|
|
|
+ // {
|
|
|
+ // layoutCenter: ['50%', '50%'],//位置
|
|
|
+ // layoutSize: '180%',//大小
|
|
|
+ // show: true,
|
|
|
+ // map: regionCode,
|
|
|
+ // roam: false,
|
|
|
+ // zoom: 0.65,
|
|
|
+ // aspectScale: 1,
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // areaColor: {
|
|
|
+ // type: "linear",
|
|
|
+ // x: 1200,
|
|
|
+ // y: 0,
|
|
|
+ // x2: 0,
|
|
|
+ // y2: 0,
|
|
|
+ // colorStops: [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: "rgba(38,134,132,0.35)", // 0% 处的颜色
|
|
|
+ // }, {
|
|
|
+ // offset: 1,
|
|
|
+ // color: "rgba(38,134,132,0.75)", // 50% 处的颜色
|
|
|
+ // },],
|
|
|
+ // global: true, // 缺省为 false
|
|
|
+ // },
|
|
|
+ // borderColor: "#c0f3fb",
|
|
|
+ // borderWidth: 1,
|
|
|
+ // shadowColor: "#8cd3ef",
|
|
|
+ // shadowOffsetY: 10,
|
|
|
+ // shadowBlur: 120,
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // map: regionCode,
|
|
|
+ // aspectScale: 1,
|
|
|
+ // zoom: 0.65,
|
|
|
+ // layoutCenter: ["50%", "54%"],
|
|
|
+ // layoutSize: "180%",
|
|
|
+ // roam: false,
|
|
|
+ // silent: true,
|
|
|
+ // itemStyle: {
|
|
|
+ // borderWidth: 2,
|
|
|
+ // borderColor: "rgba( 38,134,132,0.8)",
|
|
|
+ // shadowColor: "rgba(29, 111, 165,0.8)",
|
|
|
+ // shadowOffsetY: 10,
|
|
|
+ // shadowBlur: 2,
|
|
|
+ // areaColor: "rgba(5,21,35,0.2)",
|
|
|
+ // borderType: "dashed",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ geo3D: {
|
|
|
+ show: false,
|
|
|
+ map: regionCode, // 自定义扩展图表类型
|
|
|
+ aspectScale: 1,
|
|
|
+ showLegendSymbol: true,
|
|
|
+ boxDepth: 100, //地图倾斜度
|
|
|
+ regionHeight: 4, //地图厚度
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- ],
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(32,155,252,.7)"
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- type: "map",
|
|
|
+ type: "map3D",
|
|
|
map: regionCode, // 自定义扩展图表类型
|
|
|
aspectScale: 1,
|
|
|
- zoom: 0.65, // 缩放
|
|
|
showLegendSymbol: true,
|
|
|
+ boxDepth: 100, //地图倾斜度
|
|
|
+ regionHeight: 4, //地图厚度
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
itemStyle: {
|
|
|
- areaColor: {
|
|
|
- // 纹理填充
|
|
|
- image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
|
|
- repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
|
|
- // type: "radial",
|
|
|
- // x: 0.5,
|
|
|
- // y: 0.5,
|
|
|
- // r: 1,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0,
|
|
|
- // color: "rgba( 76,107, 88,.8)", // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: "rgba( 60,255,253,.8)", // 100% 处的颜色
|
|
|
- // },],
|
|
|
- // global: false, // 缺省为 false
|
|
|
- },
|
|
|
- borderColor: "#666",
|
|
|
+ color: "rgba(32,155,252,.7)",
|
|
|
+ borderColor: "#3CFFFD",
|
|
|
borderWidth: 1,
|
|
|
|
|
|
},
|
|
|
@@ -175,24 +175,7 @@ export const optionHandle = (regionCode: string,
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
- areaColor:
|
|
|
- {
|
|
|
- image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
|
|
- repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
|
|
- // type: "linear",
|
|
|
- // x: 1200,
|
|
|
- // y: 1000,
|
|
|
- // x2: 0,
|
|
|
- // y2: 0,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0,
|
|
|
- // color: "rgba(255,255,255,0.3)", // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: "rgba(255,255,255,0.4)", // 50% 处的颜色
|
|
|
- // },],
|
|
|
- // global: true, // 缺省为 false
|
|
|
- },
|
|
|
+ color: "rgba(255,255,255,0.3)",
|
|
|
borderColor: "#fff",
|
|
|
borderWidth: 2,
|
|
|
|
|
|
@@ -203,7 +186,22 @@ export const optionHandle = (regionCode: string,
|
|
|
data: list,
|
|
|
select: {
|
|
|
disabled: true,
|
|
|
- }
|
|
|
+ },
|
|
|
+ shading: 'realistic',
|
|
|
+ // 真实感材质相关配置 shading: 'realistic'时有效
|
|
|
+ realisticMaterial: {
|
|
|
+ detailTexture: '#fff', // 纹理贴图
|
|
|
+ textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
|
|
+ roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
|
|
+ metalness: 0, // 0材质是非金属 ，1金属
|
|
|
+ roughnessAdjust: 0
|
|
|
+ },
|
|
|
+ viewControl: {
|
|
|
+ distance: 110, // 地图视角 控制初始大小
|
|
|
+ rotateSensitivity: 1, // 旋转
|
|
|
+ zoomSensitivity: 1, // 缩放
|
|
|
+ },
|
|
|
+ instancing: true,
|
|
|
},
|
|
|
],
|
|
|
};
|
zhangchong
