LargeScreenVisualization/viewdata-master/新增75套源码/75/js/echarts/GeoMap-master/old/geomap-old-readme.md

GeoMap.js（旧版使用说明）

概述

• GeoMap.js是一个绘制矢量地图控件，基于jQuery、Raphael，

• 支持geoJSON格式的数据源

• 通过Raphael绘制地图，默认采用svg，低版本IE采用vml，兼容性较好

文件结构

china.json          // 中国地图数据
geomap.js           // 模块压缩文件
geomap.debug.js // 模块源文件

使用方法

使用sea.js加载

//需要先加载jquery和raphael模块
var GeoMap = require('(路径)/geomap');

实例化一个GeoMap对象

var map = new GeoMap(element, width, height);
// element: 放置map的位置，支持tagName/#id/.class

渲染一张地图

// 渲染地图的参数
var config = {
    // 数据文件的路径
    srcPath: '../json/china.map.data.json',
    // 缩放比例，x轴和y轴采用不同的缩放比例
    scale:{x:2,y:3}
};

// 渲染地图的回调函数
function callback(){
    // 可以对地图进行操作
}

// 渲染
map.render(config, callback);

操作地图上的地区

// 实例化的GeoMap对象里，拥有一个mapPaths属性，其中记录了当前地图上的所有地区
map.render(function(){
    // 在回调函数中，给各个地区增加鼠标经过事件
    $.each(map.mapPaths, function(k, v){

        v.hover(function(){
            this.attr({fill:"#369"});
        });

    });
});

画点

// 定义一个点（如果半径大，就是一个圆形）
var oPoint = {
    "x" : 10.1,     // 经度（必须）
    "y" : 100.2,    // 纬度（必须）
    "r" : 1,        // 点的半径
    "opacity" : 0.5,    // 点的透明度
    "fill" : "#238CC3",     // 点的颜色
    "stroke" : "#238CC3",   // 外边框的颜色
    "stroke-width" : 0.1    // 外边框的粗度
};

// 把点画到地图上
var p = map.setPoint(oPoint);   

// 把点删掉
p.remove();

画线

// 数组中的坐标对象就是线段上的各个点
var aPoints = [{x:1,y:2},{x:2,y:3},…];

// 定义一条线
var oLine = {
    "ps": aPoints           // ps属性就是点数组
    "stroke": "#369"        // 线的颜色
    "stroke-width": 0.5     // 线的粗细
}；

// 把线画出来
var l = map.setLine(oLine);

// 把线删掉
l.remove();

缩放

map.viewScale('up');    // 放大
map.viewScale('down');  // 缩小
// 可以设置两个dom节点作为放大和缩小按钮，用点击事件调用放大和缩小方法
// 在放大状态时，可以拖动地图

平移地图

//在同一张画布上重复渲染不同的地图时，由于地图尺寸比例不一致，造成地图无法自动居中。
//默认情况下，会根据geoJSON的尺寸，自动让地图居左，如果想要让地图居中，需要在渲染地图的设置项里增加translate属性
var config = {
    ...
    // x轴偏移1度坐标，y轴不偏移;
    'translate':{
        'x' : 1,
        'y' : 0
    },
    ...
};