echarts地图
这里写目录标题
-
- 需求
- 数据格式
- 渲染地图函数
-
- 地图展示三种类型的数据
- 鼠标悬浮在某个定位点，显示相关详情数据；
- 放大缩小限制
- 整合一下，就是这样的
- 效果如图
-
- 根据搜索的数据，显示当前的定位点及其相关数据；
- 点击下拉框的li，重新渲染地图
- 搜索图标的点击事件
需求
1.地图展示三种类型的数据；
2.鼠标悬浮在某个定位点，显示相关详情数据；
3.根据搜索的数据，显示当前的定位点及其相关数据；
4.放大缩小限制
数据格式
var qn=[
{
"name": "党校",
"value": [
"118.736125",
"31.941656"
]
},
{
"name": "康铂酒店",
"value": [
"118.667901",
"31.941578"
]
},
]
var jn=[
{
"name": "汪海国际大酒店",
"value": [
"118.636809",
"31.903398"
]
},
{
"name": "黛思国际酒店",
"value": [
"118.777726",
"32.002151"
]
},
{
"name": "格林豪泰",
"value": [
"118.757916",
"32.000663 "
]
},
]
var jw=[
{
"name": "珍宝假日酒店",
"value": [
"118.755071",
"31.997254"
]
},
]
var datas=[
{
"name": "汪海国际大酒店",
"value": [
"118.636809",
"31.903398"
],
"data": {
"glryzs": 168,
"gzrysl": 86,
"jwry": 0,
"mjry": 12,
"cmjry": 19,
"zgjry": 2,
"kjsglry": "137",
"yyfjs": 131,
"syfjzs": 6
}
},
{
"name": "黛思国际酒店",
"value": [
"118.777726",
"32.002151"
],
"data": {
"glryzs": 116,
"gzrysl": 62,
"jwry": 0,
"mjry": 0,
"cmjry": 0,
"zgjry": 0,
"kjsglry": "101",
"yyfjs": 100,
"syfjzs": 1
}
},
{
"name": "格林豪泰",
"value": [
"118.757916",
"32.000663 "
],
"data": {
"glryzs": 92,
"gzrysl": 34,
"jwry": 0,
"mjry": 0,
"cmjry": 0,
"zgjry": 0,
"kjsglry": "81",
"yyfjs": 65,
"syfjzs": 16
}
},
{
"name": "党校",
"value": [
"118.736125",
"31.941656"
],
"data": {
"glryzs": 71,
"gzrysl": 21,
"jwry": 0,
"mjry": 14,
"cmjry": 26,
"zgjry": 3,
"kjsglry": "138",
"yyfjs": 63,
"syfjzs": 75
}
},
{
"name": "康铂酒店",
"value": [
"118.667901",
"31.941578"
],
"data": {
"glryzs": 10,
"gzrysl": 28,
"jwry": 0,
"mjry": 0,
"cmjry": 1,
"zgjry": 1,
"kjsglry": "69",
"yyfjs": 10,
"syfjzs": 59
}
},
{
"name": "珍宝假日酒店",
"value": [
"118.755071",
"31.997254"
],
"data": {
"glryzs": 9,
"gzrysl": 52,
"jwry": 8,
"mjry": 0,
"cmjry": 0,
"zgjry": 8,
"kjsglry": "159",
"yyfjs": 9,
"syfjzs": 150
}
},
]
var objall={
"汪海国际大酒店": [
"118.636809",
"31.903398"
],
"黛思国际酒店": [
"118.777726",
"32.002151"
],
"格林豪泰": [
"118.757916",
"32.000663 "
],
"党校": [
"118.736125",
"31.941656"
],
"康铂酒店": [
"118.667901",
"31.941578"
],
"珍宝假日酒店": [
"118.755071",
"31.997254"
],
}
var mapJson = "./map.json";//地图的json
var myChart = echarts.init(document.getElementById("myChart"));
var mapOption = null;
渲染地图函数
地图展示三种类型的数据
这里用到的数据是jn,jw,wq
series: [
{
name: "境外隔离人员",
type: "scatter",
coordinateSystem: "geo",
data: jingwai,
zlevel: 9,
symbol: icon1,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
{
name: "我区隔离人员",
type: "scatter",
coordinateSystem: "geo",
data: woqu,
zlevel: 9,
symbol: icon2,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
{
name: "江宁隔离人员",
type: "scatter",
coordinateSystem: "geo",
data: jiangning,
zlevel: 9,
symbol: icon3,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
],
鼠标悬浮在某个定位点，显示相关详情数据；
这里用到的数据其实是datas。params对应的是jn,jw,wq的数据，通过循环datas,匹配前面三个的name,（其实可以直接在jn,jw,wq写入详情值，一开始没设计好，就没有再改接口了）
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#000",
decoration: "none",
// fontFamily: "shuzi",
// fontSize: 26
},
extraCssText: "height:auto;line-height: 20px;font-size:26px",
formatter: function (params) {
console.log(params);
if (params.data != undefined) {
var name = params.data.name;
var toolTipDataMap = params.data.data;
var tipHtml = "";
for (var i = 0; i < datas.length; i++) {
var itemName = datas[i].name;
if (name == itemName) {
toolTipDataMap = datas[i].data;
}
}
}
tipHtml =
'' +
'隔离点名称：' +
params.data.name +
"
" +
'隔离人员总数：' +
toolTipDataMap.glryzs +
" 人
" +
'工作人员数量(含酒店工作人员)：' +
toolTipDataMap.gzrysl +
" 人
" +
' 境外人员数量：' +
toolTipDataMap.jwry +
" 人
" +
'密接：' +
toolTipDataMap.mjry +
" 人
" +
'次密接：' +
toolTipDataMap.cmjry +
" 人
" +
'中高风险区人员(含机场经停)：' +
toolTipDataMap.zgjry +
" 人
" +
'可接收隔离人员房间总数：' +
toolTipDataMap.kjsglry +
" 间
" +
'已用隔离房间数：' +
toolTipDataMap.yyfjs +
" 间
" +
'剩余可用房间数：' +
toolTipDataMap.syfjzs +
" 间
" +
'" +
"";
return tipHtml;
},
},
放大缩小限制
scaleLimit: {
min: 0.8,
max: 1.8,
},
整合一下，就是这样的
function rzMapChart(myEchart) {
$.getJSON(mapJson, function (geoJson) {
echarts.registerMap("yuhuatai", geoJson);
/*获取地图数据*/
var mapFeatures = geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
objall[name] = v.properties.center;
});
mapOption = {
legend: {
data: ["境外", "我区", "江宁"],
itemWidth: 20,
itemHeight: 20,
orient: "vertical",
top: "10%",
left: "22%",
textStyle: {
color: "#fff",
fontSize: 16,
},
},
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#000",
decoration: "none",
},
extraCssText: "height:auto;line-height: 20px;font-size:26px",
formatter: function (params) {
console.log(params);
if (params.data != undefined) {
var name = params.data.name;
var toolTipDataMap = params.data.data;
var tipHtml = "";
for (var i = 0; i < datas.length; i++) {
var itemName = datas[i].name;
if (name == itemName) {
toolTipDataMap = datas[i].data;
}
}
}
tipHtml =
'' +
'隔离点名称：' +
params.data.name +
"
" +
'隔离人员总数：' +
toolTipDataMap.glryzs +
" 人
" +
'工作人员数量(含酒店工作人员)：' +
toolTipDataMap.gzrysl +
" 人
" +
' 境外人员数量：' +
toolTipDataMap.jwry +
" 人
" +
'密接：' +
toolTipDataMap.mjry +
" 人
" +
'次密接：' +
toolTipDataMap.cmjry +
" 人
" +
'中高风险区人员(含机场经停)：' +
toolTipDataMap.zgjry +
" 人
" +
'可接收隔离人员房间总数：' +
toolTipDataMap.kjsglry +
" 间
" +
'已用隔离房间数：' +
toolTipDataMap.yyfjs +
" 间
" +
'剩余可用房间数：' +
toolTipDataMap.syfjzs +
" 间
" +
'" +
"";
return tipHtml;
},
},
visualMap: [
{
show: false,
inRange: {
color: [].reverse(),
},
min: 0,
max: 100,
left: "left",
top: "bottom",
calculable: true,
textStyle: {
color: "#fff",
fontSize: 12,
},
seriesIndex: 0,
},
],
geo: {
type: "map",
roam: false,
label: {
normal: {
show: true,
//将显示在地图上的文字透明化
textStyle: {
fontSize: 36,
color: "rgba(255,255,255,0.2)",
padding: [0, 0, 0, 40],
},
},
emphasis: {
textStyle: {
color: "rgba(255,255,255,0.5)",
},
},
},
itemStyle: {
normal: {
borderColor: "#2ab8ff",
borderWidth: 1,
areaColor: {
image: domImg,
repeat: "repeat",
},
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 1,
},
emphasis: {
areaColor: {
image: domImgHover,
repeat: "repeat",
},
borderColor: "#2ab8ff",
borderWidth: 1,
shadowColor: "rgba(0, 255, 255, 0.7)",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 1,
label: {
show: false,
},
},
},
zoom: 1.2,
roam: true,
scaleLimit: {
min: 0.8,
max: 1.8,
},
map: "yuhuatai",
},
series: [
{
name: "境外",
type: "scatter",
coordinateSystem: "geo",
data: jingwai,
zlevel: 9,
symbol: icon1,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
{
name: "我区",
type: "scatter",
coordinateSystem: "geo",
data: woqu,
zlevel: 9,
symbol: icon2,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
{
name: "江宁",
type: "scatter",
coordinateSystem: "geo",
data: jiangning,
zlevel: 9,
symbol: icon3,
symbolSize: 20,
label: {
normal: {
formatter: "{b}",
// position: 'right',
position: "right",
show: true,
fontSize: "16",
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#FFC516",
},
},
},
],
};
myChart.setOption(mapOption);
});
}
效果如图
根据搜索的数据，显示当前的定位点及其相关数据；
<div class="search">
<input class="" autocomplete="off" id="search" value="" type="text" placeholder="请搜索"
placeholder-class="input-placeholder" maxlength="140" focus="false" oninput="handleInput()">
input>
<img id="searchImg" src="./images/search.png" alt="">
div>
function handleInput() {
var searchValue = $("#search").val().trim();
if (searchValue) {
$("#searchImg")
.attr("src", "./images/close.png")
.click(function () {
$("#search").val("");
$("#searchImg")
.attr("src", "./images/search.png")
.click(function () {
search();
});
//清空地图
mapOption = {};
rzMapChart();
});
}
//根据人名获取酒店名
var data = getHotelByName(searchValue);
var str = "";
if (data) {
str = "" + data.name + "";
} else {
datas.forEach((data) => {
if (data.name.indexOf(searchValue) >= 0) {
console.log(333);
str += "" + data.name + "";
} else {
return false;
}
});
}
$("#options").html(str).removeClass("hide").addClass("show");
}
点击下拉框的li，重新渲染地图
function getValue(event) {
jingwai.forEach((data) => {
if (data.name == event.target.innerHTML) {
$("#search").val(event.target.innerHTML);
searchObj = {
name: data.name,
value: data.value,
type: 0,
};
}
});
woqu.forEach((data) => {
if (data.name == event.target.innerHTML) {
$("#search").val(event.target.innerHTML);
searchObj = {
name: data.name,
value: data.value,
type: 1,
};
}
});
jiangning.forEach((data) => {
if (data.name == event.target.innerHTML) {
$("#search").val(event.target.innerHTML);
searchObj = {
name: data.name,
value: data.value,
type: 2,
};
}
});
renderMapAgain(event.target.innerHTML);
}
function renderMapAgain(data) {
if (data) {
if (searchObj.type == 0) {
mapOption.series[1].data = [];
mapOption.series[2].data = [];
} else if (searchObj.type == 1) {
mapOption.series[0].data = [];
mapOption.series[2].data = [];
} else if (searchObj.type == 2) {
mapOption.series[0].data = [];
mapOption.series[1].data = [];
}
mapOption.series[searchObj.type].data = [
{
name: searchObj.name,
value: searchObj.value,
},
];
mapOption.series[searchObj.type].label = {
normal: {
show: true,
backgroundColor: { image: "./images/bg1.png" },
padding: [20, 20],
formatter: function (params) {
console.log(params);
if (params.data != undefined) {
var name = params.data.name;
var toolTipDataMap = params.data.data;
for (var i = 0; i < datas.length; i++) {
var itemName = datas[i].name;
if (name == itemName) {
toolTipDataMap = datas[i].data;
}
}
}
return (
"{tline|隔离点名称：" +
"}{fCo|" +
params.data.name +
"}\n{tline|隔离人员总数：" +
"}{fCo|" +
toolTipDataMap.glryzs +
"人}\n{tline|工作人员数量(含酒店工作人员)：" +
"}{fCo|" +
toolTipDataMap.gzrysl +
"人}\n{tline|境外人员数量：" +
"}{fCo|" +
toolTipDataMap.jwry +
"人}\n{tline|密接：" +
"}{fCo|" +
toolTipDataMap.mjry +
"人}\n{tline|次密接：" +
"}{fCo|" +
toolTipDataMap.cmjry +
"人}\n{tline|中高风险区人员(含机场经停)：" +
"}{fCo|" +
toolTipDataMap.zgjry +
"人}\n{tline|可接收隔离人员房间总数：" +
"}{fCo|" +
toolTipDataMap.kjsglry +
"间}\n{tline|已用隔离房间数：" +
"}{fCo|" +
toolTipDataMap.yyfjs +
"}\n{tline|剩余可用房间数：" +
"}{fCo|" +
toolTipDataMap.syfjzs +
"间}"
);
},
rich: {
fCo: {
color: "#95f7f0",
fontSize: 16,
padding: [10, 0, 2, 0],
// color: "#ffffff",
},
tline: {
fontSize: 14,
padding: [2, 0, 2, 0],
color: "#ffffff",
},
},
},
};
mapOption.series[searchObj.type].itemStyle = {
normal: {
color: "normal",
},
};
} else {
mapOption = {};
rzMapChart();
}
$("#options").removeClass("show").addClass("hide");
myChart.setOption(mapOption, true);
}
搜索图标的点击事件
function search() {
var searchValue = $("#search").val();
if (searchObj.name && searchObj.name.indexOf(searchValue) >= 0) {
} else {
var res = getHotelByName(searchValue);
console.log(res);
if (res.type.indexOf("境外") >= 0) {
searchObj = {
name: res.name,
value: res.value,
type: 0,
};
}
if (res.type.indexOf("区内") >= 0) {
searchObj = {
name: res.name,
value: res.value,
type: 1,
};
}
if (res.type.indexOf("江宁") >= 0) {
searchObj = {
name: res.name,
value: res.value,
type: 2,
};
}
}
renderMapAgain(searchValue);
}
