概述：当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。geojson数据生成：geojson数据的生成有很多种方式，在此介绍两种：1、通过gdal直接转换；2、通过geoserver生成。1、通过gdal通过gdal生成可参考文章2、通过geojson在图层预览里面选择geojson即可，如下图。展示实现：实现代码如下：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
html,body,#main{
padding: 0
height: 100%;
&!-- 为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({
echarts: '../../plugin/echart/build/dist'
'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);
var option = {
series : [
name: 'China Map',
type: 'map',//地图类型
mapType: '中国',
selectedMode: 'single',//选择类型,
roam: true,//鼠标滚轮缩放
hoverable:false,//鼠标经过高亮
itemStyle: {
borderWidth:1,
borderColor:'#cccccc',
color: '#f3f3f3',
show: false,
textStyle: {
color: '#ff0000'
emphasis: {
// 也是选中样式
borderWidth:1,
borderColor:'#00ffff',
color: '#ffffff',
show: true,
textStyle: {
color: '#ff0000'
// 为echarts对象加载数据
myChart.setOption(option);
&/body&实现后效果如下：---------------------------------------------------------------------------------------------------------------技术博客http://blog.csdn/gisshixisheng在线教程http://edu.csdn/course/detail/799Github/lzugis/联系方式q & & & q:e-mail:公众号:lzugis15Q Q 群:(webgis)& & & & & & &()
本文已收录于以下专栏：
相关文章推荐
echarts地图扩展文件使用geoJson格式。
1、在线生成
http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json，但是最多生成到...
Reference from:
http://blog.csdn.net/sagittarius1988/article/details/
一、背景介绍
        之...
Linux老难题解决了！
Linux工程师很多，甚至有很多有多年工作经验，但是对一些关键概念的理解非常模糊，比如不理解CPU、内存资源等的真正分布，具体的工作机制，这使得他们对很多问题的分析都摸不到方向。比如进程的调度延时是多少？linux能否硬实时？多核下多线程如何执行？
ECharts主页：  /index.html
ECharts-2.1.8下载地址：  /buil...
由于工作需要可能用到echarts的地图下钻功能，说实话，网上写地图下钻的就那么几篇文章都是大同小异，然后我还弄不太明白，就自己写了这个。
echart地图全国下钻到省
1、获取相应市级地图的json文件
2、在标签中使用jquery的异步加载获取资源
3、不说了，直接上图和代码
项目的文件结构
具体的实现代码：
网址：http://www.1hwj.net/
基础功能：
●在地图上覆盖图片。把景区手绘图、导游图、小区平面图、大楼平面图覆盖到地图指定位置。
●分类显示标注点。对位置点名称、说明、图片、类别进...
本文承接前文，利用shp数据制作Echarts支持的geoJson格式的地图数据。
1.引入echarts库文件
2.在页面中新建div用于地图展示
3.在页面中引入js文件
4.在js脚本中编写代码
$(function() {
// 路径配置...
没图说个ji  先上图
开始接触时是echarts 2 ，echarts升级至echarts 3 之后没怎么接触，通过介绍了解到，echarts3变得更加人性化，将一些底层的方法开放出来，增...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Pages: 1/2
主题 : 现在新提交应用要提交一个geojson文件了。令人抓狂啊。
级别: 精灵王
可可豆: 13044 CB
威望: 13351 点
在线时间: 1643(时)
发自: Web Page
现在新提交应用要提交一个geojson文件了。令人抓狂啊。&&&
Routing app coverage files are .geojson files which specify the geographic regions supported by your app. The file can have only one MultiPolygon element. MultiPolygon elements consist of at least one Polygon. Polygons contain at least four coordinate points. Polygon start and end coordinate points must be the same.这个文件要怎样写？老是提示不对。。。JSON file you uploaded was invalid. Errors : Each set of coordinates provided must be valid : [Ljava.lang.O@136c0260   { &type&: &MultiPolygon&,  &coordinates&: [    [[-42.7.501741], [79.6.790978], [79..701766],[-57..275308],[-42.7.501741]]
    ]  }[ 此帖被zzxap在 20:02重新编辑 ]
级别: 精灵王
可可豆: 13044 CB
威望: 13351 点
在线时间: 1643(时)
发自: Web Page
上传个毛啊。。。。fuck
级别: 新手上路
可可豆: 124 CB
威望: 124 点
在线时间: 11(时)
发自: Web Page
这个究竟是什么东西啊？
级别: 新手上路
可可豆: 192 CB
威望: 192 点
在线时间: 300(时)
发自: Web Page
xcode -〉command +&&n -& resource -& geostring
级别: 圣骑士
可可豆: 1408 CB
威望: 1408 点
在线时间: 401(时)
发自: Web Page
这是什么东东呀
级别: 新手上路
可可豆: 13 CB
威望: 13 点
在线时间: 1(时)
发自: Web Page
这个问题要怎么解决啊？有人知道不？
级别: 骑士
UID: 208377
可可豆: 1004 CB
威望: 1001 点
在线时间: 376(时)
发自: Web Page
你在挖土豆吗？
级别: 新手上路
可可豆: 29 CB
威望: 19 点
在线时间: 115(时)
发自: Web Page
楼主问题解决了吗&&同问啊&&
级别: 新手上路
可可豆: 16 CB
威望: 6 点
在线时间: 113(时)
发自: Web Page
lz，你最后是怎么写的呀，我也遇到这个问题了，求助
级别: 版主
发帖: 1759
可可豆: 112198 CB
威望: 112845 点
在线时间: 8535(时)
发自: Web Page
看不太明白。。。
 Developer------------------------------------------------------------Η αγάπη ποτέ δεν αποτυγχάνει.愛是永不止息。Love never fails.
    --《圣经.新约》哥林多前书第13章
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版502 Bad Gateway
502 Bad Gateway
nginx/1.8.1> 博客详情
摘要: shp geojson
package&cn.ssk.&
import&java.io.F
import&java.io.FileW
import&java.io.IOE
import&java.net.URL;
import&java.util.HashM
import&org.geotools.data.FileDataStoreF
import&org.geotools.data.shapefile.ShapefileDataS
import&org.geotools.data.simple.SimpleFeatureC
import&org.geotools.data.simple.SimpleFeatureI
import&org.geotools.data.simple.SimpleFeatureS
import&org.geotools.factory.GeoT
import&org.opengis.feature.simple.SimpleF
import&cn.ssk.mysql.AreaI
import&cn.ssk.mysql.MysqlU
import&sun.nio.cs.ext.GBK;
public&class&GeotoolDemo&{
&private&static&HashMap&String,&AreaInfo&&codeMap=MysqlUtils.getCodeMap();
&private&static&HashMap&String,FileWriter&&jsonFiles=new&HashMap&&();
&public&static&void&main(String[]&args)throws&Exception&{
&&URL&url=GeoTools.class.getClassLoader().getResource("xian.shp");
&&File&file=new&File(url.toURI());
&&handleProcess(file);&
&public&static&void&handleProcess(File&shpfile)throws&Exception{
&&ShapefileDataStore&fdstore=(ShapefileDataStore)FileDataStoreFinder.getDataStore(shpfile);
&&fdstore.setCharset(new&GBK());
&&SimpleFeatureSource&source=fdstore.getFeatureSource();
&&SimpleFeatureCollection&sfc=source.getFeatures();
&&try(SimpleFeatureIterator&iterator=sfc.features()){
&&&AreaInfo&
&&&while(iterator.hasNext()){
&&&&SimpleFeature&feature=iterator.next();
&&&&String&cityName=feature.getAttribute("NAME").toString();
&&&&String&polygon=feature.getAttribute("the_geom").toString();
&&&&info=codeMap.get(cityName);
&&&&if(info!=null){
&&&&&Integer&mgr=info.getMgr();
&&&&&String&coordinates=parseCoordinate(polygon);
&&&&&if(jsonFiles.containsKey(mgr.toString())){
&&&&&&FileWriter&fw=jsonFiles.get(mgr.toString());
&&&&&&fw.append(",");
&&&&&&appendToFile(fw,coordinates,cityName);
&&&&&}else{
&&&&&&FileWriter&fw=new&FileWriter(mgr.toString()+".json",true);
&&&&&&fw.append("{\"type\":\"FeatureCollection\",\"features\":[");
&&&&&&fw.flush();
&&&&&&jsonFiles.put(mgr.toString(),&fw);
&&&&&&appendToFile(fw,&coordinates,cityName);
&&&for(String&filename&:jsonFiles.keySet()){
&&&&FileWriter&writer=jsonFiles.get(filename);
&&&&writer.append("]}");
&&&&writer.flush();
&&&&writer.close();
&public&static&void&appendToFile(FileWriter&writer,String&coordinate,String&cityName)&throws&IOException{
&&writer.append("{\"type\":\"Feature\",\"properties\":{\"name\":\"");
&&writer.append(cityName);
&&writer.append("\"},");
&&writer.append("\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":");
&&writer.append(coordinate);
&&writer.append("}}");
&&writer.flush();
&private&static&String&geojsonWrapper(String&polygon){
&&StringBuilder&sber=new&StringBuilder(polygon.length()+30);
&&String&tmp[]=polygon.split(",");
&&sber.append("[[[");
&&for(int&i=0;i&tmp.i++){
&&&sber.append("[");
&&&sber.append(tmp[i].trim().replace("&",&","));
&&&sber.append("]");
&&&if(i&!=&tmp.length-1)
&&&&sber.append(",");
&&sber.append("]]]");
&&return&sber.toString();
&public&static&String&parseCoordinate(String&polygon){
&&int&beginIndex=polygon.indexOf("(((")+3;
&&int&endIndex=polygon.lastIndexOf(")))");
&&String&s=polygon.substring(beginIndex,endIndex).replace('(',&'&').replace(')',&'&');
&&return&geojsonWrapper(s);
&&根据县的名称，查询县所属的市，该关系存入一个数据库表中，也可存入文件中。
package&cn.ssk.
import&java.sql.C
import&java.sql.DriverM
import&java.sql.PreparedS
import&java.sql.ResultS
import&java.sql.SQLE
import&java.util.HashM
public&class&MysqlUtils&{
&private&static&final&String&driver="com.mysql.jdbc.Driver";
&private&static&final&String&url="jdbc:mysql://localhost:3306/geotools";
&private&static&final&String&username="root";
&private&static&final&String&password="123456";
&private&static&Connection&conn=
&private&static&PreparedStatement&stmt=
&private&static&ResultSet&rs=
&private&static&HashMap&String,&AreaInfo&&codeMap=new&HashMap&&();
&&&Class.forName(driver);
&&&conn=DriverManager.getConnection(url,&username,&password);
&&&init();
&&}&catch&(Exception&e)&{
&&&throw&new&RuntimeException(e);
&public&static&void&close(ResultSet&rs,PreparedStatement&stmt,Connection&conn){
&&&if(rs!=null){rs.close();}
&&&if(stmt!=null){stmt.close();}
&&&if(conn!=null){conn.close();}
&&}&catch&(Exception&e)&{
&&&throw&new&RuntimeException(e);
&private&static&void&init(){
&&AreaInfo&&//数据库表对应bean
&&&stmt=conn.prepareStatement("select&code,cityName,mgr&from&areacode&where&code&like&?");
&&&stmt.setString(1,&"15____");//根据省份编号仅获取该省县市的编码对应关系
&&&rs=stmt.executeQuery();
&&&while(rs.next()){
&&&&info=new&AreaInfo();
&&&&info.setCode(rs.getInt("code"));
&&&&info.setCityName(rs.getString("cityName"));
&&&&info.setMgr(rs.getInt("mgr"));
&&&&codeMap.put(rs.getString("cityName"),&info);
&&}&catch&(SQLException&e)&{
&&&throw&new&RuntimeException(e);
&&}finally&{
&&&close(rs,stmt,conn);
&public&static&HashMap&String,&AreaInfo&&getCodeMap()&{
&&return&codeM
数据库行政区划代码关系表（数据来自国家统计局）：
code：县或市的行政区划代码，mgr 县所属的市的代码
人打赏支持
参与源创会
领取时间：
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 60123
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥I'm trying to add GeoJSON layers to an array using a loop, and then showing them on my map.
My goal is to have a variable like this: scenario_json[1] = layer1, scenario_json[2] = layer2, etc...
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&maxFeatures=400&outputFormat=json&format_options=callback:getJson",
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase2&maxFeatures=400&outputFormat=json&format_options=callback:getJson",
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase3&maxFeatures=400&outputFormat=json&format_options=callback:getJson"
$.getScript('src/leaflet.js');
for(i=0;i&=myURL.i++){
var scenario_json = {};
scenario_json[i] = new L.GeoJSON();
function getJson(data){
console.log(data)
scenario_json[i].addData(data);
url: myURL[i],
jsonp: false,
dataType: "json",
jsonpCallback: "getJson",
success: getJson
I am getting this response in my console:
Object {readyState: 1}
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 386, features: Array[386], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefinedgetJson @ VM3689:11c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 377, features: Array[377], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefined
Any idea why it doesn't work ?
解决方案 What's happening is that scenario_json doesn't exist in the context of the getJson callback.
I'm unsure as to why you're using JSONP since it's an old workaround for making crossdomain requests. You don't need that since you're working from localhost/same domain at the moment. You could try to just use plain XHR with JSON instead of JSONP.
Remove the formatOptions from your URL's:
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&maxFeatures=400&outputFormat=json",
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase2&maxFeatures=400&outputFormat=json",
"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase3&maxFeatures=400&outputFormat=json"
Switch to $.getJSON:
for (i = 0; i &= myURL. i++) {
var scenario_json = {};
$.getJSON(myURL[i], function (data) {
scenario_json[i] = new L.GeoJSON(data);
}).done(function () {
console.log('$.getJSON Done!');
}).fail(function () {
console.log('$.getJSON Fail!');
Here's a working example on Plunker:
PS. If you ever run into crossdomain issues you can simple solve it by enabling CORS on your GeoServer.
本文地址： &
我想使用循环以GeoJSON图层添加到一个数组，然后向他们展示我的地图。我的目标是有一个这样的变量：scenario_json [1] = layer1的，scenario_json [2] = 2层，等等...
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&maxFeatures=400&outputFormat=json&format_options=callback:getJson\",
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase2&maxFeatures=400&outputFormat=json&format_options=callback:getJson\",
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase3&maxFeatures=400&outputFormat=json&format_options=callback:getJson\"];$ .getScript（'SRC / leaflet.js'）;对于（i = 0; I＆LT; = myURL.我++）{
变种scenario_json = {};
scenario_json [I] =新L.GeoJSON（）;
功能的getJSON（数据）{
的console.log（数据）
scenario_json [I] .addData（数据）;
$阿贾克斯（{
网址：myURL [I]
JSONP：假的，
数据类型：“JSON”
jsonpCallback“的getJSON”
成功：的getJSON
}）}; 我得到在我的控制台这样的响应： 对象的readyState {1}VM3689：10 {对象类型：“FeatureCollection”，totalFeatures：386，功能：数组[386]，CRS：对象}VM3689：11遗漏的类型错误：无法读取属性undefinedgetJson @ VM3689的“addData”：11C @ jquery.min.js：3p.fireWith @ jquery.min.js：3K @ jquery.min.js：5R @ jquery.min.js ：5VM3689：10 {对象类型：“FeatureCollection”，totalFeatures：377，功能：数组[377]，CRS：对象}VM3689：11遗漏的类型错误：无法读取的未定义的属性'addData“ 任何想法，为什么它不工作？感谢解决方案 这是怎么回事的是， scenario_json 不在的的上下文中的getJSON 回调。 我不能确定，为什么你使用JSONP，因为它是一个古老的解决方法做跨域请求。你不需要说因为你从本地主机/同一个域目前的工作。你可以尝试只使用纯XHR使用JSON而不是JSONP。 删除 formatOptions 从你的URL：
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&maxFeatures=400&outputFormat=json\",
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase2&maxFeatures=400&outputFormat=json\",
\"http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase3&maxFeatures=400&outputFormat=json\"]; 切换到 $的getJSON ： 为（i = 0; I＆LT; = myURL.我++）{
变种scenario_json = {};
$ .getJSON（myURL [I]，功能（数据）{
scenario_json [I] =新L.GeoJSON（数据）;
}）。完成（功能（）{
的console.log（'。$的getJSON完成！'）;
}）失败（函数（）{
的console.log（'$的getJSON失败！'）;
}）;} 下面是上Plunker工作示例：
PS。如果你遇到问题的跨域你可以在你的GeoServer使CORS简单的解决这个问题。
本文地址： &
扫一扫关注官方微信