echarts自定义描绘地图和修改地图

需求要求

需要在四川省地图上添加天府区得行政区域

实现此功能

分步骤实现此功能
1、获取json数据
2、描绘地图
3、引入项目

1、获得地图json数据文件

可以从此获取 http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
点击geojson下载

2、下载文件后（mapgeojson），在此网址内进行地图绘制 http://geojson.io/#map=2/20.0/0.0

如果是下载得文件（在 open 选择 file）

然后就在地图上进行绘制，绘制完成后在菜单栏得 Save 中选择 GeoJson 进行保存，保存后修改文件名称问json格式

3、引入项目中，就可以正常使用

// html
<div id="main" style="width: 800px;height:800px;"></div>// jsvar myChart = echarts.init(document.getElementById('main'));$.get('./mapgeo.json',function(geoJson){echarts.registerMap('sc',geoJson,{});var option = {tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},visualMap: {min: 500,max: 50000,text:['High','Low'],left: 'right',realtime: false,calculable: true,inRange: {color: ['#313695','#4575b4', '#74add1','#abd9e9','#e0f3f8']}},series: [{name: '西城',type: 'map',mapType: 'sc',aspectScale: 0.85,  //地图长度比label: {normal: {show: true,textStyle: {color: '#000'}},emphasis: {show: true,textStyle: {color: '#333'}}},data: [{name: '天府区', value: 5000},]}]};myChart.setOption(option);});

echarts自定义描绘地图和修改地图相关推荐

浅谈百度地图的简单开发之引入基本地图以及修改地图样式（一）
今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...
百度地图案例-修改地图样式
https://lbsyun.baidu.com/apiconsole/custommap 这个网址里面点击特色服务平台 - 个性化地图 - 地图模板 - 选择地图样式 - 点击发布样式 - 复制i ...
echarts地图文字重叠解决方案_vue中使用echarts地图且修改地图文字位置
使用echarts地图的时候,从阿里云地图选择器下载完对应省份的geojson之后,在页面中显示,会出现一些地市名字覆盖的情况,可以直接修改geojson中的数据对文字的位置进行修改解决方法打 ...
echarts 自定义世界地图（含中国地图省份数据）
效果图主要代码依赖echarts.min.js axios.js !(function(global) {let chart = echarts.init(document.getElementB ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
腾讯地图api修改信息窗口样式_ThingJS通过地图的信息窗口展示常见数据
在查看地图的时候,用户可通过显示的信息窗口,获得graphics和feature常见数据信息.ThingJS通过地图的信息窗口展示常见数据. 无论是2D地图还是3D地图,经常会有展示信息面板的需求,可 ...

echarts自定义描绘地图和修改地图

echarts自定义描绘地图和修改地图相关推荐

最新文章

热门文章