diff --git a/docs/api/draw/index.en.md b/docs/api/draw/index.en.md deleted file mode 100644 index df24469f38..0000000000 --- a/docs/api/draw/index.en.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Draw Component -order: 2 ---- - -地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 - -# 使用 - -**using modules** - -```javascript -import { DrawControl } from '@antv/l7-draw'; -``` - -**CDN 版本引用** - -```html - - - - -``` - -### 参数 - -```javascript -const control = new DrawControl(scene, option); -``` - -#### scene - -scene 对象 - -#### options - -control 配置项 - -| name | Type | Default | Description | -| -------- | --------------------------------------------- | ---------- | ------------------------------- | -| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 | -| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 | -| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 | -| style | | | 地图绘制样式 | - -**controlOptions** -UI 组件配置项 - -- point `boolean | drawOption` 绘制点工具配置 -- line `boolean | drawOption` 绘制线工具配置 -- polygon `boolean | drawOption` 绘制面工具配置 -- circle `boolean | drawOption` 绘制圆工具配置 -- rect `boolean | drawOption` 绘制矩形工具配置 -- delete `boolean | drawOption` 添加删除工具 - -默认配置 - -``` - { - point: true, - line: true, - polygon: true, - rect: true, - circle: true, - delete: true - } -``` - -示例 - -``` -{ - point: false, - line: { - editEnable: false, - }, - polygon: true, - rect: true, - circle: true, - delete: false -``` - -### 添加到地图 - -```javascript -scene.addControl(control); -``` - -### 从地图中移除 - -```javascript -scene.removeControl(control); -``` - -### Draw Type - -可以不依赖 Draw UI 组件，独立的使用每一个 Draw - -#### DrawCircle - -绘制圆形 - -```javascript -import { DrawCircle } from '@antv/l7-draw'; -const drawCircle = new DrawCircle(scene); -drawCircle.enable(); -``` - -#### DrawRect - -绘制四边形 - -```javascript -import { DrawRect } from '@antv/l7-draw'; -const drawRect = new DrawRect(scene); -drawRect.enable(); -``` - -#### DrawLine - -绘制路径 - -```javascript -import { DrawLine } from '@antv/l7-draw'; -const drawLine = new DrawLine(scene); -drawLine.enable(); -``` - -#### DrawPoint - -绘制点 - -```javascript -import { DrawPoint } from '@antv/l7-draw'; -const drawPoint = new DrawPoint(scene); -drawPoint.enable(); -``` - -#### DrawPolygon - -绘制多边形 - -```javascript -import { DrawPolygon } from '@antv/l7-draw'; -const drawPoint = new DrawPolygon(scene); -drawPoint.enable(); -``` - -### 配置项 DrawOption - -- editEnable boolean 是否允许编辑 -- selectEnable boolean 是否允许选中 - -### 方法 - -#### enable - -开始编辑，绘制完成之后会自动结束。 - -#### disable - -结束编辑 - -### 事件 - -#### draw.create - -绘制完成时触发该事件 - -#### draw.delete - -图形删除时触发该事件 - -#### draw.update - -图形更新时触发该事件，图形的平移，顶点的编辑 - -### style - -- active 绘制过程中高亮颜色 -- normal 正常显示状态 - -```javascript -const style = { - active: { - point: { - type: 'PointLayer', - shape: 'circle', - color: '#fbb03b', - size: 5, - style: { - stroke: '#fff', - strokeWidth: 2, - }, - }, - line: { - type: 'LineLayer', - shape: 'line', - color: '#fbb03b', - size: 1, - style: { - opacity: 1, - lineType: 'dash', - dashArray: [2, 2], - }, - }, - polygon: { - shape: 'fill', - color: '#fbb03b', - style: { - opacity: 0.1, - stroke: '#fbb03b', - strokeWidth: 1, - strokeOpacity: 1, - lineType: 'dash', - dashArray: [2, 2], - }, - }, - }, - normal: { - polygon: { - type: 'PolygonLayer', - shape: 'fill', - color: '#3bb2d0', - style: { - opacity: 0.1, - stroke: '#3bb2d0', - strokeWidth: 1, - strokeOpacity: 1, - lineType: 'solid', - dashArray: [2, 2], - }, - }, - line: { - type: 'LineLayer', - shape: 'line', - size: 1, - color: '#3bb2d0', - style: { - opacity: 1, - }, - }, - point: { - type: 'PointLayer', - shape: 'circle', - color: '#3bb2d0', - size: 3, - style: { - stroke: '#fff', - strokeWidth: 2, - }, - }, - }, - normal_point: { - type: 'PointLayer', - shape: 'circle', - color: '#3bb2d0', - size: 3, - style: { - stroke: '#fff', - strokeWidth: 2, - }, - }, - mid_point: { - point: { - type: 'PointLayer', - shape: 'circle', - color: '#fbb03b', - size: 3, - style: {}, - }, - }, -}; -``` diff --git a/examples/polygon/fill/demo/city.js b/examples/polygon/fill/demo/city.js new file mode 100644 index 0000000000..f49bdc8a47 --- /dev/null +++ b/examples/polygon/fill/demo/city.js @@ -0,0 +1,95 @@ +import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'blank', + center: [ 116.368652, 39.93866 ], + zoom: 10.07 + }) +}); +scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/707cd4be-8ffe-4778-b863-3335eefd5fd5.json' // 获取行政区划P噢利用 + ) + .then(res => res.json()) + .then(data => { + const chinaPolygonLayer = new PolygonLayer({ + autoFit: true + }) + .source(data) + .color( + 'name', + [ + 'rgb(239,243,255)', + 'rgb(189,215,231)', + 'rgb(107,174,214)', + 'rgb(49,130,189)', + 'rgb(8,81,156)' + ] + ) + .shape('fill') + .style({ + opacity: 1 + }); + // 图层边界 + const layer2 = new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('rgb(93,112,146)') + .size(0.6) + .style({ + opacity: 1 + }); + + scene.addLayer(chinaPolygonLayer); + scene.addLayer(layer2); + }); + + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/ba8fa803-a8c3-4c67-b806-fe1c444546bd.json' // 国界线 + ).then(res => res.json()) + .then(data => { + const boundaries = new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('rgb(93,112,146)') + .size(0.6) + .style({ + opacity: 1 + }); + + scene.addLayer(boundaries); + }); + + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/d09a3567-8c0e-4711-b8b8-cd82e8870e4b.json' // 标注数据 + ).then(res => res.json()) + .then(data => { + const labelLayer = new PointLayer({ + zIndex: 5 + }) + .source(data, { + parser: { + type: 'json', + coordinates: 'center' + } + }) + .color('#fff') + .shape('name', 'text') + .size(12) + .style({ + opacity: 1, + stroke: '#fff', + strokeWidth: 0, + padding: [ 5, 5 ], + textAllowOverlap: false + }); + + scene.addLayer(labelLayer); + }); +}); diff --git a/examples/polygon/fill/demo/meta.json b/examples/polygon/fill/demo/meta.json index 2ad784d30f..30ce5fff04 100644 --- a/examples/polygon/fill/demo/meta.json +++ b/examples/polygon/fill/demo/meta.json @@ -5,9 +5,14 @@ }, "demos": [ { - "filename": "polygon.js", - "title": "全国地图行政区划", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ" + "filename": "province.js", + "title": "中国地图省级", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*kZuyQ5LlfrAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "city.js", + "title": "中国地图市级", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*GfGdRqWvJfAAAAAAAAAAAABkARQnAQ" }, { "filename": "usa.js", diff --git a/examples/polygon/fill/demo/polygon.js b/examples/polygon/fill/demo/polygon.js deleted file mode 100644 index 19edc408f0..0000000000 --- a/examples/polygon/fill/demo/polygon.js +++ /dev/null @@ -1,49 +0,0 @@ -import { Scene, PolygonLayer, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - style: 'light', - center: [ 107.042225, 37.66565 ], - zoom: 3.87 - }) -}); -scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json') - .then(res => res.json()) - .then(data => { - const colors = [ - '#D7F9F0', - '#A6E1E0', - '#72BED6', - '#5B8FF9', - '#3474DB', - '#005CBE', - '#00419F', - '#00287E' - ]; - const layer = new PolygonLayer({}) - .source(data) - .color('name', colors) - .shape('fill') - .active(true) - .style({ - opacity: 0.9 - }); - - const layer2 = new LineLayer({ - zIndex: 2 - }) - .source(data) - .color('#fff') - .size(0.3) - .style({ - opacity: 1 - }); - - scene.addLayer(layer); - scene.addLayer(layer2); - }); -}); diff --git a/examples/polygon/fill/demo/province.js b/examples/polygon/fill/demo/province.js new file mode 100644 index 0000000000..b05bad4710 --- /dev/null +++ b/examples/polygon/fill/demo/province.js @@ -0,0 +1,96 @@ + +import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'blank', + center: [ 116.368652, 39.93866 ], + zoom: 10.07 + }) +}); +scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用 + ) + .then(res => res.json()) + .then(data => { + const chinaPolygonLayer = new PolygonLayer({ + autoFit: true + }) + .source(data) + .color( + 'name', + [ + 'rgb(239,243,255)', + 'rgb(189,215,231)', + 'rgb(107,174,214)', + 'rgb(49,130,189)', + 'rgb(8,81,156)' + ] + ) + .shape('fill') + .style({ + opacity: 1 + }); + // 图层边界 + const layer2 = new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('rgb(93,112,146)') + .size(0.6) + .style({ + opacity: 1 + }); + + scene.addLayer(chinaPolygonLayer); + scene.addLayer(layer2); + }); + + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/ba8fa803-a8c3-4c67-b806-fe1c444546bd.json' // 国界线 + ).then(res => res.json()) + .then(data => { + const boundaries = new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('rgb(93,112,146)') + .size(0.6) + .style({ + opacity: 1 + }); + + scene.addLayer(boundaries); + }); + + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json' // 标注数据 + ).then(res => res.json()) + .then(data => { + const labelLayer = new PointLayer({ + zIndex: 5 + }) + .source(data, { + parser: { + type: 'json', + coordinates: 'center' + } + }) + .color('#fff') + .shape('name', 'text') + .size(12) + .style({ + opacity: 1, + stroke: '#fff', + strokeWidth: 0, + padding: [ 5, 5 ], + textAllowOverlap: false + }); + + scene.addLayer(labelLayer); + }); +}); diff --git a/packages/draw/package.json b/packages/draw/package.json index a7f180ca05..e3d236fe29 100644 --- a/packages/draw/package.json +++ b/packages/draw/package.json @@ -43,6 +43,9 @@ "@turf/midpoint": "^5.1.5", "lodash": "^4.6.2" }, + "peerDependencies": { + "@antv/l7": "^2.1.15" + }, "bugs": { "url": "https://github.com/antvis/L7/issues" },