Skip to content

A
agcs2.0-web
Commit f5f731da authored by miaojiale's avatar miaojiale
Browse files
Options

首页地图

parent 1e46d4d2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 86 deletions
src/views/Home/Map/allCode.json 0 → 100644
View file @ f5f731da
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/Home/Map/china.json 0 → 100644
View file @ f5f731da
This diff is collapsed.
src/views/Home/Map/index.vue
View file @ f5f731da
......@@ -3,16 +3,15 @@
</template>
<script>
import * as echarts from "echarts"
import axios from "axios" //采用axios动态请求数据
import china from "./china.json"
import allCode from "./allCode.json"
export default {
data() {
return {
//线上请求JSON文件数据地址
publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
// publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
//allCode 区域行政编码信息
allCode: [
// {name:"廉江市",adcode:"440881"}
],
allCode: allCode,
locate: [
{
name: "安徽",
......@@ -26,14 +25,8 @@ export default {
this.initChart() //初始化地图
},
methods: {
cancel() {
this.initChart()
},
getGeoJson(jsonName) {
return axios.get(this.publicUrl + jsonName)
},
initEcharts(geoJson, name, chart) {
console.log(geoJson.features, name)
// console.log(JSON.stringify(geoJson))
let self = this
echarts.registerMap(name, geoJson)
let option = {
......@@ -53,98 +46,94 @@ export default {
borderColor: "rgba(0,0,0,0.3)",
},
geo: {
show: false,
show: true,
map: name,
width: name == "中国" ? "70%" : "36%", // 约束地图大小
top: "4%",
roam: true,
zoom: 1.5,
center: [105, 34.0267395887],
label: {
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
areaColor: "#EDEFFF",
borderColor: "#7597FA",
borderWidth: 1,
},
emphasis: {
areaColor: "#4E68FF", //悬浮背景
},
},
},
series: [
//小点
{
// 小点，通过geo知道地图位置
name: "",
//文字和标志
name: "light",
type: "scatter",
coordinateSystem: "geo",
data: this.locate,
symbolSize: 8,
encode: {
value: 2,
symbolSize: function (val) {
return val[2] / 8
},
label: {
normal: {
// formatter: "{b}",
formatter: "",
position: "right",
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFCF4E",
},
tooltip: {
show: false,
},
label: {},
emphasis: {},
},
{
type: "map",
map: name,
width: name == "中国" ? "70%" : "30%", // 约束地图大小
top: "5%",
// roam: true, //是否开启滚轮缩放
// zoom: 1.5, //当前视角缩放比，调节这个设置初始大小
// center: ["10%", 0],
// scaleLimit: {
// min: 0.2,
// max: 2,
// }, // 最大最小缩放比例
map: "china",
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#EDEFFF",
borderColor: "#7597FA",
borderWidth: 1,
areaColor: "#031525",
borderColor: "#FFFFFF",
},
emphasis: {
areaColor: "#4E68FF", //悬浮背景
areaColor: "#2B91B7",
},
},
animation: false,
data: [{ name: "安徽省", value: 50 }],
},
],
}
chart.setOption(option, true) //加个true解决下钻的视角偏移
chart.off("click")
chart.on("click", (params) => {
//点击区域时的行政编码，然后再进行匹配
let clickCode = self.allCode.filter(
(areaJson) => areaJson.name === params.name
)[0].adcode
console.log("行政编码:" + clickCode)
//1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
//2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
//声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
self
.getGeoJson(clickCode + "_full.json")
.then((res) => {
self.initEcharts(res.data, params.name, chart)
})
.catch((err) => {
console.log(err, "err")
self.getGeoJson("100000_full.json").then((China) => {
self.initEcharts(China.data, "中国", chart)
})
})
console.log(params)
})
},
//带头函数-初始化
initChart() {
let chart = echarts.init(this.$refs.areaRankingAll)
//this.allCode获取所有的区域编码信息
this.getGeoJson("all.json").then((all) => {
this.allCode = all.data
})
//初始化地图展示
this.getGeoJson("100000_full.json").then((China) => {
this.initEcharts(China.data, "中国", chart)
})
this.initEcharts(china, "中国", chart)
},
},
}
......
yarn.lock
View file @ f5f731da
......@@ -3916,13 +3916,12 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
echarts@4.8.0:
version "4.8.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
integrity sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==
dependencies:
tslib "2.0.3"
zrender "5.1.1"
zrender "4.3.1"
ee-first@1.1.1:
version "1.1.1"
......@@ -10386,11 +10385,6 @@ ts-pnp@^1.1.6:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
tslib@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
......@@ -11304,12 +11298,10 @@ zip-stream@^2.1.2:
compress-commons "^2.1.1"
readable-stream "^3.4.0"
zrender@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
dependencies:
tslib "2.0.3"
zrender@4.3.1:
version "4.3.1"
resolved "https://registry.npmmirror.com/zrender/-/zrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
integrity sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==
zwitch@^1.0.0:
version "1.0.5"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment