SGMapts

SGMap是一个基于二维图象的地图引擎，支持png、svg等格式的地图图片，为兼容室内定位系统，该地图引擎采用厘米为单位定位坐标。

组件安装

npm install sgmapts

组件使用

import SGMap from 'sgmapts';

//地图基础数据，以上数据由定位系统定义后，获取即可
const map = {
    mapx:0,
    mapy:0,
    maxx: 7934.569741212021,        //x轴最大值
    maxy: 31306.97293826297,        //y轴最大值
    minx: -54243.67835698258,       //x轴最小值
    miny: -27311.515884528646,      //y轴最小值
    mapurl:'./map.png'              //地图图片路径
    orig_width:5735,                //地图图片原始宽度
    orig_height:1062                //地图图片原始高度
};

//标记，一般为定位对象，如人员，车辆等
let marks=[{
        imgurl:"./location.png",            //定位对象的图片路径，地图引擎中，所有标签暂时默认24x24
        cmx:0.0,                            //厘米为单位的x轴坐标
        cmy:0.0,                            //厘米为单位的y轴坐标
        offsetx:-12,                        //对象图片在地图上显示时需要x轴偏移量
        offsety:-24                         //y轴偏移量
    },{
        imgurl:"./location.png",
        cmx:-54100.0,
        cmy:7100.0,
        offsetx:-12,
        offsety:-24
    }];

//需要显示的区域(以多个点组成的多边形区域)
let regions=[{
    name:"测试区域",                     //区域名称
    color:'red',                        //区域绘图颜色（具体设值见本文档可用参数说明areacolor值）
    active:true,                        //true/false，用于控制区或的选取状态
    regions:[{
        x:-16252.768768985676,              
        y:10385.42723694757,
        z:0
    },{
        x:-6304.249073274543,
        y:8700.14568329231,
        z:0
    },{
        x:-86.42426345508284,
        y:13096.532345001684,
        z:0
    },{
        x:-7299.1010428456575,
        y:20790.20900299308,
        z:0
    },{
        x:-18118.116211931512,
        y:19178.20056036631,
        z:0
    },{
        x:-16252.768768985676,
        y:10385.42723694757,
        z:0
    }]
}];

let tracks = [
{
    "id":"aa",
    "x": 6617.5250259976265,
    "y": 6409.950145409223
},
{
    "id":"bb",
    "x": 7544.57266277629,
    "y": 7012.35978396344
},
{
    "id":"aa",
    "x": 7571.499357620483,
    "y": 4914.312422102203
},
{
    "id":"bb",
    "x": 7340.699116098825,
    "y": 3543.3111757374327
},
{
    "id":"aa",
    "x": 6963.725388280114,
    "y": 3418.674698795181
}];

handlerDraw = () => {
    //重新绘制操作下，需要先清除当前active的区域重新绘
    let regions:any[]=[];
    this.state.regions.forEach( (item , index ) => {
    if(item.active==undefined||item.active==false){
        regions.push(item);
    }
})

    this.setState({editmode:true,regions:regions});
}
....相关变量定义代码略

render(){
const { editmode,map,regions,marks } = this.state;
    return (
        <div >
        <SGMap width="1000" editmode={editmode} height="800" forceFit={false} wheelmode={true} mapjson={map} marks={marks} regions={regions} showOverall={true}
        tracks={tracks}
        onOK={this.onNewregion.bind(this)} 
        onCancel={this.onDrawCancel.bind(this)}
        onpickup={this.onPickup.bind(this)}  />
        <button onClick={this.handlerDraw.bind(this)}>绘制</button>
        </div>
    );
}

可用参数说明

width - 地图显示区域宽度
height - 地图显示区域高度
mapjson - 地图基础信息（见上述示例map对象）
marks - 地图上需要显示的标签（见上述示例代码marks变量）
regions - 多边形区域（见上述示例代码regions变量）
editmode - 默认false，是否进行绘图模式（即自由定义多边形区域）
pickmode - 默认false，是否进行拾取坐标点的模式
areacolor - 区域绘制的颜色样式，可选值有 default（默认红色样式）,red,green,blue，允许自定义样式，自定义样式字段如下：
    {
        polygonFillStyle : 'rgba(255,0,0,.2)',          //区域填充颜色
        lineStyle:'red',                                //颜色及点的颜色
        lineWidth:2                                     //线条宽度
    }

可用事件方法

onnewregion - 但editmode为true时，完成多边形区域绘制后，返回区域所有坐标点数据
示例代码如下：
onNewregion = (points) =>{
    console.log(JSON.stringify(points));
}

onpickup - pickmode为true时，拾取的坐标点变化后，返回拾取的坐标点数据
示例代码：
onPickup = (points)=>{
    let p = {imgurl:"./location.png",offsetx:-12,offsety:-24,...points};
    this.state.marks.push(p);
    this.setState({marks:this.state.marks});
    console.log("pickup:"+JSON.stringify(points));
}

代码编译

通过代码库下载至本地后，执行：

//安装支持库
npm install

//运行demo
npm start

//编译组件
npm run build

代码文件：

-src
----index.ts            //地图引擎主文件
----layer.ts            //绘图图层类封装
----index.css           //地图引擎样式表
-example
----index.js            //地图引擎使用示例代码