关键词：
概述：
当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。
geojson数据生成：
geojson数据的生成有很多种方式，在此介绍两种：1、通过gdal直接转换；2、通过geoserver生成。
1、通过gdal
通过gdal生成可参考文章GDAL的java环境配置以及将shp转换为json
2、通过geojson
在图层预览里面选择geojson即可，如下图。
展示实现：
实现代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
html,body,#main
padding: 0px;
margin: 0px;
height: 100%;
overflow: hidden;
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
<!-- ECharts单文件引入 -->
<script src="../../plugin/echart/build/dist/echarts.js"></script>
<script src="../../plugin/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
require.config(
paths:
echarts: '../../plugin/echart/build/dist'
);
require(
[
'echarts',
'echarts/chart/map'
],
function (ec)
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var cityMap =
"中国": "province",
"省会": "capital"
;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap)
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] =
getGeoJson: (function (c)
var geoJsonName = cityMap[c];
return function (callback)
$.getJSON('data/' + geoJsonName + '.geojson', callback);
)(city)
var option =
series : [
name: 'China Map',
type: 'map',//地图类型
mapType: '中国',
selectedMode: 'single',//选择类型,
roam: true,//鼠标滚轮缩放
hoverable:false,//鼠标经过高亮
itemStyle:
normal:
borderWidth:1,
borderColor:'#cccccc',
color: '#f3f3f3',
label:
show: false,
textStyle:
color: '#ff0000'
,
emphasis: // 也是选中样式
borderWidth:1,
borderColor:'#00ffff',
color: '#ffffff',
label:
show: true,
textStyle:
color: '#ff0000'
,
data:[]
]
;
// 为echarts对象加载数据
myChart.setOption(option);
);
</script>
</body>
---------------------------------------------------------------------------------------------------------------
技术博客
http://blog.csdn.NET/gisshixisheng
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:niujp08@qq.com
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)
使用echarts实现自定义区域地图
...99999&zoom=42.自定义区域选择（以下简称“工具”）：http://geojson.io/#map=10/26.6778/106.3360https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json解析源码https://www.cnblogs.com/telwanggs/p/11056515.htmlhttps://blog.csdn.net/mulumeng981/article/details/76400687https://blo... 查看详情
vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)
一、参考示例：MakeAPie 说明：上面这个是JQuery实现的地区分布图 二、实现过程：1、下载json:地址： https://hxkj.vip/demo/echartsMap/或者：EasyMap 下载的有的并非是严格的json文件，选用用 json.cn 进行转换2、v... 查看详情
shp数据转为geojson格式作为echarts地图扩展文件
...片的方式既不灵活，也不美观。ECharts地图扩展文件使用geoJson格式,制作方式有很多种，我选择通过shp数据转换为geojson格式，因为可以通过ArcMap制作自己个性化的shp数据,也就能灵活得到满足项目需求的geojson数据，制作方 查看详情
AmCharts4：来自 GeoJSON 的自定义地图的 getPolygonById 方法？
】AmCharts4：来自GeoJSON的自定义地图的getPolygonById方法？【英文标题】：AmCharts4:getPolygonByIdmethodforcustommapfromGeoJSON?【发布时间】：2022-01-1922:35:18【问题描述】：我正在尝试将getPolygonById方法与使用自定义GeoJSON数据创建的地图多边形... 查看详情
echarts地图省份的颜色自定义如何设置？
...实现方法中从数据库中获取数据，然后将数据作为变量代Echarts的option中的data值。3、在注入这些值的时候进行判断，根据不同的选择情况，从关系描述的js中获取值，看看选择条件是否在范围之内，如果是，则加上itemStyle属性。4... 查看详情
从 geoJSON 获取地图视口中存在的要素
】从geoJSON获取地图视口中存在的要素【英文标题】：GetfeaturespresentinmapviewportfromgeoJSON【发布时间】：2017-06-0512:21:41【问题描述】：我需要在地图上为我拥有的数据添加标记。在思考过程中，我浏览了map.data.loadGeoJson(\'google.json\');... 查看详情
echarts地图省份的颜色自定义如何设置？
...实现方法中从数据库中获取数据，然后将数据作为变量代Echarts的option中的data值。3、在注入这些值的时候进行判断，根据不同的选择情况，从关系描述的js中获取值，看看选择条件是否在范围之内，如果是，则加上itemStyle属性。4... 查看详情
echarts中国地图各个省市自治区自定义颜色(代码片段)
前言最近接了一个外包的项目，其中有个需求是这样的，需要展示一个中国的统计地图，要求每个省市区都是不一样的颜色，必须特别区分开。以及隐藏南海部分。看了Echats相关文档，发现有类似的demo，但不是特别符合要... 查看详情
echarts绘制geo地图
参考技术A前面只是将已经现成的geojson数据绘制出来如果遇到一个需求，需要将地图合并，并抹除重合的边界，该如何处理呢？例如，需要将北湖区和苏仙区合并成市局机关，geojson数据要如何处理呢？ 查看详情
echarts地图自定义颜色
...置，设置visualMap中的min最小值、max最大值、color颜色值，echart会根据value数值自动匹配对应颜色一个是dataRange，在splitList数据中的加入对应的color即可（"name":"南海诸岛","value":15000,color:'#cfc5de'） 查看详情
获取街道镇级的地图geojson数据方法，使用echarts绘制出街道镇级的地图区域画面（中山市为例）(代码片段)
...域。3、统一管理区域数据，有区县的市直接拿区县的geoJson数据，没有区县的市级直接拿街道、镇级的geoJson数据来绘制区域地图。二、获取geoJson数据注意：以下方法获取的都是2015年左右的数据。第一种方法（不... 查看详情
echarts地图的基本使用方法(代码片段)
...配置项和数据显示图表。引入地图底图echarts现支持使用geoJSON及svg的形式引入1、GeoJSON引入导入标准的GeoJSON格式的数据//GeoJSON格式"type":"Feature", 查看详情
使用geoserver导出地图数据geojson并应用
...码），然后再使用GeoServer界面管理中导出数据功能导出为GeoJSON格式开 查看详情
html加载外部geojson（promises）：向地图添加数据(代码片段)
自定义地图连线效果，基于echart自定义切换连线中心
首先引入echart需要的几个基础js文件 创建一个存放地图的div空间，因为特殊需求把原来点击切换中心点变成了下拉框。 图形的效果大概是这样的 <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>地图连... 查看详情
怎么获取echarts需要的geojson数据去渲染地图：以广州市白云区24镇街为例（内附资源）(代码片段)
...过半天的查找没有在网上找到广州市白云区24镇街的边界geojson数据，要不不全，要不就是收费（能理解），并且自己第一次弄这个geojson数据确实感觉有点恶心心。希望这篇对同学有所帮助，减少一些不必... 查看详情
用echartsjs实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容
本人研究echarts已经有一段时间了，今天就分享几个关于echarts的小技巧。虽然看起来简单，但做起来却很繁琐，不过实用性倒是很好。在一个大的页面中，左边为table表格，右边为echarts的散点图。需求一，实现echarts中所有的散点... 查看详情
arcgisapiforjavascript如何实现自定义在线地图
参考技术A1、数据要存放在数据库中2、然后启用企业级地理数据库3、注册数据库到arcgisserver4、将要编辑的数据发布为要素服务5、在客户端用jsapi的就可以实现数据编辑祝好运！ArcGISAPIforjavascript如何实现自定义在线地图 查看详情