echarts-map-区县
首先通过百度获取经纬度
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>批量地址</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
} #l-map {
height: 300px;
width: 100%;
} #r-result {
width: 100%;
font-size: 14px;
line-height: 20px;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=UZv8h1dSCG8ZRYNiNMMVC76T9uZ4z4Wd"></script>
</head> <body>
<div id="l-map"></div>
<div id="r-result">
<input type="button" value="成都市锦江区" onclick="getBoundary()" id="butotn" />
<div id="result"></div>
</div>
</body> </html>
<script type="text/javascript">
let mapData = [];
var xmJson = '';
var mapName = ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "金堂县", "双流县", "郫县", "大邑县", "蒲江县", "新津县", "崇州市", "都江堰市", "彭州市", "邛崃市"]
// 百度地图API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(104.076126, 30.668558), 13);
map.enableScrollWheelZoom(true);
let index = 0;
function getBoundary() {
var bdary = new BMap.Boundary();
// var name = document.getElementById("butotn").value;
var name = mapName[index]
document.getElementById("butotn").value = mapName[index]
bdary.get(name, function (rs) { //获取行政区域
map.clearOverlays();
console.log(rs.boundaries)
console.log(rs.boundaries.join(';'))
xmJson = rs.boundaries.join(';') //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
get();
index++;
});
} //josn对象
var eachart = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "",
"cp": []
},
"geometry": {
"type": "Polygon",
"coordinates": [
//存放经纬度
]
}
}
]
} function get() {
var lsit = [];
//xmJson你要的区域的经纬度字符串
var xmList = xmJson.split(';');
xmList.forEach(item => {
lsit.push([Number(item.split(',')[0]), Number(item.split(',')[1])]);
})
eachart.features[0].geometry.coordinates.push(lsit);
console.log(JSON.stringify(eachart))
} </script>
然后组装成JSON数据格式
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "成华区",
"cp": [
104.16545,
30.703645
]
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
104.237952,
30.696182
],
[
104.235141,
30.706489
],
[
104.228293,
30.704868
],
[
104.222874,
30.708396
],
[
104.223716,
30.713675
],
[
104.229604,
30.716935
],
[
104.221657,
30.717436
],
[
104.218142,
30.710594
],
[
104.214574,
30.710075
],
[
104.205882,
30.723492
],
[
104.197771,
30.72383
],
[
104.195817,
30.732807
],
[
104.189829,
30.728377
],
[
104.186696,
30.735357
],
[
104.177538,
30.735944
],
[
104.158397,
30.745255
],
[
104.14277,
30.742709
],
[
104.145055,
30.749937
],
[
104.141556,
30.755137
],
[
104.141347,
30.74917
],
[
104.134105,
30.755318
],
[
104.135359,
30.746261
],
[
104.125033,
30.745897
],
[
104.125161,
30.738285
],
[
104.11525,
30.73461
],
[
104.108846,
30.73758
],
[
104.108522,
30.728851
],
[
104.096793,
30.727867
],
[
104.093371,
30.721048
],
[
104.08419,
30.722523
],
[
104.080398,
30.718586
],
[
104.077249,
30.722903
],
[
104.077821,
30.704229
],
[
104.099538,
30.702899
],
[
104.099976,
30.692941
],
[
104.095091,
30.685509
],
[
104.101219,
30.682475
],
[
104.096123,
30.675943
],
[
104.103058,
30.669987
],
[
104.095176,
30.659098
],
[
104.132428,
30.643242
],
[
104.135019,
30.634618
],
[
104.133841,
30.63183
],
[
104.130951,
30.632732
],
[
104.131486,
30.628952
],
[
104.133885,
30.630122
],
[
104.134471,
30.625833
],
[
104.141356,
30.624098
],
[
104.143514,
30.628269
],
[
104.146104,
30.623476
],
[
104.153178,
30.629042
],
[
104.162,
30.629752
],
[
104.168284,
30.625937
],
[
104.171336,
30.630226
],
[
104.1665,
30.636386
],
[
104.171597,
30.641509
],
[
104.170613,
30.646719
],
[
104.163188,
30.653027
],
[
104.167226,
30.655508
],
[
104.161175,
30.659494
],
[
104.160203,
30.670187
],
[
104.15747,
30.66717
],
[
104.153584,
30.673763
],
[
104.163394,
30.672782
],
[
104.172308,
30.681483
],
[
104.175575,
30.675791
],
[
104.179689,
30.67522
],
[
104.181443,
30.679355
],
[
104.190453,
30.678315
],
[
104.197477,
30.682007
],
[
104.197852,
30.688007
],
[
104.203743,
30.690287
],
[
104.224414,
30.68736
],
[
104.234542,
30.689603
],
[
104.237952,
30.696182
]
]
]
}
}]
然后在页面中引用
<template>
<div class="map-container" :style="{height:cHeight+'px'}">
<div id="cityChart" style="height:650px;"></div>
</div>
</template> <script>
var data = [
{ name: "锦江区", value: 1522 },
{ name: "青羊区", value: 1522 },
{ name: "金牛区", value: 1522 },
{ name: "武侯区", value: 1522 },
{ name: "成华区", value: 1522 },
{ name: "龙泉驿区", value: 1522 },
{ name: "青白江区", value: 1522 },
{ name: "新都区", value: 1522 },
{ name: "温江区", value: 1522 },
{ name: "金堂县", value: 1522 },
{ name: "双流区", value: 1522 },
{ name: "郫县", value: 1522 },
{ name: "大邑县", value: 1522 },
{ name: "蒲江县", value: 1522 },
{ name: "新津县", value: 1522 },
{ name: "崇州市", value: 1522 },
{ name: "都江堰市", value: 1522 },
{ name: "彭州市", value: 1522 },
{ name: "邛崃市", value: 1522 }
];
// "锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "金堂县",
// "双流县", "郫县", "大邑县", "蒲江县", "新津县", "崇州市", "都江堰市", "彭州市", "邛崃市"
var geoCoordMap = {
锦江区: [104.124056, 30.615172],
青羊区: [103.989526, 30.688243],
金牛区: [104.02977, 30.72898],
武侯区: [104.012287, 30.638195],
成华区: [104.16545, 30.703645],
龙泉驿区: [104.282733, 30.568914],
青白江区: [104.277558, 30.882827],
新都区: [104.160276, 30.839179],
温江区: [103.829124, 30.687249],
金堂县: [104.429336, 30.876876],
双流区: [103.945257, 30.581848],
郫县: [103.903863, 30.805438],
大邑县: [103.491074, 30.603734],
蒲江县: [103.501422, 30.215031],
新津县: [103.811877, 30.410574],
崇州市: [103.637103, 30.647489],
都江堰市: [103.639402, 30.998792],
彭州市: [103.954456, 31.006716],
邛崃市: [103.44968, 30.429509]
};
function randomValue() {
return Math.round(Math.random() * 1000);
}
function convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
var geoJson = require("../mapJson/chengdu.json"); export default {
name: "home",
props: {
cWidth: {
type: String,
default: "1050"
},
cHeight: {
type: String,
default: "650"
},
parentName: {
type: String,
default: ""
},
addressChange: {
type: Function,
default: () => {
return;
}
},
mapData: {
type: Array,
default: () => {
return data;
}
}
},
data() {
return {
// mapData: [],
listData: [],
maxNumber: 0
};
},
methods: {
drawLine() {
var mapChart = this.$echarts.init(document.getElementById("cityChart"));
this.$echarts.registerMap("成都市", geoJson);
var option = {
tooltip: {
trigger: "item",
formatter: function(params) {
return params.name + " : " + params.value[2];
}
},
visualMap: {
min: 0,
max: 5000,
left: "80px",
top: "bottom",
calculable: true,
show: false,
inRange: {
color: ["#fbfbd6", "#ffff27", "#fb1d1d"]
},
textStyle: {
color: "#fff"
}
},
geo: {
map: "成都市",
roam: "false", //是否开启缩放
zoom: 1.2, //默认显示比例大小
top: "10%",
left: "25%",
label: {
emphasis: {
show: true,
color: "rgba(255, 255, 255,0.8)"
}
},
itemStyle: {
normal: {
areaColor: "rgba(0, 150, 194,0)",
borderWidth: 1,
borderColor: "rgba(132,184,255,1)",
shadowBlur: 20,
shadowColor: "rgba(132,184,255,1)"
},
emphasis: {
areaColor: "#244090", //高亮时的地区背景色
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0,0,0,0.5)"
}
}
},
series: [
{
name: "四川",
type: "effectScatter",
coordinateSystem: "geo",
data: convertData(this.mapData),
symbolSize: function(a, b) {
return a[2] / 50 > 20 ? 20 : a[2] / 50;
},
symbolRotate: 35,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
}
}
]
// series: [
// {
// label: {
// normal: {
// show: true
// },
// emphasis: {
// show: true
// }
// },
// type: "map",
// zoom: 1,
// roam: true,
// map: "成都市"
// }
// ]
};
/*
var option = {
tooltip: {
trigger: "item",
formatter: function(params) {
return params.name + " : " + params.value[2];
}
},
visualMap: {
min: 0,
max: 5000,
left: "80px",
top: "bottom",
calculable: true,
show: false,
inRange: {
color: ["#fbfbd6", "#ffff27", "#fb1d1d"]
},
textStyle: {
color: "#fff"
}
},
geo: {
map: "四川",
roam: "false", //是否开启缩放
zoom: 1.2, //默认显示比例大小
top: "10%",
left: "25%",
label: {
emphasis: {
show: true,
color: "rgba(255, 255, 255,0.8)"
}
},
itemStyle: {
normal: {
areaColor: "rgba(0, 150, 194,0)",
borderWidth: 1,
borderColor: "rgba(132,184,255,1)",
shadowBlur: 20,
shadowColor: "rgba(132,184,255,1)"
},
emphasis: {
areaColor: "#244090", //高亮时的地区背景色
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0,0,0,0.5)"
}
}
},
series: [
{
name: "四川",
type: "effectScatter",
coordinateSystem: "geo",
data: convertData(this.mapData),
symbolSize: function(a, b) {
return a[2] / 50 > 20 ? 20 : a[2] / 50;
},
symbolRotate: 35,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
}
}
]
};
*/
mapChart.setOption(option);
window.addEventListener("resize", function() {
mapChart.resize();
});
mapChart.off("click");
mapChart.on("click", params => {
let temp = "";
let temName = params.name.substring(params.name.length - 1);
if (temName == "市") {
temp = params.name.substring(0, params.name.length - 1);
} else if (temName == "州") {
temp = params.name.substring(0, 2);
}
this.$emit("addressChange", temp);
});
},
getScHandler() {
this.$emit("addressChange", "四川");
}
},
mounted() {
this.drawLine();
this.listData = this.mapData.slice(1, 4);
},
watch: {
mapData() {
this.drawLine();
this.listData = this.mapData.slice(1, 4);
this.maxNumber = this.mapData[0].value;
}
}
};
</script> <style scoped lang="less">
@import url(../../../../static/css/public.less);
.map-container {
width: 100%;
height: 650px;
position: absolute;
background: url(../../../../static/imgs/map-bg.png) center no-repeat;
background-size: 100% 100%;
// margin: 0 20px;
top: 0;
left: 0;
z-index: 111;
#cityChart {
width: 100%;
height: 100%;
margin: 0 auto;
}
.map-btn {
position: absolute;
right: 40px;
bottom: 40px;
z-index: 11;
padding: 5px 20px;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
background: #ff4400;
}
.ranking-box {
position: absolute;
left: 40px;
bottom: 40px;
z-index: 11;
color: #fff;
width: 170px;
.ranking-header {
padding: 5px;
background: linear-gradient(to top, #025ec6, #23c2fe);
font-size: 17px;
}
.ranking-list {
background: rgba(0, 76, 136, 0.44);
.ranking-item {
padding: 10px;
.ranking-name {
font-size: 13px;
}
}
.ranking-img {
width: 40px;
height: 23px;
margin-right: 10px;
flex-shrink: 0;
img {
width: 100%;
}
}
.ranking-img {
align-self: flex-end;
}
}
}
}
</style>
echarts-map-区县的更多相关文章
- vue echarts map的使用，页面多图动态自适应
最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...
- Echarts Map 值域为小数的原因
最近做一个项目用到了Echarts Map不知道怎么回事,有时多了一位小时,可这个意义不用小数表示(1.0个人似乎觉得有点奇怪嘞 {boolean}calculable false 是否启用值域漫游, ...
- Echarts Map地图类型使用
使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...
- echarts Map(地图) 不同颜色区块显示
以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...
- ECharts Map 属性详解
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
- Echarts Map地图下钻至县级
**准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- echarts map地图设置外边框或者阴影
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...
- vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js
在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...
- echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
随机推荐
- 01-jQuery基本语法
一.jQuery基础 1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块) ...
- LeetCode136.只出现一次的数字
给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: [ ...
- Transformer
参考资料: [ERT大火却不懂Transformer?读这一篇就够了] https://zhuanlan.zhihu.com/p/54356280 (中文版) http://jalammar.gith ...
- Leetcode 4.28 Tree Easy
1. 101. Symmetric Tree 用递归. class Solution { public boolean isSymmetric(TreeNode root) { if( root == ...
- python3.7安装pylint
python3.7安装pylint之"setuptools"版本错误 借鉴:错题集(已解决):pyinstaller报错ModuleNotFoundError: No module ...
- 洛谷P3380 二逼平衡树
线段树+平衡树 我!又!被!卡!常!了! 以前的splay偷懒的删除找前驱后继的办法被卡了QAQ 放一个在洛谷开O2才能过的代码..我太菜了.. #include <bits/stdc++.h& ...
- Apache Flink教程
1.Apache Flink 教程 http://mp.weixin.qq.com/mp/homepage?__biz=MzIxMTE0ODU5NQ==&hid=5&sn=ff5718 ...
- zabbix SNMP OID列表
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- HDU - 3247 Resource Archiver (AC自动机，状压dp)
\(\quad\)Great! Your new software is almost finished! The only thing left to do is archiving all you ...
- MySQL表与表之间的关系
表与表之间的关系 表1 foreign key 表2 则表1的多条记录对应表2的一条记录,即多对一 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以 ...