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])

Customize configuration

See Configuration Reference.