台州seo网站管理_百度网站推广怎么做_技术短期培训班_厦门seo测试

Echarts+vue3+高德渲染地图

一：安装

npm install echarts

二：渲染地图

1. html

<template><div class="content"><div ref="myChartsRef" id="map" style="width: 100%;height: 560px;" ></div>    </div>
</template>

2. 高德地图获取geo数据

//获取geo的json数据
const getGeoJson = (adcode: any) => {return new Promise((resolve, reject) => {AMapLoader.load({key: '*******************', // 申请好的Web端开发者Keyversion: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15AMapUI: {version: '1.1', // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then(() => {new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {var districtExplorer = new DistrictExplorer();districtExplorer.loadAreaNode(adcode, function (error, areaNode) {if (error) {console.error(error);reject(error, 'error 191');return;}let Json = areaNode.getSubFeatures();let mapJson = {features: [],};mapJson.features = Json;resolve(mapJson);})})}).catch(err => {console.log(err)})})
}

3. echarts的基础配置项

let mapOption = {tooltip: {//提示框组件。trigger: "item",formatter: (p) => {let val = p.value;let txtCon ="<div style='text-align:left'>" +p.name"</div>";return txtCon;},},geo: [//geo数据{name: "SUI",type: "map",map: "SUI",zoom: 1.6, //当前视角的缩放比例center: [105.191, 36.582], // 地图中心roam: false, //是否开启平游或缩放scaleLimit: {//滚轮缩放的极限控制min: 1.4,max: 100,},label: {normal: {show: false,color: "rgb(249, 249, 249)", //省份标签字体颜色},emphasis: {show: true,color: "#fff", //鼠标放上去字体颜色},},itemStyle: {//省突起来的效果normal: {areaColor: "#1f4b77",borderColor: "#53D9FF",borderWidth: 1,shadowBlur: 15,shadowColor: "rgb(58,115,192)",shadowOffsetX: 0,shadowOffsetY: 0,},emphasis: {areaColor: "#487de1",borderWidth: 1.6,shadowBlur: 25,},},},],series:[]
};

4. 地图飞线

地图飞线和标记点

 {type: 'lines',zlevel: 99,effect: {show: true,//飞机的速度  这里是s单位period: 5,trailLength: 0.1,symbol: 'pin',//这是圆点替换了飞机// 飞机大小symbolSize: 5,color: '#31FFFF',},lineStyle: {normal: {color: '#fff',type: 'solid', // 虚线// 线条宽度width: 1,opacity: 0.1,curveness: 0.2, // 弯曲度},emphasis: {color: '#FF9600' //飞线悬浮颜色}},label: {normal: {show: false,position: 'middle',formatter: '{b}'}},data: lines_coord,//飞线数据},

飞线数据

lines_coord = [{coords: [[85.427108, 40.558036],[116.427239, 40.246686],],},{coords: [[96.487689, 35.972901],[116.427239, 40.246686],],},{coords: [[88.348773, 31.224238],[116.427239, 40.246686],],},{coords: [[102.748392, 30.747149],[116.427239, 40.246686],],},{coords: [[114.574166, 23.829568],[116.427239, 40.246686],],},{coords: [[115.756743, 43.502437],[116.427239, 40.246686],],},{coords: [[127.825623, 47.200057],[116.427239, 40.246686],],},{coords: [[121.455937, 31.073690],[116.427239, 40.246686],],},
];

5.地图标记点

 {name: "地点",// effectScattertype: "scatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "stroke",scale: 1.5,//涟漪大小period: 8,//涟漪速度},label: {normal: {show: true,formatter: "{b}",position: "right",textStyle: {color: "#fff",fontSize: 16,},},},emphasis: {interval: 1000 // 闪烁频率为每秒1次},showEffectOn: "render",itemStyle: {normal: {color: "#46bee9",},},data: coord,//标记点数据},

标记数据

let coord = [{name: "北京市",value: [116.427239, 40.246686, 1],symbolSize: 58, //标记点自定义图片大小symbol: "image://" + '图片地址（/src/images/logo.png）' //标记点自定义图片},{name: "新疆",value: [85.427108, 40.558036, 1],symbolSize: 38,symbol: "image://" + '图片地址（/src/images/logo.png）'},{name: "青海省",value: [96.487689, 35.972901, 1],symbolSize: 38,symbol: "image://" + '图片地址（/src/images/logo.png）'},{name: "西藏",value: [88.348773, 31.224238, 1],symbolSize: 38,symbol: "image://" + '图片地址（/src/images/logo.png）'},{name: "四川省",value: [102.748392, 30.747149, 1],symbolSize: 38,symbol: "image://" +'图片地址（/src/images/logo.png）'},{name: "广东省",value: [114.574166, 23.829568, 1],symbolSize: 38,symbol: "image://" +'图片地址（/src/images/logo.png）'},{name: "内蒙古",value: [115.756743, 43.502437, 1],symbolSize: 38,symbol: "image://" + '图片地址（/src/images/logo.png）'},{name: "黑龙江",value: [127.825623, 47.200057, 1],symbolSize: 38,symbol: "image://" + '图片地址（/src/images/logo.png）'},{name: "上海市",value: [121.455937, 31.073690, 1],symbolSize: 38,symbol: "image://" +'图片地址（/src/images/logo.png）'},
];

6. 点击地图板块弹框设置背景图片

在这里插入图片描述

let mapOption = {tooltip: {extraCssText: 'max-width:270px; white-space:pre-wrap',enterable: true,//鼠标是否可进入提示框浮层中，默认为false,当弹框中有点击事件的时候可为truetrigger: "item",triggerOn: 'click',//提示框触发的条件 'mousemove|click','mousemove','click'show: true,//是否显示提示框组件。padding: 0,//提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。// borderColor: "#e3b020",//弹框边框颜色borderWidth: 1,//弹框边框宽度alwaysShowContent: true,//是否永远显示提示框内容formatter: (p: any) => {//自定义弹框内容    return formatter(p)},// '<button οnclick="hideTooltip('+p.data.adcode+')">点击</button>'+},
}

自定义数据

const formatter = (p: any) => {return '<div style="color:#fff;font-size:14px;height: 162px;background: #061547;padding:0;margin:0;position:relative;">' +`<img src="${'/src/assets/images/***.png'}">` +'<div style="position:absolute;top:0;left:0;width:100%;height:100%;">' +'<div style="font-weight:bold;font-size:19px;padding-top:3px;padding-left:38px;">' + p.name + '</div>' +'<div style="color:#9ba0b5;font-size:13px;padding:10px;">' +'<div >' +'负责人：' + '测试/182****1474' +'</div>' +'<div style="padding-top:5px;">' +'地   址：' + '测试地址测试地址测试地址测试地址测试地址测试地址测试地址' +'</div>' +'<div style="heigth:100px;background:#142251;margin-top:3px;padding: 8px 5px 3px 6px;display: flex;justify-content: space-between;">' +'<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" οnclick="hideTooltip(' + p.data.adcode + ')">' +`<img src="${'/src/assets/images/***.png'}">` +'<div style="font-size:10px;">测试</div>' +'</div>' +'<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" >' +`<img src="${'/src/assets/images/icon_liuyg.svg'}">` +'<div style="font-size:10px;">测试</div>' +'</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +`<img src="${'/src/assets/images/icon_dianzc.svg'}">` +'<div style="font-size:10px;">测试</div>' +'</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +`<img src="${'/src/assets/images/icon_ai.svg'}">` +'<div style="font-size:10px;">测试</div>' +'</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +`<img src="${'/src/assets/images/icon_chenj.svg'}">` +'<div style="font-size:10px;">测试</div>' +'</div>' +'</div>' +'</div>' +'</div>' +'</div>'
}

触发点击事件

onMounted(async () => {window.hideTooltip = function (parmas: any) {console.log('我是点击事件', parmas);}
})

7.tooltip自定义图片背景图

在这里插入图片描述

label: {normal: {show: true,color: "rgb(249, 249, 249)", //省份标签字体颜色formatter: function (param: any) {return '{icon|} ' + `{name|${param.name}}`; // {icon}为图片占位符},rich: {icon: {height: 25,width: 70,alingn: 'center',backgroundColor: {image: '/src/assets/images/***.png' // 设置图片路径}},name: {fontSize: 13,padding: [0, 0, 0, -58]}}},
}

8. 渲染地图

//获取geo数据
const getGeoJson = (adcode: any) => {return new Promise((resolve, reject) => {AMapLoader.load({key: '*******************', // 申请好的Web端开发者Keyversion: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15AMapUI: {version: '1.1', // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then(() => {new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {var districtExplorer = new DistrictExplorer();districtExplorer.loadAreaNode(adcode, function (error, areaNode) {if (error) {console.error(error);reject(error, 'error 191');return;}let Json = areaNode.getSubFeatures();let mapJson = {features: [],};mapJson.features = Json;resolve(mapJson);})})}).catch(err => {console.log(err)})})
}
//处理数据
const getJson = (val: any) => {var MapJsons = [];var MapJson = [];//去拿地图json数据getGeoJson(val).then((res: any) => {//想要的数据MapJsons = res.features?.map((item: any) => {return {adcode: item.properties.adcode,name: item.properties.name,value: item.properties.name,level: item.properties.level,center: item.properties.center,};});MapJson = MapJsons?.sort(function (a: any, b: any) {return a.value - b.value;});//调用绘制地图方法drawMap(res, MapJson);});
};
//渲染地图
const drawMap = (map: any, MapJson: any) => {//拿到标签的domlet mapChart = echarts.init(document.getElementById("map"));echarts.registerMap("SUI", map); //注册地图// mapChart.off('click')//加载进去，后面的true为了重新绘制mapChart.setOption(mapOption, true);//点击事件mapChart.on("click", (params: any) => {// console.log('点击地图组件', params);})
};