要做一个网站得怎么做,阿里云网站建设的功能,南昌做网站设计,珠宝wordpress主题效果图 说明 默认数据没有就是全国地图#xff0c; $bus.off(onresize)是地图容器变化刷新地图适配的#xff0c;可以你们自己写 getEchartsFontSize是适配字体大小的#xff0c;getEchartsFontSize(0.12) 12 mapScatter是base64图片就是图上那个标点的底图 Ge…效果图 说明 默认数据没有就是全国地图 $bus.off(onresize)是地图容器变化刷新地图适配的可以你们自己写 getEchartsFontSize是适配字体大小的getEchartsFontSize(0.12) 12 mapScatter是base64图片就是图上那个标点的底图 GetMapGeoJson是获取地图json的这里的是我公司的可以用阿里云的代替 还有不明白的可以看是之前的文章echart5.x地图下钻和地图标点(vue3ts) // 地图2--阿里云地图
function GetMapGeoJson2(cityCN: string, citylevel: string) {var uploadedDataURL ;if (citylevel china) {//全国地图return https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json;}if (citylevel ! district (cityCN ).substring(4) ! 00)citylevel district;if (citylevel district) {uploadedDataURL https://geo.datav.aliyun.com/areas_v3/bound/ cityCN .json;} else if (citylevel city) {uploadedDataURL https://geo.datav.aliyun.com/areas_v3/bound/ cityCN _full.json;} else {uploadedDataURL https://geo.datav.aliyun.com/areas_v3/bound/ cityCN _full.json;}return uploadedDataURL;
}使用
!-- :defaultMapdefaultMap --
mapChart :listscatterList changeMapDatachangeMapData /import mapChart from /views/universal-visuali/components/charts/map/mapChart.vue;// 默认的地图数据
let defaultMap {// prefix: china,// adcode: 110000,// name: 全国,prefix: province,adcode: 150000,name: 内蒙古自治区,
};
// 标点
let scatterList refany([{FarmName: 养殖场一场,Admin: 小王,Livestock: 10000,Address: 江苏省连云港市,Long: 109.494324,Lati: 19.598813,},{FarmName: 向东养殖户,Admin: 向东,Livestock: 0,Address: 长虹科技大厦,Long: 113.964139785699,Lati: 22.544018837551,},{FarmName: 牧养殖种植合作社,Admin: 马胜军,Livestock: 91,Address: 广东省云浮市新兴县,Long: 112.231496832189,Lati: 22.701890082606,},{FarmName: 苏垦牧场,Admin: 小刘,Livestock: 8080,Address: 江苏省连云港连云区农场,Long: 119.43188,Lati: 34.62367,},
]);
const changeMapData (info: any) {console.log(info);
};mapChart 组件代码
templatediv classcityMapdiv classbackMap :class{ notAllowed: !notAllowed } clickbackMapspan返回/span/divdiv classtradeIn-cattle-map refechartsRef/div/div
/templatescript setup langts
/*** 省市区-地图下钻*/
import * as echarts from echarts;
import { ElMessage } from element-plus;import {ref,onMounted,reactive,Ref,onUnmounted,nextTick,watch,
} from vue;
import axios from axios;
import { getEchartsFontSize } from /utils/common;
import { mapScatter } from /utils/youran;
import $bus from /utils/bus;const props defineProps({list: {type: Array,default: [],},defaultMap: {type: Object,default: {prefix: china,adcode: 110000,name: 全国,},},
});// 坐标点
let scatterDataList refany([]);// dom和注册的echart实例
let echartsRef: Ref ref(null);
let myChart: any null;
// 没有上一级了和点击的防抖
let notAllowed refBoolean(false);
let timeFn: any null;// 当前激活地图
let defaultMap refany({prefix: china,adcode: 110000,name: 全国,
});
if (props.defaultMap) {defaultMap.value JSON.parse(JSON.stringify(props.defaultMap));
}// 地图栈
let mapStack: any[] [];// 所有下级地图下钻用
let AllMap refany[]([]);// 向外传值
const emit defineEmits([changeMapData]);onMounted(() {// 如果容器大小变化$bus.on(onresize, () {initChart();myChart.resize();});initChart();
});onUnmounted(() {$bus.off(onresize);if (timeFn) {clearTimeout(timeFn);}
});watch(() props,(val) {nextTick(() {if (props.defaultMap) {defaultMap.value JSON.parse(JSON.stringify(props.defaultMap));}initChart();});},{deep: true,}
);// 获取地图--和域名一样的地图上线上上去防跨域
function GetMapGeoJson(cityCN: string, citylevel: string) {var uploadedDataURL ;if (citylevel china) {//全国地图return /YooHooMIS/Scripts/echarts/china/100000_full.json;}if (citylevel ! district (cityCN ).substring(4) ! 00)citylevel district;if (citylevel district) {uploadedDataURL /YooHooMIS/Scripts/echarts/china/district/ cityCN .json;} else if (citylevel city) {uploadedDataURL /YooHooMIS/Scripts/echarts/china/city/ cityCN _full.json;} else {uploadedDataURL /YooHooMIS/Scripts/echarts/china/province/ cityCN _full.json;}return uploadedDataURL;
}
// 创建地图实例
let initChart () {if (!myChart) {myChart echarts.init(echartsRef.value);}loadMap();
};
// 注册地图
function loadMap() {// 当前地图if (mapStack.length 0) {mapStack.push(defaultMap.value);} else {defaultMap.value mapStack[mapStack.length - 1];}let mapData GetMapGeoJson(defaultMap.value.adcode, defaultMap.value.prefix);// 注册当前激活地图axios.get(mapData).then((geoJson: any) {AllMap.value geoJson.data.features || [];echarts.registerMap(defaultMap.value.name, geoJson.data);setOption();}).catch((err: any) {// 接口404没地图数据的情况ElMessage.error(无${defaultMap.value.name}的地图数据);mapStack.pop();defaultMap.value mapStack[mapStack.length - 1];if (mapStack mapStack.length 1) {notAllowed.value false;}});
}
// 加牧场坐标点
function addScatter() {scatterDataList.value [];if (props.list props.list.length 0) {props.list.forEach((item: any) {let name div classCityMapChartTooltipBgBoxdiv classlistdiv classitemspan${item.FarmName || }/spanspan${item.Livestock || 0}头/span/divdiv classitemspan负责人/spanspan${item.Admin || }/span/divdiv classitemspan地址/spanspan${item.Address || }/span/div/div/div;scatterDataList.value.push({name: name,value: [item.Long, item.Lati],});});}
}
// 创建地图
function setOption() {addScatter();let option {tooltip: {show: true,className: CityMapChartTooltipBg,formatter: (params: any) {if (params.componentSubType scatter) return params.name;},},geo: {show: false,map: defaultMap.value.name || 全国,},series: [{name: MAP,type: map,map: defaultMap.value.name || 全国,selectedMode: false, //是否允许选中多个区域aspectScale: 0.75,zoom: 1.2,zlevel: 1,label: {show: true,textStyle: {color: #fff,// fontSize: getEchartsFontSize(0.14),fontFamily: YouSheBiaoTiHei,},},itemStyle: {areaColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 0,color: #06236d,},{offset: 1,color: #1d46a1,},]),borderColor: #6789d7,borderWidth: getEchartsFontSize(0.01),shadowColor: #0156f2,shadowOffsetX: -getEchartsFontSize(0.03),shadowOffsetY: getEchartsFontSize(0.03),shadowBlur: getEchartsFontSize(0.02),emphasis: {show: true,areaColor: #182e8f, // 鼠标悬浮地图面的颜色borderColor: #fff,borderWidth: getEchartsFontSize(0.02),label: {show: true,textStyle: {color: #fff,fontSize: getEchartsFontSize(0.16),fontFamily: YouSheBiaoTiHei,},},},},data: [],},{type: scatter,coordinateSystem: geo,symbol: image:// mapScatter,symbolSize: [getEchartsFontSize(0.66), getEchartsFontSize(0.36)],itemStyle: {color: #1cedd4,shadowBlur: getEchartsFontSize(0.1),shadowColor: #333,},zlevel: 200,data: scatterDataList.value || [],},],};// 地图数据的关系setOption有时会报错暂时无解myChart.setOption(option);mapChartAddClick();
}
// 加点击事件
function mapChartAddClick() {// 清空之前的点击事件myChart.off(click);myChart.on(click, (params: any) {if (timeFn) {clearTimeout(timeFn);}//由于单击事件和双击事件冲突故单击的响应事件延迟250毫秒执行timeFn setTimeout(() {// 现在和点的是一个阻止if (params.name mapStack[mapStack.length - 1].name) {return;}if (params.seriesType scatter) {// 点标点逻辑传递标点信息emit(changeMapData, props.list[params.dataIndex]);} else {// 地图下钻逻辑if (AllMap.value AllMap.value.length 0) {let clickMap AllMap.value.find((item) item.properties.name params.name);if (!clickMap) {ElMessage.warning(无此区域地图显示);return;}mapStack.push({prefix: clickMap.properties.level,adcode: clickMap.properties.adcode,name: clickMap.properties.name,});notAllowed.value true;loadMap();} else {ElMessage.warning(无下级地图数据);}}}, 250);});// 绑定双击事件返回// myChart.on(dblclick, (params: any) {// backMap();// });
}
// 返回上一级
let backMap () {// 当双击事件发生时清除单击事件仅响应双击事件if (timeFn) {clearTimeout(timeFn);}// 删最后一个跳上一个if (mapStack mapStack.length 1) {mapStack.pop();loadMap();}// 鼠标放上去的禁用状态if (mapStack mapStack.length 1) {notAllowed.value false;}
};
/scriptstyle langless scoped
.cityMap {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;position: relative;.backMap {position: absolute;top: 27px;left: 40px;border: none;z-index: 9;cursor: pointer;// width: 123px;// height: 44px;// background-image: url(../assets/common/top_icon_back_default.png);// background-size: 100% 100%;// padding-left: 50px;// padding-top: 10px;span {display: block;font-size: 12px;// margin-left: 40px;border-radius: 7px;background-color: #06bcec;padding: 4px 6px;color: #fff;}:focus {outline: none;}:hover {// opacity: 0.93;// background-image: url(../assets/common/top_icon_back_select.png);background-size: 100% 100%;span {color: #ffffff;}}.notAllowed {cursor: not-allowed;}}.tradeIn-cattle-map {// height: 600px;width: 100%;height: 100%;// margin-top: 50px;}
}
/style
