-
2022-03-29 15:41:19
series: [ { type: "map", mapType: "hz", silent: false, //鼠标移入区域变色 如果设置为true则无法高亮 // 鼠标移入高亮区域属性 emphasis: { borderWidth: 0, borderColor: "transparent", //高亮区域颜色 areaColor: "red", }, } ]//做地图下钻 获取点击区域名称时 需要设置silent为false才能获取到params中的name chart.on("click", function (params) { console.log(params.name); that.$emit("place", params.name) });更多相关内容 -
百度地图高亮显示城市行政区域，遮盖非目标区域
2018-06-06 22:40:38利用目标区域点的集合与外围自定义区域形成一个环形遮罩层，高亮显示所选行政区划，遮盖非目标区域。 -
2.（echarts篇）echarts颜色地图边缘高亮.zip
2021-12-31 13:41:49下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122254613 -
Echarts地图高亮循环数据展示
2021-09-22 15:33:35js项目使用Echarts进行地图的绘制与数据高亮循环展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...展开全文js项目使用Echarts进行地图的绘制与数据高亮循环展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图绘制</title> </head> <body> <div class="map" style="width:850px; height:600px;"></div> </body> </html> <script src="./js/echarts.min.js"></script> <script src="./js/jquery-3.6.0.min.js"></script> <script> var dataList = []; var dataList2 = []; var gdGeoCoordMap = { "南京市":[118.767413, 32.041544], "无锡市":[120.301663, 31.574729], "徐州市":[117.184811, 34.261792], "常州市":[119.946973, 31.772752], "苏州市":[120.619585, 31.299379], "南通市":[120.864608, 32.016212], "连云港市":[119.144784, 34.536075], "淮安市":[119.021265, 33.597506], "盐城市":[120.139998, 33.377631], "扬州市":[119.421003, 32.393159], "镇江市":[119.452753, 32.204402], "泰州市":[119.915176, 32.484882], "宿迁市":[118.275162, 33.963008] }; $.ajax({ url: '请求地址', type: 'GET', async: false, success: function (res) { if (res.code === 200) { res.data.forEach(item=>{ dataList.push({ name:item.areaCode, // 地区名称 value:item.scaleFee // 要展示的数据 }) }) }else { throttle(res.msg) } } }); $.get('./js/jiangsu.json', function (geoJson) { echarts.registerMap('jiangsu', { geoJSON: geoJson }); console.log(geoJson) var chart = echarts.init(document.querySelector('.map')); // 如果有的城市没有返回数据就补零 for(var key in gdGeoCoordMap){ for(var i=0; i<dataList.length; i++){ if(key === dataList[i].name){ dataList2.push( { name:key, value:gdGeoCoordMap[key].concat(dataList[i].value) } ) break; }else if(i+1 === dataList.length){ dataList2.push( { name:key, value:gdGeoCoordMap[key].concat(0) } ) } } }; var option = { geo:{ map: 'jiangsu', roam: true, showLegendSymbol: true, zoom: 1.2, // center:[119.915176, 32.484882], // 地图区域的颜色 itemStyle: { areaColor: 'rgba(0,0,0,0)', color: 'blue', borderColor: '#22F7F8', borderWidth: 2, shadowColor: '#22F7F8', shadowBlur: 15, // shadowOffsetX:10, shadowOffsetY: 5 }, label: { show: true, color: '#FFFFFF' }, // 高亮区域的配置 emphasis: { label: { show: true, color: '#ffffff' // 选中文字颜色 }, itemStyle: { areaColor: '#2B91B7', // 高亮区域颜色 // opacity:'0.5' } }, selectedMode:true, select: { label: { show: true, color: '#ffffff' }, itemStyle: { areaColor: '#2B91B7', // 选中区域颜色 } }, regions:[ { name:'南京市', selected:true } ] }, series: [ { type: 'effectScatter', coordinateSystem: 'geo', rippleEffect: { scale: 10, brushType: 'stroke', }, showEffectOn: 'render', itemStyle: { normal: { color: '#00FFFF', } }, label: { normal: { color: '#fff', }, }, symbol: 'circle', symbolSize: [10, 5], data:[dataList2[0]], zlevel: 1, }, { type: 'scatter', coordinateSystem: 'geo', itemStyle: { color: '#00FFF6', }, symbol: 'image://../images/home/map2.png', symbolSize: [24, 33], symbolOffset: [0, -20], data:[dataList2[0]], }, { type: 'scatter', coordinateSystem: 'geo', label: { show: true, formatter: function(params) { // var name = params.name var value = params.value[2] var text = `{fline|${value}元}` return text; }, rich: { // align:'center', fline: { padding: [15, 15,15,15], color: '#FFD426', fontSize: 16, fontWeight:700, } }, emphasis: { show: true }, backgroundColor:{ image:'../images/home/map.png' } }, itemStyle: { color: '#00FFF6', }, symbolSize: [0, 0], // 100 50 symbolOffset: [0, -70], //60 data:[dataList2[0]], } ] } chart.setOption(option,true); // 首次进入先展示默认的第一项 var j = 1 setInterval(() => { option.series.forEach(item=>{ item.data=[] item.data.push(dataList2[j]) }); option.geo.regions = [] option.geo.regions.push( { name:dataList2[j].name, selected:true } ) console.log(option.geo) j++; if(j === 13){ j = 0 // 全部展示完重置 } chart.setOption(option,true); },5000); // 点击当前高亮 并显示数据 chart.on('click', function(params) { option.geo.regions.push( { name:params.name, selected:true } ); option.series.forEach(item=>{ item.data.forEach((item2,index)=>{ if(item2.name === params.name){ return false; }else if(index+1 === item.data.length){ dataList2.forEach(item3=>{ if(item3.name === params.name){ item.data.push(item3) } }) } }) }) chart.setOption(option,true); }); window.addEventListener("resize", function () { chart.resize(); }); }); </script>效果
代码已上传Echarts点击可在线查看
如有问题可在下方留言，创作不易，如果觉得文章还不错，还请点赞支持一下，谢谢！！！
-
echarts Geo 地图高亮绘制
2020-12-20 06:16:20import React, { Component } from "react";import Echarts from "echarts";import "./middle-top.less";import ningbo from "../../util/ningbo.json";export default class middleTop extends Component {componen...展开全文import React, { Component } from "react";
import Echarts from "echarts";
import "./middle-top.less";
import ningbo from "../../util/ningbo.json";
export default class middleTop extends Component {
componentDidMount() {
let ningboGeo = Echarts.init(document.getElementById("ningboGeo"));
Echarts.registerMap("ningbo", ningbo);
let geoCoordMap = {
海曙: [121.369698, 29.804452],
江北: [121.439282, 29.968361],
北仑: [121.931303, 29.854452],
杭湾: [121.253162, 30.352107],
鄞州: [121.658436, 29.731662],
象山: [121.877091, 29.470206],
宁海: [121.432606, 29.299836],
余姚: [121.206294, 30.045404],
慈溪: [121.448052, 30.177142],
奉化: [121.41089, 29.562348],
镇海: [121.739282, 29.968361],
};
let geoCoordMap1 = {
海曙: [121.239698, 29.804452],
江北: [121.529282, 29.928361],
北仑: [121.801303, 29.854452],
杭湾: [121.103162, 30.352107],
鄞州: [121.558436, 29.731662],
象山: [121.777091, 29.470206],
宁海: [121.332606, 29.299836],
余姚: [121.056294, 30.045404],
慈溪: [121.308052, 30.177142],
奉化: [121.28089, 29.562348],
镇海: [121.639282, 29.968361],
};
let regions = [
{
name: "海曙", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "江北", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "北仑", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "杭湾", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "鄞州", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "象山", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "宁海", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "余姚", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "慈溪", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "奉化", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
{
name: "镇海", //区块名称
itemStyle: {
normal: {
areaColor: "#073978",
},
},
},
];
var data = [
{
name: "海曙",
value: 200,
show: false,
},
{
name: "江北",
value: 39,
show: false,
},
{
name: "镇海",
value: 152,
show: false,
},
{
name: "北仑",
value: 152,
show: false,
},
{
name: "杭湾",
value: 199,
show: false,
},
{
name: "鄞州",
value: 39,
show: false,
},
{
name: "余姚",
value: 152,
show: false,
},
{
name: "慈溪",
value: 152,
show: false,
},
{
name: "奉化",
value: 39,
show: false,
},
{
name: "宁海",
value: 152,
show: false,
},
{
name: "象山",
value: 152,
show: false,
},
];
var convertData = function (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 convertData1 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap1[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
let option = {
tooltip: {
trigger: "item",
formatter: function (params) {
return params.name;
},
},
geo: {
show: true,
map: "ningbo",
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
zoom: 1.2,
roam: true,
itemStyle: {
normal: {
areaColor: "#073978",
borderColor: "#ffffff",
borderWidth: 2,
},
emphasis: {
areaColor: "#2B91B7",
},
},
regions: regions,
},
series: [
{
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#fff",
},
},
name: "light",
type: "scatter",
coordinateSystem: "geo",
data: convertData1(data),
},
{
name: "Top 5",
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 9,
fontWeight: "bolder",
},
formatter(value) {
return value.data.value[2];
},
},
},
itemStyle: {
normal: {
color: "#00a7d9", //标志颜色
},
},
data: convertData(data),
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
zlevel: 1,
},
{
name: "Top 5",
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 9,
fontWeight: "bolder",
},
formatter(value) {
return value.data.value[2];
},
},
},
itemStyle: {
normal: {
color: "#f6a301", //标志颜色
},
},
data: convertData1(data),
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
zlevel: 1,
},
],
};
ningboGeo.setOption(option);
ningboGeo.on("click", function (params) {
regions.map((item) => {
item.itemStyle.normal.areaColor = "#073978";
if (item.name === params.name) {
item.itemStyle.normal.areaColor = "#3e82d5";
}
return true;
});
//逻辑控制
ningboGeo.setOption(option, true);
});
}
render() {
return (
历史
当月
历史预警总数1375
300
供电企业预警数
产业单位预警数
id="ningboGeo"
className="ningboGeo"
style={{ height: "55vh" }}
>
);
}
}
-
使用arcgis将geoJson的地图高亮显示
2020-06-14 17:07:30有geoJson，将地图高亮显示实现：在有geoJson数据的情况下，将对应地图高亮显示。（一般geoJson数据是从后台获取的，也可以在获取到后台返回数据后的then中直接调用该方法） 实现：在有geoJson数据的情况下，将对应...展开全文实现：在有geoJson数据的情况下，将对应地图高亮显示。（一般geoJson数据是从后台获取的，也可以在获取到后台返回数据后的then中直接调用该方法
1、首先，先来看一下geoJson的数据结构：（后面的多维数组经纬度是重点）
{ "type": "Polygon", "coordinates": [ [ [ 112.21574111878, 34.213652805745845 ], [ 112.21592954357959, 34.213579386996621 ], [ 112.21611899593837, 34.213577508491284 ], [ 112.21632567121881, 34.213575458879134 ], [ 112.21656679235296, 34.21357306722502 ], [ 112.21675624465269, 34.213571187735752 ], [ 112.21696291986875, 34.213569137050172 ], [ 112.21715237213178, 34.213567256949247 ], [ 112.21734161859173, 34.213551068456994 ], [ 112.21751281879061, 34.213477818264977 ], [ 112.21768422452988, 34.213418875936952 ], [ 112.21790791631945, 34.21340234456364 ], [ 112.21811397329061, 34.213357367660798 ], [ 112.21828517240064, 34.213284116411096 ], [ 112.21833457554335, 34.213126214093208 ], [ 112.21836654975367, 34.21295417476135 ], [ 112.21832983873209, 34.212797127907763 ], [ 112.21820722009718, 34.212655244540983 ], [ 112.21803396321413, 34.21258541469011 ], [ 112.21784430734759, 34.212572988007032 ], [ 112.21765485735843, 34.212574869128993 ], [ 112.21746520155293, 34.212562441857926 ], [ 112.21729194544176, 34.212492610940238 ], [ 112.21716953471871, 34.212365034584309 ], [ 112.21709838088508, 34.212208329145099 ], [ 112.2169587482414, 34.212080923474048 ], [ 112.21676785955285, 34.211982646466033 ], [ 112.21673163060051, 34.211959808398596 ], [ 112.21657841080889, 34.211984525897087 ], [ 112.21649435404311, 34.212128461156446 ], [ 112.216358628976, 34.212272908815422 ], [ 112.21625734885673, 34.212417014733788 ], [ 112.21619071944842, 34.212575087100582 ], [ 112.21600229709679, 34.212648506209817 ], [ 112.21581346336983, 34.212693308817684 ], [ 112.21566010245665, 34.212809310255459 ], [ 112.21552416940757, 34.212939448919442 ], [ 112.21545753823654, 34.213097520913053 ], [ 112.21526849776865, 34.213128014595604 ], [ 112.21507863555672, 34.213101275541739 ], [ 112.21488918419051, 34.213103152417375 ], [ 112.21469973280679, 34.213105029000459 ], [ 112.21459844886841, 34.213249133611725 ], [ 112.21454903864311, 34.213407034572811 ], [ 112.21455129708748, 34.213564423825851 ], [ 112.21458800150964, 34.21372147193528 ], [ 112.21462491140558, 34.2138928281394 ], [ 112.21476433833989, 34.214005928330927 ], [ 112.21488674796262, 34.214133507081478 ], [ 112.21509363010514, 34.214145767626157 ], [ 112.21530030685172, 34.214143719712013 ], [ 112.21548893861097, 34.214084609721823 ], [ 112.21555577592905, 34.213940845828155 ], [ 112.21565705900377, 34.213796740459209 ], [ 112.21574111878, 34.213652805745845 ] ] ] }2 、再来看看我们的代码：
HTML中：
<div ref="map" id="map"> </div>引入所需地图相关包：
import { loadModules } from "esri-loader";data中声明对象：
map:"", mapView:"", graphicLayer:null,3、methods中封装好的方法：
将地图初始化：
mapInit() { loadModules([ "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/layers/WebTileLayer", "esri/geometry/SpatialReference", "esri/layers/GraphicsLayer" ]) .then( ([Map, MapView, MapImageLayer, WebTileLayer, SpatialReference,GraphicsLayer]) => { this.map = new Map({ basemap: "satellite", spatialReference: { wkid: 4326 } }); this.mapView = new MapView({ //实例化地图视图 container: "map", map: this.map, zoom: 7, center: [113.65, 34.76667] }); this.mapView.ui.components = []; let baseLayer = new MapImageLayer( //地图后台地址，获取地图文件 this.$config.mapServerIP + "arcgis/rest/services/HeNanMap/MapServer", { id: "baseLayer" } ); this.map.add(baseLayer); } ) .catch(err => { console.error(err); }); },获取到geoJson将地图高亮展示：
//通过geoJson高亮显示 Drawline(geoJson) { //在高亮显示本区域之前移除之前的图层 this.map.remove(this.graphicLayer); loadModules([ "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Polyline", "esri/symbols/SimpleLineSymbol", "esri/Color", ]).then( ([GraphicsLayer, Graphic, Polyline,SimpleLineSymbol,Color ]) => { this.graphicLayer = new GraphicsLayer(); let coordinates = geoJson; coordinates = JSON.parse(geoJson).coordinates let polyLine = new Polyline(coordinates); let lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 1); //（255，255，0）是高亮展示的黄色，后面1是线条宽度，需要别的颜色可以自己根据需求调整 let graphic = new Graphic(polyLine, lineSymbol); this.graphicLayer.add(graphic); this.map.add(this.graphicLayer); }) },然后在获取到了对应的geoJson数据的情况下，调用上面的方法，就可以直接将该geoJson中对应的地图边框高亮显示了。
-
html5+css3世界地图区域划分高亮显示特效
2020-06-11 22:36:30html5+css3世界地图区域划分高亮显示特效是一款鼠标移动到地图区域划分块上，该区域高亮显示代码。 -
81.（leaflet篇）leaflet区域高亮（悬浮修改样式）.zip
2022-04-08 10:13:52下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/124034422 -
关于地图高亮的相关介绍
2020-03-13 19:02:18这个时候，点击那个图层的时候，就没有高亮效果，要想点击高亮，就需要featureLayerView. 把这段代码加入到view的点击事件里面，就可以点击那个图层， 那个图层就高亮。 view.whenLayerView(graphic.layer).then... -
天地图mapicon
2020-12-29 10:24:43接入天地图，多种地图切换，省份区域高亮，，地图事件等 -
flash全国地图,划过地图高亮,点击省区放大地图，自动适应
2013-05-28 22:42:03全国各省学校分布图。实现功能：xml配置可以互动的省区和项目分布结构。省区滑过高亮，点击放大自动适应，在省区显示具体分布点。 -
2.（echarts篇）echarts颜色地图边缘高亮
2022-04-21 08:56:14地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> &... -
百度地图高亮显示选中的行政区域,其余区域加遮罩
2016-06-24 10:40:39百度地图高亮显示选中的行政区域,其余区域加遮罩 -
一文搞定echarts地图轮播高亮⚡⚡
2021-09-13 09:26:12这次给大家分享一下在工作中经常用到的echarts地图轮播高亮。 技术栈用的是vue2.x 相信效果大家已经清楚了那我们就开干吧。 ????️ toDoList 简单的准备一个地图 保存实例备用 设置定时器 设置鼠标移入移出... -
一文搞定 echarts 地图轮播高亮
2021-09-11 01:02:09???? 前言这两天忙着做公司的超级数据大屏，实在挤不出时间连续更文。但是更文活动都坚持这么久了也不想停止更新，那我就分享一下在工作中经常用到的echarts地图轮播高亮吧。技术栈用的是v... -
【Web技术】1078- 一文搞定 echarts 地图轮播高亮
2021-09-13 00:19:12???? 前言这两天忙着做公司的超级数据大屏，实在挤不出时间连续更文。但是更文活动都坚持这么久了也不想停止更新，那我就分享一下在工作中经常用到的echarts地图轮播高亮吧。技术栈用的是v... -
echart bmap-echart 结合 部分地图高亮
2020-03-30 16:45:12设置百度地图样式修改 http://lbsyun.baidu.com/customv2/editor/82e7bad64506614df73507d2f8a35847/teafield 在此基础上修改的，可以参考一下这个 function loadMap(data,id) { var path=[]; myChart = echarts.... -
echarts 中国地图设置高亮省份
2021-01-16 15:43:23// 全部取消高亮 // myChart.dispatchAction({ // type: 'downplay',//默认显示江苏的提示框 // //seriesIndex: 0,//这行不能省 // dataIndex: this.highDataIndex // }); // 设置高亮 // myChart.... -
世界各国地图高彩中英文对照版.rar
2019-10-30 08:56:54世界各国地图高彩中英文对照版 世界地图集 坤舆万国全图 -
echarts 高亮轮廓的中国地图
2021-08-31 17:50:5635.9], //设置可见中心坐标，以此坐标来放大和缩小 zoom: 1.13, //放大级别 itemStyle: { normal: { // 地图底色 areaColor: "#112B9B", // 高亮边缘+阴影样式 borderWidth: 3, borderColor: "#36E5FE", shadowBlur... -
web端js百度地图自定义maker覆盖物_鼠标悬停展示行政区域高亮
2021-12-20 14:48:18js鼠标悬停高亮显示行政区/地图自定义覆盖物/地图api -
echarts世界地图设置高亮
2020-12-24 02:17:16项目需要中国地图和世界地图两个页面，需要定时对省份或国家进行高亮展示，现在中国地图已经可以满足要求了，就是修改serives里的data，给需要高亮的加selected:true；但是在世界地图那我加这个属性却还是不能高亮... -
Openlayers 点击地图 行政地区高亮显示
2021-03-17 17:13:51选择的地区高亮 -
基于echarts实现3D地图的定时高亮和点击事件
2021-06-16 04:46:04技术选型 文章所选技术栈：vue、echarts、echarts-gl 安装Vue和echarts 1、安装echarts和echarts-alnpm i echarts --save... [基于echarts实现3D地图的定时高亮和点击事件]http://www.zyiz.net/tech/detail-149333.html -
高德地图实现某个标记高亮
2020-12-29 15:16:54<!doctype html> <html> <head> <meta charset="utf-8"> <meta ...meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">...ti... -
百度地图 行政区域高亮显示
2019-09-12 17:29:41>本文转载至网络： 原文地址：...function getBoundary(){ //百度地图获取行政区域的对象 var bdary = new BMap.Boundary(); bdary.get("重庆", fun... -
echarts地图点击某区域高亮的问题
2020-07-02 17:42:54背景：地图点击某个区域高亮。 解析：通过查找api，我找到一种既可以实现点击高亮，又可以不更改其他区域的值的方法。 获取到数据后，手动给数据添加itemstyle属性设置正常颜色和强调颜色，点击时，通过点击的... -
echart世界地图(并且指定国家高亮显示)？
2020-12-24 02:15:55问题描述echart在页面上画出世界地图，并且指定的国家高亮显示问题出现的环境背景及自己尝试过哪些方法官网给的代码在页面是不能显示地图相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)option = {title: {...
