SGMap
SGMap是一个基于二维图象的地图引擎,支持png、svg等格式的地图图片,为兼容室内定位系统,该地图引擎采用厘米为单位定位坐标。
组件安装
npm install sgmap
组件使用
import SGMap from './sgmap';
//地图基础数据,以上数据由定位系统定义后,获取即可
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' //地图图片路径
};
//标记,一般为定位对象,如人员,车辆等
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
}]
}];
....相关变量定义代码略
render(){
const {marks} = this.state;
return (
<div >
<SGMap width="1000" height="800" mapjson={map} marks={marks} regions={regions} onnewregion={this.onNewregion.bind(this)} onpickup={this.onPickup.bind(this)} />
</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.js //地图引擎主文件
----layer.js //绘图图层类封装
----sgmap.css //地图引擎样式表
-demo
----index.js //地图引擎使用示例代码