minemap-leaflet v0.2.3
minemap-leaflet
Project setup
瓦片地图体验网址: http://117.51.157.185:8001/editor/#/ <br>
矢量地图体验网址: http://117.51.157.185:8001/vector-editor/#/ <br>
npm install minemap-leaflet
MMLeaflet
####参数
mapTitleLayer
地图瓦片 minemap底图瓦片分为两部分,测试阶段可以使用高德或腾讯地图瓦片服务 http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z} 高德 http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style={t} 腾讯
poiTitleLayer
poi瓦片
titleLayerOptions
minZoom: Number
地图瓦片最小显示级别
maxZoom: Number
地图瓦片最大显示级别
tileSize: Number
瓦片大小
瓦片配置项,注意minemap瓦片大小为512512,高德、百度、Google为256256
mapOptions
preferCanvas: boolean(default:false)
是否应在Canvas渲染器上渲染路径
crs: Crs
要使用的坐标参考系统
center: LatLng
地图中心点
zoom: Number
Zoom显示范围
minZoom: Number
最小显示级别
maxZoom: Number
最大显示级别
layers: Layer[]
最初给地图添加的图层
maxBounds: LatLngBounds
给定的地图视窗范围
地图配置项
<MMLeaflet :mapTitleLayer='xxxx://xxxxxxxx/xxxxx/view/{z}/{x}/{y}'
:poiTitleLayer='xxxx://xxxxxxxx/xxxxx/view/t/{z}/{x}/{y}'
:titleLayerOptions={}
:mapOptions={}
/>
Editor
####参数
editor_item
可选择项,提供'point','line','adsorptionLine','intersectLine','polygon','maskPolygon','intersectPolygon','unionPolygon','differencePolygon','rectangle','circle'类型 point: 创建点 line: 创建普通线 adsorptionLine: 创建可吸附线 intersectLine: 创建可打断线,该线可以切割线段或者平面 polygon: 创建面 maskPolygon: 创建环面 intersectPolygon: 得到面的交集 unionPolygon: 得到面的并集 differencePolygon: 得到两个面的差集 rectangle: 创建矩形 circle: 创建圆
<MMLeaflet>
<Editor :editor_item="['point','line','adsorptionLine','intersectLine','polygon','maskPolygon']"></Editor>
</MMLeaflet>
MMVectorEdit
####参数
editor_item
必选项 提供'point','line','adsorptionLine','intersectLine','polygon','maskPolygon','intersectPolygon','unionPolygon','differencePolygon','rectangle','circle'类型 point: 创建点 line: 创建普通线 adsorptionLine: 创建可吸附线 intersectLine: 创建可打断线,该线可以切割线段或者平面 polygon: 创建面 maskPolygon: 创建环面 intersectPolygon: 得到面的交集 unionPolygon: 得到面的并集 differencePolygon: 得到两个面的差集 rectangle: 创建矩形 circle: 创建圆
<MMVectorEdit :editor_item="['point','line','adsorptionLine','intersectLine','polygon','maskPolygon']"></MMVectorEdit>
API methods
add(geojson: Object) => Array
添加一个地图要素,并返回一个包含地图要素的id的数组,用于二次编辑
var feature = {
id:'unique-id',
type:'Feature',
properties:{},
geometry:{type:'Point', coordinates:[0, 0]}
};
var featureIds = draw.add(feature);
console.log(featureIds)
//=> ['unique-id']
get(featureId: string): ?Feature
返回指定id的GeoJSON,如果id不存在,则返回undefined
getFeatureIdsAt(point: { x: number, y: number }): Array
返回当前在指定点处的要素的要素ID数组 point参数需要来自像素空间的x,y坐标,而不是经纬度
var featureIds = Draw.getFeatureIdsAt({x:20, y:20});
console.log(featureIds)
//=> ['top-feature-at-20-20', 'another-feature-at-20-20']
getSelectedIds(): Array
返回当前所选要素的要素ID数组
getAll(): FeatureCollection
返回地图上所有要素的FeatureCollection
delete(ids: string | Array): draw
删除具有指定ID的要素,返回图形的实例
var feature = { type:'Point', coordinates:[0, 0] };
var ids = draw.add(feature);
draw
.delete(ids)
.getAll();
//{ type:'FeatureCollection', features:[] }
deleteAll(): draw
删除地图上所有要素
setFeatureProperty(featureId: string, property: string, value: any): draw
根据指定的id,设置要素上的属性值。 返回图形的实例
Draw Event
draw.create
图形被创建时的事件
draw.delete
图形被删除时的事件
draw.update
图形被更新时的事件,如拖拽或平移操作
draw.modechange
改变绘制图形类型时的事件
Function
interrupt()
输入双端点线段,返回相交处的单个点 这里使用矢量求面积法进行算法优化,可提高部分效率
arguments
line: GeoJSON
var line1 = line([[0,0],[0,2]]);
var line2 = line([[1,-1],[1,1]]);
interrupt(line1, line2);
//point([1,0])
lineIntersection()
输入多端点线段,返回相交点的数组
arguments
line: GeoJSON
var line1 = line([[0,0],[0,4]]);
var line2 = line([[0,-1],[2,1],[4,-1]]);
lineIntersection(line1, line2);
//[point([1,0]), point([3,0])]
selfIntersection()
输入线或面,输出线或面的自相交点数组、若无自相交输出false
arguments
feature: GeoJSON
var line = line([[0,0],[2,2],[0,2],[2,0]]);
selfIntersection(line);
//[point([1,1])]
pointInsertPolygon()
按空间顺序将点插入线或面的coordinates中,返回插入点后的新数组,点必须在线或者面的边上
arguments
coors: Array points: GeoJSON
var line = line([[0,0],[2,0],[2,2],[0,2],[0,0]]);
var point = point([2,1]);
pointInsertPolygon(line.geometry.coordinates, points);
//[[0,0],[2,0],[2,1],[2,2],[0,2],[0,0]]
sliceLineByPoint()
输入线和点,按点切割线段,点需在线上,返回被切后线的数组
arguments
coors: Array points: GeoJSON
var line = line([[0,0],[2,0],[2,2],[0,2],[0,0]]);
var point = point([2,2]);
sliceLineByPoint(line。geometry.coordinates, point);
//[[[0,0],[2,0],[2,2]], [[2,2],[0,2],[0,0]]]
ringPolygon()
输入包含关系的两个多边形,返回一个环装多边形
arguments
inner: GeoJSON 包含关系多边形被包含部分的多边形 outer: GeoJSON 包含关系多边形包含部分的多边形
var polygon1 = line([[1,1],[3,1],[3,3],[1,3],[1,1]]);
var polygon2 = line([[0,0],[4,0],[4,4],[0,4],[0,0]]);
ringPolygon(polygon1, polygon2);
//polygon([[[0,0],[4,0],[4,4],[0,4],[0,0]], [[1,1],[3,1],[3,3],[1,3],[1,1]]])
connectLine()
输入两条线段,返回连接后的一条线
arguments
line: GeoJSON
var line1 = line([[0,0],[4,0],[4,4]]);
var line2 = line([[4,4],[0,4],[0,0]]);
connectLine(line1, line2);
//line([[0,0],[4,0],[4,4],[0,4],[0,0]])
pointConvex()
输入点集,返回该点集的闭包
arguments
points: point / FeatureCollection
var point1 = point([0,0]);
var point2 = point([1,0]);
var point3 = point([0,1]);
var point4 = point([0,-1]);
var point5 = point([-1,0]);
pointConvex([point1, point2, point3, point4, point5]);
//FeatureCollection
pointVoronoi()
pointVoronoi(): 输入点集,返回改点集的泰森多边形
arguments
points: point / FeatureCollection
var point1 = point([0,0]);
var point2 = point([1,0]);
var point3 = point([0,1]);
var point4 = point([0,-1]);
var point5 = point([-1,0]);
pointVoronoi([point1, point2, point3, point4, point5]);
//FeatureCollection
pointTin()
pointTin(): 输入点集,返回该点集的不规则三角网
arguments
points: point / FeatureCollection
var point1 = point([0,0]);
var point2 = point([1,0]);
var point3 = point([0,1]);
var point4 = point([0,-1]);
var point5 = point([-1,0]);
pointTin([point1, point2, point3, point4, point5]);
//FeatureCollection
featureBuffer()
featureBuffer(): 输入点或线,返回输入feature的缓冲区
arguments
feature: point / line options: steps: Number 生成缓冲区包含的点数 units: String(miles, kilometers, degrees, or radians) 缓冲区距离单位 radius: Number 缓冲区单位长度 type: String(inner,outer or auto) 缓冲区类型,在选择线缓冲区时生效
var point = point([0,0]);
var line = line([[0,0],[4,0],[4,4],[0,4],[0,0]]);
featureBuffer(point, {
steps:64,
units:'kilometers',
radius:0.05,
});
//FeatureCollection
featureBuffer(line, {
units:'kilometers',
radius:0.05,
type:'auto'
});
//FeatureCollection
geoUtils()
simplify(): 输入线或多边形,返回简化后的点的数组
arguments
feature: polygon / line
var line = line([[0,0],[1,0],[2,0],[3,0],[4,0]]);
geoUtils(line)
//line([[0,0], [0,4])