echarts拓展地图makpoint定位问题

黄平 发布于 2014/08/27 17:34
阅读 15K+
收藏 1

@Kener-林峰 你好,想跟你请教个问题:利用自己拓展的地图makpoint发现有错位的问题。


// 自定义扩展图表类型:mapType = HK
// 自定义扩展图表类型:mapType = HK
require('echarts/util/mapData/params').params.GUANGZHOU = {
    getGeoJson: function(callback) {
        $.getJSON('geoJson/GUANGZHOU_geo.json',callback);
    }
}
option = {
    title : {
        text : '广州市地图',
        subtext: '广州市',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    dataRange: {
        min: 800,
        max: 50000,
        text:['高','低'],
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '广州市地图',
            type: 'map',
            mapType: 'GUANGZHOU', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
               {name: '天河区', value: 20057.34},
                {name: '越秀区', value: 15477.48},
                {name: '萝岗区', value: 31686.1},
                {name: '番禺区', value: 6992.6},
                 {name: '花都区', value: 6992.6},
                {name: '从化市', value: 44045.49},
                {name: '南沙区', value: 40689.64},
            ],
            // 自定义名称映射
            nameMap: {
            },
            // 文本位置修正
            textFixed : {
                'Yau Tsim Mong' : [-10, 0]
            },
            // 文本直接经纬度定位
            geoCoord : {
               '天河区' : [31.2, 25.36],
'越秀区' : [27.56, 30.55],
'从化市' : [32, 37.57],
'增城市' : [33.55, 33.57],
'番禺区' : [28.999, 28],
'海珠区' : [28, 29.8],
'荔湾区' : [26.67, 29.6],
'白云区' : [28, 32.7],
'花都区' : [27.1, 34.9],
'萝岗区' : [30.5, 31.59],
'黄埔区' : [30.5, 30],
'南沙区' : [31.2, 25.36]
            },
            mapLocation :{x:'center',y:'center',width:'640',height:'500'},
            scaleLimit :{max:100, min:0.5}
        },{
mapLocation :{x:'center',y:'center',width:'627',height:'413'},
name : '用电量',
type : 'map',
mapType : 'GUANGZHOU',
data : [],
markLine : {
smooth : true,
effect : {
show : true,
scaleSize : 1,
period : 30,
color : '#fff',
shadowBlur : 10
},
itemStyle : {
normal : {
borderWidth : 1,
lineStyle : {
type : 'solid',
shadowBlur : 10
}
}
},
data : []
},
markPoint : {
symbol : 'emptyCircle',
symbolSize : function(v) {
return 10 + v / 10
},
effect : {
show : true,
shadowBlur : 0
},
itemStyle : {
normal : {
label : {
show : false
}
}
},
                  data : [{'白云区':100}]
}
}
    ]
};


                    
                    


                    
                    

以下是问题补充:

@黄平:经过测试,不管是哪个区都标注在同一个位置。 (2014/08/27 17:36)
加载中
0
Kener-林峰
Kener-林峰
两个 mapLocation ?
橘子芒果
橘子芒果
回复 @黄平 : 你的问题解决了吗,我也遇到类似问题,地图定位时候经纬度没问题,可是定位到了地图外面
黄平
黄平
@天亮出发 是啊!
天亮出发
天亮出发
回复 @黄平 : 怎么做的数据,还是用arcMap来转的吗?
黄平
黄平
@天亮出发 自己做的!
天亮出发
天亮出发
@黄平 你好,请问下你扩展广州的geo.son数据哪里来的
下一页
0
黄平
黄平
按下面配置也是相同的结果。
require('echarts/util/mapData/params').params.GUANGZHOU = {
    getGeoJson: function(callback) {
        $.getJSON('geoJson/GUANGZHOU_geo.json',callback);
    }
}
option = {
    title : {
        text : '广州市地图',
        subtext: '广州市',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    dataRange: {
        min: 800,
        max: 50000,
        text:['高','低'],
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '广州市地图',
            type: 'map',
            mapType: 'GUANGZHOU', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
               {name: '天河区', value: 20057.34},
                {name: '越秀区', value: 15477.48},
                {name: '萝岗区', value: 31686.1},
                {name: '番禺区', value: 6992.6},
                 {name: '花都区', value: 6992.6},
                {name: '从化市', value: 44045.49},
                {name: '南沙区', value: 40689.64},
            ],
            // 自定义名称映射
            nameMap: {
            },
            // 文本位置修正
            textFixed : {
                'Yau Tsim Mong' : [-10, 0]
            },
            // 文本直接经纬度定位
            geoCoord : {
               
            },
            scaleLimit :{max:100, min:0.5},
markPoint : {
symbol : 'emptyCircle',
symbolSize : function(v) {
return 10 + v / 10
},
effect : {
show : true,
shadowBlur : 0
},
itemStyle : {
normal : {
label : {
show : false
}
}
},
      data : [{'白云区':100}],geoCoord : {
'天河区' : [31.2, 25.36],
'越秀区' : [27.56, 30.55],
'从化市' : [32, 37.57],
'增城市' : [33.55, 33.57],
'番禺区' : [28.999, 28],
'海珠区' : [28, 29.8],
'荔湾区' : [26.67, 29.6],
'白云区' : [28, 32.7],
'花都区' : [27.1, 34.9],
'萝岗区' : [30.5, 31.59],
'黄埔区' : [30.5, 30],
'南沙区' : [31.2, 25.36]
}
}
        }
    ]
};


                    
0
Kener-林峰
Kener-林峰
我试了香港的例子,定位是对的,应该跟扩展没关系。
黄平
黄平
不是吧,我在echarts.baidu.com上测试也是不行的哦!
0
黄平
黄平

// 自定义扩展图表类型:mapType = HK
require('echarts/util/mapData/params').params.HK = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/HK_geo.json',callback);
    }
}
option = {
    title : {
        text : '香港18区人口密度 (2011)',
        subtext: '人口密度数据来自Wikipedia',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 800,
        max: 50000,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '香港18区人口密度',
            type: 'map',
            mapType: 'HK', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '中西区', value: 20057.34},
                {name: '湾仔', value: 15477.48},
                {name: '东区', value: 31686.1},
                {name: '南区', value: 6992.6},
                {name: '油尖旺', value: 44045.49},
                {name: '深水埗', value: 40689.64},
                {name: '九龙城', value: 37659.78},
                {name: '黄大仙', value: 45180.97},
                {name: '观塘', value: 55204.26},
                {name: '葵青', value: 21900.9},
                {name: '荃湾', value: 4918.26},
                {name: '屯门', value: 5881.84},
                {name: '元朗', value: 4178.01},
                {name: '北区', value: 2227.92},
                {name: '大埔', value: 2180.98},
                {name: '沙田', value: 9172.94},
                {name: '西贡', value: 3368},
                {name: '离岛', value: 806.98}
            ],
            // 自定义名称映射
            nameMap: {
                'Central and Western':'中西区',
                'Eastern':'东区',
                'Islands':'离岛',
                'Kowloon City':'九龙城',
                'Kwai Tsing':'葵青',
                'Kwun Tong':'观塘',
                'North':'北区',
                'Sai Kung':'西贡',
                'Sha Tin':'沙田',
                'Sham Shui Po':'深水埗',
                'Southern':'南区',
                'Tai Po':'大埔',
                'Tsuen Wan':'荃湾',
                'Tuen Mun':'屯门',
                'Wan Chai':'湾仔',
                'Wong Tai Sin':'黄大仙',
                'Yau Tsim Mong':'油尖旺',
                'Yuen Long':'元朗'
            },
            // 文本位置修正
            textFixed : {
                'Yau Tsim Mong' : [-10, 0]
            },
            // 文本直接经纬度定位
            geoCoord : {
                'Islands' : [113.95, 22.26]
            }
        },{
            name: '广州 Top10',
            type: 'map',
            mapType: 'HK',
            data:[],
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                },
                data : [
                    [{name:'离岛'},{name:'南区',value:95}]
                ]
            },
            markPoint : {
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/10
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    }
                },
                data : [
                    {name:'屯门',value:95},
                    {name:'西贡',value:90},
                    {name:'东区',value:80},
                    {name:'重庆',value:70}
                ]
            }
        }
    ]
};
                    


0
Kener-林峰
Kener-林峰
你的geoCord里都没定义markPoint里的data中名字对应的经纬度坐标肯定不行啊,你模块离岛那个附近写几个坐标试试就行了,注意香港很小的,经纬度坐标差别在小数点后两位
0
呵Sever
呵Sever
重点是广州的geo.json数据哪里来??
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部