vue 创建图片坐标点_Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 顯示地圖且根據坐標設置標注點
哎喲我去
我就想用Echarts在頁面上畫一張地圖，這張地圖顯示全國，然后我有幾個坐標點的經緯度信息，需要在這個地圖上根據經緯度標注在Echarts圖表上，再有一個就是當我點擊省份的時候，地圖可以切換到省份的子區域里面，接這么簡單。
實現
之前從來沒接觸過，現在懵逼的一比，靠了！
好在借助網上的資源或者說博客把我想實現的功能都是實現了。哎喲，順便吐槽一下，現在真的是一家原創萬家抄襲的博客世界，也不驗證能不能成功就是一頓狂粘狂發表，真棒！
下載 geojson 文件
Html代碼
首先在頁面上寫一個div用來放地圖
這里打算寫地圖
ts代碼
首先得裝 echarts 插件。
npm install echarts --save
在使用 echarts 組件中引入 echarts 插件。
import echarts from 'echarts'
還需要 axios 插件，用來讀取 geojson 文件。
npm install axios --save
引入axios插件。
import axios from 'axios'
首先在組件里面引入中國的json文件。
const chinaJson = require("../../public/mapJson/china.json");
在data里面創建一個Echarts對象和配置對象。
data(){
return{
myChart:'',
distributionOptions:''
}
},
創建一個方法，用來配置 Echarts 的 Options 參數。
changeOptions (name) {
// 經緯度數據
const seriesList = [
{
data: [
{ value: [106.9, 27.7] },
{ value: [105.29, 27.32] },
{ value: [106.04, 27.03] },
{ value: [104.82, 26.58] },
{ value: [107.82, 20.58] }
]
},
{
data: [
{
value: [107.43, 28.56]
}
]
},
{
data: [
{
value: [107.5, 27.76]
}
]
}
];
// 圖標
const series = seriesList.map(v => {
return {
type: "scatter", //配置顯示方式為用戶自定義
coordinateSystem: "geo",
data: v.data
};
});
// options
this.distributionOptions = {
tooltip: { // 提示框組件
show: true, // 顯示提示框組件
trigger: "item", // 觸發類型
triggerOn: "mousemove", // 出發條件
formatter: "名稱:{b}
坐標:{c}"
},
series, // 數據
geo: {
map: name || 'china', // 引入地圖 省份或者 國家
layoutCenter: ["50%", "50%"], //設置后left/right/top/bottom等屬性無效
layoutSize: "45%",
roam: true, //開啟鼠標縮放和漫
zoom: 2,
label: {
normal: {
//靜態的時候展示樣式
show: true, //是否顯示地圖省份得名稱
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial"
}
},
emphasis: { // 高亮狀態下的樣式
//動態展示的樣式
color: "#fff"
}
},
itemStyle: { // 地圖區域的多邊形 圖形樣式。
normal: {
borderColor: "#07919e", // 邊框顏色
areaColor: "#1c2f59", // 區域顏色
textStyle: { // 文字顏色
color: "#fff"
},
shadowBlur: 10, // 圖形陰影的模糊大小
shadowOffsetX: 10 // 陰影水平方向上的偏移距離。
},
emphasis: {
areaColor: "#1c2f59",
color: "#fff"
}
}
}
};
},
然后創建一個方法初始化地圖數據。
// 初始化地圖數據
init() {
echarts.registerMap("china", chinaJson);
this.changeOptions("china")
this.myChart = echarts.init(document.getElementById("main"));
this.myChart.setOption(this.distributionOptions);
// 上邊應該都懂，下面就是創建了一個點擊事件，目的是點擊省份子區域的時候可以切換到省份地圖，省份的json文件自己下載。
this.myChart.on("click", chinaParam => {
let code = provinces[provincesText.indexOf(chinaParam.name)] || 100000
this.getProvinceMapOpt(code,provincesName[provincesText.indexOf(chinaParam.name)])
});
window.onresize = function() {
this.myChart.resize();
};
},
上面用到了三個參數，在項目里面定義一下，一定要對應起來，不要出錯。
var provinces = ['310000', '130000','140000','150000','210000','220000','230000','320000','330000','340000','350000','360000','370000','410000','420000','430000','440000','450000','460000','510000','520000','530000','540000','610000','620000','630000','640000','650000', '110000', '120000', '500000', '810000', '820000', '710000'];
var provincesText = ['上海', '河北省', '山西省', '內蒙古自治區', '遼寧省', '吉林省','黑龍江省', '江蘇省', '浙江省', '安徽省', '福建省', '江西省', '山東省','河南省', '湖北省', '湖南省', '廣東省', '廣西省', '海南省', '四川省', '貴州省', '云南省', '西藏自治區', '陜西省', '甘肅省', '青海省', '寧夏回族自治區', '新疆維吾爾自治區', '北京市', '天津市', '重慶市', '香港', '澳門', '臺灣省'];
var provincesName = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
在點擊事件里面用到了一個方法，目的就是切換子區域重新加載Echarts的作用。
//顯示各省地圖
getProvinceMapOpt(provinceAlphabet, name){
var path = '/mapJson/province/'+provinceAlphabet+'.json'
if( provinceAlphabet === 100000 ){
path = '/mapJson/china.json'
}
axios.get(path).then((s)=>{
echarts.registerMap(name, s.data)
this.changeOptions(name)
this.myChart.setOption(this.distributionOptions, true);
})
},
最后，初始化地圖。
mounted() {
this.init();
},
就出來上邊的效果了。就這樣。
還有許多的不足，后期慢慢改。
總結
以上是生活随笔為你收集整理的vue 创建图片坐标点_Vue Echarts 显示地图且根据坐标设置标注点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： float型数据与字节数组的转化
- 下一篇： html5倒计时秒杀怎么做,vue 设