3D-echarts的背景和地图表面的贴图

1.设置背景图片

效果如下：

核心代码（全部代码见文末）：

 注意：图片的路径设置 绝对路径 或 asset下面的相对路径都没有效果，要把图片放到public路径下面才有效果（此demo是写在v2脚手架中）

 2.设置背景颜色渐变

效果如下：

核心代码（全部代码见文末）：

3.设置地图表面贴图

效果如下(贴图是树的图片)：

核心代码（全部代码见文末）：

全部代码如下：

1.  
   <template>
2.  
   <div class="about">
3.  
   <!-- 江苏省地图 -->
4.  
   <div id="pic" style="width: 100%; height: 800px"></div>
5.  
   <el-dialog
6.  
   title="提示"
7.  
   :visible.sync="centerDialogVisible"
8.  
   width="30%"
9.  
   center
10.  
    >
11.  
    <span>点击的弹框内容Content{{area}}</span>
12.  
    <span slot="footer" class="dialog-footer">
13.  
    <el-button @click="centerDialogVisible = false">取 消</el-button>
14.  
    <el-button type="primary" @click="centerDialogVisible = false"
15.  
    >确 定</el-button
16.  
    >
17.  
    </span>
18.  
    </el-dialog>
19.  
    </div>
20.  
    </template>
21.  
    <script>
22.  
    import * as echarts from "echarts";
23.  
    import jiangsu from "../assets/jiangsu.js";
24.  
    import "echarts-gl";
25.  
     
26.  
    export default {
27.  
    data() {
28.  
    return {
29.  
    centerDialogVisible: false,
30.  
    };
31.  
    },
32.  
    mounted() {
33.  
    this.init();
34.  
    },
35.  
    computed: {},
36.  
    methods: {
37.  
    init() {
38.  
     
39.  
    var myChart = echarts.init(document.getElementById("pic"));
40.  
    var json = jiangsu;
41.  
    console.log(json, "rreess");
42.  
    var dataJson = {
43.  
    南京市: [118.767413, 32.041544],
44.  
    无锡市: [120.301663, 31.574729],
45.  
    徐州市: [117.184811, 34.261792],
46.  
    常州市: [119.946973, 31.772752],
47.  
    苏州市: [120.619585, 31.299379],
48.  
    南通市: [120.864608, 32.016212],
49.  
    连云港市: [119.178821, 34.600018],
50.  
    淮安市: [119.021265, 33.597506],
51.  
    盐城市: [120.139998, 33.377631],
52.  
    扬州市: [119.421003, 32.393159],
53.  
    镇江市: [119.452753, 32.204402],
54.  
    泰州市: [119.915176, 32.484882],
55.  
    宿迁市: [118.275162, 33.963008],
56.  
    };
57.  
    var chinaDatas = [
58.  
    { name: "南京市", value: 0 },
59.  
    { name: "无锡市", value: 0 },
60.  
    { name: "徐州市", value: 0 },
61.  
    { name: "常州市", value: 0 },
62.  
    { name: "苏州市", value: 0 },
63.  
    { name: "南通市", value: 0 },
64.  
    { name: "连云港市", value: 0 },
65.  
    { name: "淮安市", value: 0 },
66.  
    { name: "盐城市", value: 0 },
67.  
    { name: "扬州市", value: 0 },
68.  
    { name: "镇江市", value: 0 },
69.  
    { name: "泰州市", value: 0 },
70.  
    { name: "宿迁市", value: 0 },
71.  
    ];
72.  
     
73.  
    chinaDatas = chinaDatas.map((item) => {
74.  
    item.value = parseInt(Math.random() * 1000);
75.  
    return item;
76.  
    });
77.  
     
78.  
    var convertData = function (data) {
79.  
    var res = [];
80.  
    for (var i = 0; i < data.length; i ) {
81.  
    var geoCoord = dataJson[data[i].name];
82.  
    if (geoCoord) {
83.  
    res.push({
84.  
    name: data[i].name,
85.  
    value: geoCoord.concat(data[i].value),
86.  
    });
87.  
    }
88.  
    }
89.  
    console.log(res, "hhhhushudueu");
90.  
    return res;
91.  
    };
92.  
     
93.  
    echarts.registerMap("henan", json);
94.  
     
95.  
    var option = {
96.  
    // backgroundColor: "#000", // 设置背景颜色
97.  
    geo3D: {
98.  
    type: "map3D",
99.  
    name: "河南",
100.  
     // environment: "./tree.jpeg", // 设置背景图片
101.  
     environment: new echarts.graphic.LinearGradient( // 设置背景渐变
102.  
     0,
103.  
     0,
104.  
     0,
105.  
     1,
106.  
     [
107.  
     {
108.  
     offset: 0.1,
109.  
     color: "blue", // 颜色1
110.  
     },
111.  
     {
112.  
     offset: 0.5,
113.  
     color: "#4CB35D", // 颜色2
114.  
     },
115.  
     {
116.  
     offset: 1,
117.  
     color: "#FDBF5B", // 颜色3
118.  
     },
119.  
     ],
120.  
     false
121.  
     ),
122.  
     selectedMode: "single", //地图高亮单选
123.  
     regionHeight: 5, //地图高度
124.  
     map: "henan",
125.  
     viewControl: {
126.  
     distance: 110, //地图视角 控制初始大小
127.  
     rotateSensitivity: [1, 1],
128.  
     },
129.  
     // regions: [
130.  
     // {
131.  
     // name: "南京市",
132.  
     // itemStyle: {
133.  
     // color: "#000",
134.  
     // opacity: 1,
135.  
     // },
136.  
     // label: {
137.  
     // show: true,
138.  
     // },
139.  
     // },
140.  
     // ], //设置默认高亮区域
141.  
     shading: "realistic", // shading属性是realistic才能设置地图的贴图
142.  
     //
143.  
     realisticMaterial: {
144.  
     detailTexture: "./tree.jpeg", // 地图表面贴图
145.  
     },
146.  
     label: {
147.  
     show: true,
148.  
     // position: 'insideBottom',
149.  
     alignText: "center",
150.  
      
151.  
     color: "#fff", //文字颜色
152.  
     fontSize: 18, //文字大小
153.  
     padding: [5, 10],
154.  
     alignText: "center",
155.  
     lineHeight: 24,
156.  
     backgroundColor: "rgba(0,0,0,0.32)", //透明度0清空文字背景
157.  
     borderWidth: 1.5, //分界线宽度
158.  
     borderRadius: 5,
159.  
     borderColor: "#06b2f7", //分界线颜色
160.  
      
161.  
     rich: {
162.  
     a: {
163.  
     color: "#fff", //文字颜色
164.  
     fontSize: 18, //文字大小
165.  
     padding: [5, 10],
166.  
     alignText: "center",
167.  
     lineHeight: 24,
168.  
     backgroundColor: "rgba(0,0,0,0.32)", //透明度0清空文字背景
169.  
     // backgroundImage: url('../assets/bg.png'), //透明度0清空文字背景
170.  
     borderWidth: 1.5, //分界线宽度
171.  
     borderRadius: 5,
172.  
     borderColor: "#F2A451", //分界线颜色
173.  
     },
174.  
     b: {
175.  
     position: ["10%", "10%"],
176.  
     backgroundColor: {
177.  
     image:
178.  
     "https://pics2.百度.com/feed/9d82d158ccbf6c81d40aad32ce13813e32fa40e7.jpeg@f_auto?token=a06e2c37d2fab89584f2e2321e088d84",
179.  
     },
180.  
     height: 50,
181.  
     width: 50,
182.  
     },
183.  
     },
184.  
     },
185.  
     itemStyle: {
186.  
     color: "#074a9a", //地图颜色
187.  
     borderWidth: 4, //分界线wdith
188.  
     borderColor: "#2eeaff", //分界线颜色
189.  
     },
190.  
     emphasis: {
191.  
     label: {
192.  
     show: true, //鼠标经过是否显示高亮
193.  
     textStyle: {
194.  
     color: "#fff", //高亮文字颜色
195.  
     },
196.  
     },
197.  
     itemStyle: {
198.  
     color: "#ccc", //地图高亮颜色
199.  
     },
200.  
     },
201.  
     data: [],
202.  
     },
203.  
     series: [
204.  
     {
205.  
     name: "scatter3D",
206.  
     type: "scatter3D",
207.  
     coordinateSystem: "geo3D",
208.  
     // symbol: "image://" require('../assets/WechatIMG1600.png'),
209.  
     symbol: "pin",
210.  
      
211.  
     symbolSize: 40,
212.  
     color: "red",
213.  
     opacity: 1,
214.  
      
215.  
     itemStyle: {
216.  
     borderWidth: 0.5,
217.  
     borderColor: "#fff",
218.  
     },
219.  
     data: convertData(chinaDatas),
220.  
     },
221.  
     ],
222.  
     };
223.  
     myChart.getZr().on("click", (params) => {
224.  
     let inside = document.getElementById("pic").children[0].style.cursor;
225.  
     if (this.area !== "" && inside === "pointer") {
226.  
     console.log(inside, "inside", this.area);
227.  
     this.centerDialogVisible = true;
228.  
     }
229.  
     });
230.  
     myChart.setOption(option);
231.  
     },
232.  
     },
233.  
     };
234.  
     </script>

这篇好文章是转载于：学新通技术网