Vue中如何实现城市3D分布图
cityfenbu.vue
城市分布图 (点击可下钻到县)
resize.js
import { debounce } from "./debounce.js";
export default {
data() {
return {
myChart: null,
resizeHandler: null
};
},
computed: {},
mounted() {
this.resizeHandler = debounce(() => {
if (this.myChart) {
this.myChart.resize();
}
}, 100);
this.initResizeEvent();
},
methods: {
//监听resize
initResizeEvent() {
window.addEventListener("resize", this.resizeHandler);
},
//移除resize
destroyResizeEvent() {
window.removeEventListener("resize", this.resizeHandler);
}
},
beforeDestroy() {
this.destroyResizeEvent();
if (!this.myChart) {
return;
}
this.myChart.dispose();
this.myChart.off("click");
this.myChart = null;
},
activated() {
this.initResizeEvent();
if (this.myChart) {
this.myChart.resize();
}
},
deactivated() {
this.destroyResizeEvent();
},
watch: {}
};getGeoJson.js
/**
* 获取geoJson数据 通过高德获取 递归获取区县geoJson
* @param {string} adcode 行政区code
* @param {string} childAdcode 区县级行政区code
* @return {Array}
*/
import remoteLoad from "./remoteLoad.js";
const {AMapCDN, AMapUiCDN} = require("./cdn.js");
export function getGeoJson(adcode, childAdcode = "") {
return new Promise((resolve, reject) => {
if (window.AMap && window.AMapUI) {
insideFun(adcode, childAdcode);
} else {
remoteLoad(AMapCDN).then(() => {
if (window.AMap) {
remoteLoad(AMapUiCDN).then(() => {
if (window.AMapUI) {
insideFun(adcode, childAdcode);
} else {
console.error("AMapUI获取失败");
}
});
} else {
console.error("AMap获取失败");
}
});
}
function insideFun(adcode, childAdcode) {
// eslint-disable-next-line
AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
var districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
console.error(error);
reject(error);
return;
}
let Json = areaNode.getSubFeatures();
if (Json.length === 0) {
let parent = areaNode._data.geoData.parent.properties.acroutes;
insideFun(parent[parent.length - 1], adcode);
return;
}
if (childAdcode) {
Json = Json.filter(item => {
return item.properties.adcode == childAdcode;
});
}
let mapJson = {
features: Json
};
resolve(mapJson);
});
});
}
});
}getMapChartData.js
import { getGeoJson } from "./getGeoJson.js";
/** 地图数据
* @param {string} adcode 城市code
* @returns {Array}
*/
export function getMapChartData(adcode) {
return new Promise((resolve, reject) => {
getGeoJson(adcode)
.then(res => {
const data = res.features;
const mapData = data.map(item => {
return {
name: item.properties.name,
value: parseFloat((Math.random() * 3000).toFixed(2)),
adcode: item.properties.adcode,
level: item.properties.level
};
});
resolve({
code: 200,
data: mapData
});
})
.catch(error => {
reject(error);
});
});
}
/** 地图数据 散点
* @param {string} adcode 城市code
* @returns {Array}
*/
export function getPointChartData(adcode) {
return new Promise((resolve, reject) => {
getGeoJson(adcode)
.then(res => {
const data = res.features;
const mapData = data.map(item => {
return {
name: item.properties.name,
value: [
item.properties.center[0],
item.properties.center[1],
parseFloat((Math.random(0.1, 1) * 1000).toFixed(2))
],
adcode: item.properties.adcode,
level: item.properties.level
};
});
resolve({
code: 200,
data: mapData
});
})
.catch(error => {
reject(error);
});
});
}
/** 地图数据 热力图
* @param {string} adcode 城市code
* @returns {Array}
*/
export function getHotMapChartData(adcode) {
const data = [
{
name: "地点1",
value: [114.412021, 30.481201, 1000]
},
{
name: "地点2",
value: [114.411266, 30.480921, 1000]
},
{
name: "地点3",
value: [114.411985, 30.481387, 1000]
},
{
name: "地点4",
value: [114.411159, 30.481917, 1000]
},
{
name: "地点5",
value: [114.412488, 30.481917, 1000]
},
{
name: "地点6",
value: [114.413638, 30.482726, 1000]
},
{
name: "地点7",
value: [114.412344, 30.48341, 1000]
},
{
name: "地点8",
value: [114.413494, 30.483939, parseInt(Math.random(0.6, 1) * 1000)]
},
{
name: "地点9",
value: [114.411877, 30.484469, parseInt(Math.random(0.6, 1) * 1000)]
},
{
name: "地点10",
value: [114.412308, 30.484531, parseInt(Math.random(0.6, 1) * 1000)]
},
{
name: "地点11",
value: [114.407853, 30.4845, parseInt(Math.random(0.6, 1) * 1000)]
},
{
name: "地点12",
value: [114.407242, 30.48285, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点13",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点14",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点15",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点16",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点17",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点18",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点19",
value: [114.412021, 30.481201, parseInt(Math.random(0.1, 0.5) * 1000)]
},
{
name: "地点20",
value: [114.447306, 30.560407, parseInt(Math.random(0.1, 0.9) * 1000)]
},
{
name: "地点21",
value: [114.296104, 30.600017, parseInt(Math.random(0.1, 0.9) * 1000)]
},
{
name: "地点22",
value: [114.29402, 30.597406, parseInt(Math.random(0.1, 0.9) * 1000)]
},
{
name: "地点23",
value: [114.300487, 30.595106, parseInt(Math.random(0.1, 0.9) * 1000)]
},
{
name: "地点24",
value: [114.295026, 30.592805, parseInt(Math.random(0.1, 0.9) * 1000)]
},
{
name: "地点25",
value: [114.291648, 30.597282, 1000]
},
{
name: "地点26",
value: [114.287408, 30.599147, 1000]
},
{
name: "地点27",
value: [114.282378, 30.598649, 1000]
},
{
name: "地点28",
value: [114.286689, 30.600514, 1000]
}
];
return new Promise((resolve, reject) => {
resolve({
code: 200,
data: data
});
});
}remoteLoad.js
const remoteLoad = url => {
return new Promise((resolve, reject) => {
const existingScript = document.getElementById(url);
//如果script不存在
if (!existingScript) {
const script = document.createElement("script");
script.id = url;
script.src = url;
script.async = true;
document.body.appendChild(script);
script.onload = function() {
setTimeout(() => {
this.onerror = this.onload = null;
resolve();
}, 500);
};
script.onerror = function() {
this.onerror = this.onload = null;
reject("加载失败" + url);
};
} else {
setTimeout(() => {
resolve();
}, 500);
}
});
};
export default remoteLoad;cdn.js
const AMapCDN =
"https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch";
const AMapUiCDN = "https://webapi.amap.com/ui/1.0/main.js";
const VueCDN = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js";
const AxiosCDN = "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js";
const VueRouterCDN =
"https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js";
const VuexCDN = "https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js";
const TinymceCDN =
"https://cdn.jsdelivr.net/npm/[email protected]/tinymce.min.js";
const html2canvasCDN =
"https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js";
module.exports = {
AMapCDN,
AMapUiCDN,
VueCDN,
AxiosCDN,
VueRouterCDN,
VuexCDN,
TinymceCDN,
html2canvasCDN
};视频号如何做视频任务进行变现
2023-09-05
视频号如何插入带货商品链接进行变现
2023-09-04
36岁男子自称被裁,曾是前500强公司市场总监,最后接受做外买
2023-09-03
聊一下互联网红利并牢牢抓住
2023-09-02
关于大学考研与不考研自己一点看法
2023-09-01
css中文本阴影特效
2023-08-30
(能绘画,能问答)
(拓展人脉,圈子)