3D-echarts的背景和地图表面的贴图
1.设置背景图片
效果如下:
核心代码(全部代码见文末):
注意:图片的路径设置 绝对路径 或 asset下面的相对路径都没有效果,要把图片放到public路径下面才有效果(此demo是写在v2脚手架中)
2.设置背景颜色渐变
效果如下:
核心代码(全部代码见文末):
3.设置地图表面贴图
效果如下(贴图是树的图片):
核心代码(全部代码见文末):
全部代码如下:
-
<template>
-
<div class="about">
-
<!-- 江苏省地图 -->
-
<div id="pic" style="width: 100%; height: 800px"></div>
-
<el-dialog
-
title="提示"
-
:visible.sync="centerDialogVisible"
-
width="30%"
-
center
-
>
-
<span>点击的弹框内容Content{{area}}</span>
-
<span slot="footer" class="dialog-footer">
-
<el-button @click="centerDialogVisible = false">取 消</el-button>
-
<el-button type="primary" @click="centerDialogVisible = false"
-
>确 定</el-button
-
>
-
</span>
-
</el-dialog>
-
</div>
-
</template>
-
<script>
-
import * as echarts from "echarts";
-
import jiangsu from "../assets/jiangsu.js";
-
import "echarts-gl";
-
-
export default {
-
data() {
-
return {
-
centerDialogVisible: false,
-
};
-
},
-
mounted() {
-
this.init();
-
},
-
computed: {},
-
methods: {
-
init() {
-
-
var myChart = echarts.init(document.getElementById("pic"));
-
var json = jiangsu;
-
console.log(json, "rreess");
-
var dataJson = {
-
南京市: [118.767413, 32.041544],
-
无锡市: [120.301663, 31.574729],
-
徐州市: [117.184811, 34.261792],
-
常州市: [119.946973, 31.772752],
-
苏州市: [120.619585, 31.299379],
-
南通市: [120.864608, 32.016212],
-
连云港市: [119.178821, 34.600018],
-
淮安市: [119.021265, 33.597506],
-
盐城市: [120.139998, 33.377631],
-
扬州市: [119.421003, 32.393159],
-
镇江市: [119.452753, 32.204402],
-
泰州市: [119.915176, 32.484882],
-
宿迁市: [118.275162, 33.963008],
-
};
-
var chinaDatas = [
-
{ name: "南京市", value: 0 },
-
{ name: "无锡市", value: 0 },
-
{ name: "徐州市", value: 0 },
-
{ name: "常州市", value: 0 },
-
{ name: "苏州市", value: 0 },
-
{ name: "南通市", value: 0 },
-
{ name: "连云港市", value: 0 },
-
{ name: "淮安市", value: 0 },
-
{ name: "盐城市", value: 0 },
-
{ name: "扬州市", value: 0 },
-
{ name: "镇江市", value: 0 },
-
{ name: "泰州市", value: 0 },
-
{ name: "宿迁市", value: 0 },
-
];
-
-
chinaDatas = chinaDatas.map((item) => {
-
item.value = parseInt(Math.random() * 1000);
-
return item;
-
});
-
-
var convertData = function (data) {
-
var res = [];
-
for (var i = 0; i < data.length; i ) {
-
var geoCoord = dataJson[data[i].name];
-
if (geoCoord) {
-
res.push({
-
name: data[i].name,
-
value: geoCoord.concat(data[i].value),
-
});
-
}
-
}
-
console.log(res, "hhhhushudueu");
-
return res;
-
};
-
-
echarts.registerMap("henan", json);
-
-
var option = {
-
// backgroundColor: "#000", // 设置背景颜色
-
geo3D: {
-
type: "map3D",
-
name: "河南",
-
// environment: "./tree.jpeg", // 设置背景图片
-
environment: new echarts.graphic.LinearGradient( // 设置背景渐变
-
0,
-
0,
-
0,
-
1,
-
[
-
{
-
offset: 0.1,
-
color: "blue", // 颜色1
-
},
-
{
-
offset: 0.5,
-
color: "#4CB35D", // 颜色2
-
},
-
{
-
offset: 1,
-
color: "#FDBF5B", // 颜色3
-
},
-
],
-
false
-
),
-
selectedMode: "single", //地图高亮单选
-
regionHeight: 5, //地图高度
-
map: "henan",
-
viewControl: {
-
distance: 110, //地图视角 控制初始大小
-
rotateSensitivity: [1, 1],
-
},
-
// regions: [
-
// {
-
// name: "南京市",
-
// itemStyle: {
-
// color: "#000",
-
// opacity: 1,
-
// },
-
// label: {
-
// show: true,
-
// },
-
// },
-
// ], //设置默认高亮区域
-
shading: "realistic", // shading属性是realistic才能设置地图的贴图
-
//
-
realisticMaterial: {
-
detailTexture: "./tree.jpeg", // 地图表面贴图
-
},
-
label: {
-
show: true,
-
// position: 'insideBottom',
-
alignText: "center",
-
-
color: "#fff", //文字颜色
-
fontSize: 18, //文字大小
-
padding: [5, 10],
-
alignText: "center",
-
lineHeight: 24,
-
backgroundColor: "rgba(0,0,0,0.32)", //透明度0清空文字背景
-
borderWidth: 1.5, //分界线宽度
-
borderRadius: 5,
-
borderColor: "#06b2f7", //分界线颜色
-
-
rich: {
-
a: {
-
color: "#fff", //文字颜色
-
fontSize: 18, //文字大小
-
padding: [5, 10],
-
alignText: "center",
-
lineHeight: 24,
-
backgroundColor: "rgba(0,0,0,0.32)", //透明度0清空文字背景
-
// backgroundImage: url('../assets/bg.png'), //透明度0清空文字背景
-
borderWidth: 1.5, //分界线宽度
-
borderRadius: 5,
-
borderColor: "#F2A451", //分界线颜色
-
},
-
b: {
-
position: ["10%", "10%"],
-
backgroundColor: {
-
image:
-
"https://pics2.百度.com/feed/9d82d158ccbf6c81d40aad32ce13813e32fa40e7.jpeg@f_auto?token=a06e2c37d2fab89584f2e2321e088d84",
-
},
-
height: 50,
-
width: 50,
-
},
-
},
-
},
-
itemStyle: {
-
color: "#074a9a", //地图颜色
-
borderWidth: 4, //分界线wdith
-
borderColor: "#2eeaff", //分界线颜色
-
},
-
emphasis: {
-
label: {
-
show: true, //鼠标经过是否显示高亮
-
textStyle: {
-
color: "#fff", //高亮文字颜色
-
},
-
},
-
itemStyle: {
-
color: "#ccc", //地图高亮颜色
-
},
-
},
-
data: [],
-
},
-
series: [
-
{
-
name: "scatter3D",
-
type: "scatter3D",
-
coordinateSystem: "geo3D",
-
// symbol: "image://" require('../assets/WechatIMG1600.png'),
-
symbol: "pin",
-
-
symbolSize: 40,
-
color: "red",
-
opacity: 1,
-
-
itemStyle: {
-
borderWidth: 0.5,
-
borderColor: "#fff",
-
},
-
data: convertData(chinaDatas),
-
},
-
],
-
};
-
myChart.getZr().on("click", (params) => {
-
let inside = document.getElementById("pic").children[0].style.cursor;
-
if (this.area !== "" && inside === "pointer") {
-
console.log(inside, "inside", this.area);
-
this.centerDialogVisible = true;
-
}
-
});
-
myChart.setOption(option);
-
},
-
},
-
};
-
</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgffiie
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01