大屏中常用地图原型设计

针对问题：在日常项目中，我们常常遇到需在大屏上以地图热力图的形式，展示各个省或地市相关指标情况。为了高保真的原型，那经常会遇到需要根据整体大屏的配色去画各省份的地图，目前百度可搜索地图照片，但无法修改地图内区域的配色，以下将介绍如何获取各省地图以及快速修改地图配色：

操作步骤：

1、复制需要省份地图的前端代码

①绘制地图网站地址：https://www.pslkzs.com/xd/examples/mapInner.php?id=530000&name=%E4%BA%91%E5%8D%97%E7%9C%81

②在下方网站中找到需要省份的地图，点击左侧省份名称，可发现已绘制好的地图（以云南为例）；

③复制JSON数据源码

2、利用前端源码调配地图区域块颜色

①前端源码调配网址：https://www.makeapie.com/editor.html?c=xnmZ5X4gCz&v=1；

②将步骤1中的JSON数据源码，粘贴在下方代码块的第二行代码中{ }；

③修改地图中各地市区域块名称及颜色；

④修改色块值

关于前端颜色代码可参考该博主文章：https://blog.csdn.net/singit/article/details/49179643

地图调配源码见下方：

var mapName = 'yunnan'
var yunnan ={ 此处粘贴绘制地图的代码 }
var data = [{name:"迪庆藏族自治州",value:339},{name:"怒江傈僳族自治州",value:42},{name:"丽江市",value:102},{name:"大理白族自治州",value:10},{name:"保山市",value:339},{name:"德宏傣族景颇族自治州",value:102},{name:"昭通市",value:226},{name:"楚雄彝族自治州",value:226},{name:"临沧市",value:10},{name:"曲靖市",value:500},{name:"玉溪市",value:400},{name:"昆明市",value:339},{name:"普洱市",value:400},{name:"文山壮族苗族自治州",value:226},{name:"红河哈尼族彝族自治州",value:10},{name:"西双版纳傣族自治州",value:226},];var geoCoordMap = {};
var toolTipData = [ ];/*获取地图数据*/
myChart.showLoading();
echarts.registerMap('yunnan', yunnan)
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {// 地区名称var name = v.properties.name;// 地区经纬度geoCoordMap[name] = v.properties.cp;});console.log(data)
console.log(toolTipData)
var max = 480,min = 9; // todo
var maxSize4Pin = 100,minSize4Pin = 20;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;
};
option = {tooltip: {padding: 0,enterable: true,transitionDuration: 1,textStyle: {color: '#000',decoration: 'none',},// position: function (point, params, dom, rect, size) {//   return [point[0], point[1]];// },},visualMap: {show: true,min: 0,max: 500,left: '0%',top: '50%',calculable: true,seriesIndex: [1],inRange: {color: ['#6FCF6A', '#FFFD64', '#FF5000']}},geo: {show: true,map: mapName,label: {normal: {show: true},emphasis: {show: false,}},itemStyle: {normal: {areaColor: '#fff',borderColor: '#1180c7',},emphasis: {areaColor: 'red',}}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: 0,label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#fff',}}},{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',zlevel: 6,},]
};

3、基于上图步骤，已完成地图绘制及区域颜色调配，将完成的地图截图贴到原型中即可，若想在原型工具内直接对地图内的区域进行编辑，只能使用切图一个个拼凑，比较耗费时间，且需要切图功底.....

若有更快更好的方式绘制地图且修改地图区域的颜色，请各位大神指导！！！

大屏中常用地图原型设计相关推荐

Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
常用快速原型设计工具大比拼、原型设计工具哪个好用
原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经验直接导至该产品的可用 ...
如何使用 WEB 技术编写前端代码，实现大屏展示和地图显示功能
使用 WEB 技术编写前端代码实现大屏展示和地图显示功能可以采用以下步骤: 使用 HTML.CSS.JavaScript 等前端技术构建页面布局和样式. 使用 JavaScript 库或框架,如 jQ ...
vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题
vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题* 最近在写可视化大屏的时候发现使用百度地图,在缩放的缩放的时候视角总是往红色框位置缩放,并不在鼠标位置进行视角缩放,查 ...
java实现年会微信签到，签到后在大屏中展示，导出签到信息
java实现微信签到,签到后在活动大屏中实时展示签到人信息,也可以导出签到人信息用于抽奖. 一.微信公众号申请及配置 1.微信公众号申请,请参考https://jingyan.baidu.com/ar ...
10款常用的原型设计工具，包含一键生成原型工具
原型图是产品设计师日常工作的"常客",原型图软件也扮演着产品设计师的"武器"角色. 许多新产品设计师不知道如何选择原型图软件.本文盘点了10个优秀的原型图软件, ...
三原县地图可视化大屏数据三原县地图.js
三原县地图可视化大屏数据前言可视化大屏数据在学习地图可视化数据的时候,发现在网上只能找到省.市.县的地图json数据,到县级别只能到县,数据却不能精确到镇.网上没有三原精确到镇的json数据,于 ...
微信公众号签到，签到后在活动大屏中实时展示签到人信息，也可以导出签到人信息用于抽奖
根据公司要求,花2天做了一个微信公众号签到,效果不错,记录一下,以做备忘. 完整项目源码下载一.微信公众号申请及配置 1.微信公众号申请,请参考https://jingyan.baidu.com/a ...
大数据分析中常用的方法有哪些
数据分析和数据处理本身是个非常大的领域,这里主要总结些我个人觉得比较基础且实用的部分,在日常产品工作中可以发挥比较大作用.本期主要讨论些数据分析的三个常用方法: 1.数据趋势分析趋势分析般而言,适用 ...

大屏中常用地图原型设计

大屏中常用地图原型设计相关推荐

最新文章

热门文章