From afe66743c8dc45ad03eb684981e715dbd812810c Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 23 Mar 2022 16:03:18 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E5=85=B3=E4=BA=8E=E7=AE=80=E5=8D=95=E5=9D=90=E6=A0=87=E7=B3=BB?= =?UTF-8?q?/=E9=9D=9E=E5=9C=B0=E7=90=86=E5=9D=90=E6=A0=87=E7=B3=BB?= =?UTF-8?q?=E7=9A=84=E6=96=87=E6=A1=A3=E5=92=8C=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/experiment/simpleCoordinates.en.md | 6 + docs/api/experiment/simpleCoordinates.zh.md | 178 +++++++++++++++ examples/point/text/demo/meta.json | 5 + examples/point/text/demo/simpleCoordinate.js | 226 +++++++++++++++++++ gatsby-config.js | 8 + stories/simpleMap/components/parkdemo.tsx | 187 +++++++++++++-- 6 files changed, 589 insertions(+), 21 deletions(-) create mode 100644 docs/api/experiment/simpleCoordinates.en.md create mode 100644 docs/api/experiment/simpleCoordinates.zh.md create mode 100644 examples/point/text/demo/simpleCoordinate.js diff --git a/docs/api/experiment/simpleCoordinates.en.md b/docs/api/experiment/simpleCoordinates.en.md new file mode 100644 index 0000000000..f7ac144b98 --- /dev/null +++ b/docs/api/experiment/simpleCoordinates.en.md @@ -0,0 +1,6 @@ +--- +title: SimpleCoordinates +order: 1 +--- + +`markdown:docs/api/experiment/simpleCoordinates.zh.md` diff --git a/docs/api/experiment/simpleCoordinates.zh.md b/docs/api/experiment/simpleCoordinates.zh.md new file mode 100644 index 0000000000..74c7dc7991 --- /dev/null +++ b/docs/api/experiment/simpleCoordinates.zh.md @@ -0,0 +1,178 @@ +--- +title: 简单坐标系（非地理坐标系） +order: 1 +--- + +`markdown:docs/common/style.md` + +我们通常使用经纬度来描述地理位置，但是在某些特殊的场景，我们往往倾向于使用更加简单的平面坐标系(xyz)来描述位置的相对坐标，为此 L7 提供了简单坐标系的模式。 + +案例 + +[在线案例](/zh/examples/point/text#simpleCoordinate) + +### Map +为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时制定 map 的 version 属性 + +```javascript +import { Scene, ImageLayer, PointLayer, } from '@antv/l7'; +import { Map } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Map({ + center: [500, 500], + pitch: 0, + zoom: 3, + version: 'SIMPLE', + mapSize: 1000, + maxZoom: 5, + minZoom: 2, + pitchEnabled: false, + rotateEnabled: false, + }), +}); +``` + +#### version +用户在使用自定义坐标系的时候，需要将地图的类型设置成 'SIMPLE' + +#### mapSize: number +用户在使用自定义坐标系的时候，可以设置绘图区域的大小。绘图区域默认是 10000 X 10000 的矩形区域，坐标起点是左下角，水平向右为 X 正方向，垂直向上是 Y 正方向。 + +案例 + +#### pitchEnabled/rotateEnabled +用户在使用自定义坐标系的时候，推荐将 pitchEnabled/rotateEnabled 设置为 false + +#### layer +用户在使用自定义坐标系的时候，可以正常使用普通的图层，唯一的区别就是需要将原本的经纬度坐标转化为平面坐标 + +```javascript +const imagelayer = new ImageLayer({}).source( + 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ', + { + parser: { + type: 'image', + extent: [360, 400, 640, 600], + }, + }, +); + +const textlayer = new PointLayer({ zIndex: 2 }) +.source( + [ + { + x: 515, + y: 575, + t: '小屋', + }, + ... + ], + { + parser: { + type: 'json', + x: 'x', + y: 'y', + }, + }, +) +.shape('t', 'text') +.size(12) +.active({ + color: '#00f', + mix: 0.9 +}) +.color('rgb(86, 156, 214)') +.style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + spacing: 2, // 字符间距 + fontWeight: '800', + padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 2, // 描边宽度 + textAllowOverlap: true, +}); + +const lineData = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + testOpacity: 0.8, + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [6000, 6000], + [6000, 7000], + [7000, 7000], + [7000, 6000], + ], + ], + }, + }, + ], + }; + + const linelayer = new LineLayer() + .source(lineData) + .shape('line') + .size(10) + .color('#0f0') + .active(true); + + +const polygonData = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + testOpacity: 0.4, + }, + geometry: { + type: 'MultiPolygon', + coordinates: [ + [ + [ + [6000, 6000], + [6000, 7000], + [7000, 7000], + [7000, 6000], + [6000, 6000], + ], + [ + [6300, 6300], + [6300, 6700], + [6700, 6700], + [6700, 6300], + [6300, 6300], + ], + ], + [ + [ + [5000, 5000], + [5000, 6000], + [6000, 6000], + [6000, 5000], + [5000, 5000], + ], + ], + ], + }, + }, + ], + }; + + const polygonLayer = new PolygonLayer() + .source(polygonData) + .shape('fill') + .color('#f00') + .style({ + opacity: 0.6, + }) + .active(true); +``` diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index 389564ce6e..f7f87f79d6 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -38,6 +38,11 @@ "filename": "updown.js", "title": "走势图标标注", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LJXlRraIokAAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "simpleCoordinate.js", + "title": "平面区域标注", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OXlZRKw7AoUAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/point/text/demo/simpleCoordinate.js b/examples/point/text/demo/simpleCoordinate.js new file mode 100644 index 0000000000..3b8645808f --- /dev/null +++ b/examples/point/text/demo/simpleCoordinate.js @@ -0,0 +1,226 @@ +import { Scene, ImageLayer, PointLayer, } from '@antv/l7'; +import { Map } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Map({ + center: [500, 500], + pitch: 0, + zoom: 3, + version: 'SIMPLE', + mapSize: 1000, + maxZoom: 5, + minZoom: 2, + pitchEnabled: false, + rotateEnabled: false, + }), +}); +scene.setBgColor('rgb(94, 182, 140)'); +const textlayer = new PointLayer({ zIndex: 2 }) +.source( + [ + { + x: 515, + y: 575, + t: '小屋', + }, + { + x: 507, + y: 560, + t: '小屋', + }, + { + x: 495, + y: 553, + t: '别墅', + }, + { + x: 499, + y: 547, + t: '住宅', + }, + { + x: 480, + y: 544, + t: '住宅', + }, + { + x: 471, + y: 539, + t: '住宅', + }, + { + x: 485, + y: 527, + t: '住宅', + }, + { + x: 463, + y: 533, + t: '住宅', + }, + { + x: 477, + y: 523, + t: '住宅', + }, + { + x: 473, + y: 517, + t: '住宅', + }, + { + x: 535, + y: 535, + t: '住宅小区', + }, + { + x: 550, + y: 545, + t: '住宅小区', + }, + { + x: 578, + y: 559, + t: '别墅', + }, + { + x: 583, + y: 554, + t: '别墅', + }, + { + x: 590, + y: 538, + t: '别墅', + }, + { + x: 599, + y: 537, + t: '住宅', + }, + { + x: 567, + y: 526, + t: '住宅', + }, + { + x: 564, + y: 519, + t: '住宅', + }, + { + x: 553.5, + y: 483, + t: '住宅', + }, + { + x: 554, + y: 479, + t: '住宅', + }, + { + x: 547, + y: 478.5, + t: '住宅', + }, + { + x: 533.5, + y: 475, + t: '住宅', + }, + { + x: 516, + y: 463, + t: '住宅', + }, + { + x: 538, + y: 453, + t: '住宅', + }, + { + x: 510.5, + y: 444, + t: '别墅', + }, + { + x: 488, + y: 440.5, + t: '住宅', + }, + { + x: 476.5, + y: 438.5, + t: '别墅', + }, + { + x: 474.5, + y: 431, + t: '别墅', + }, + { + x: 462, + y: 434.5, + t: '别墅', + }, + { + x: 431, + y: 436, + t: '住宅', + }, + { + x: 428, + y: 430, + t: '住宅', + }, + { + x: 402.5, + y: 448.5, + t: '别墅', + }, + { + x: 393.5, + y: 456, + t: '别墅', + } + ], + { + parser: { + type: 'json', + x: 'x', + y: 'y', + }, + }, +) +.shape('t', 'text') +.size(12) +.active({ + color: '#00f', + mix: 0.9 +}) +.color('rgb(86, 156, 214)') +.style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + spacing: 2, // 字符间距 + fontWeight: '800', + padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 2, // 描边宽度 + textAllowOverlap: true, +}); + +const imagelayer = new ImageLayer({}).source( +'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ', +{ + parser: { + type: 'image', + extent: [360, 400, 640, 600], + }, +}, +); + +scene.on('loaded', () => { + scene.addLayer(imagelayer); + scene.addLayer(textlayer); +}); \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 4aff7e7b7d..e4340e9891 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -270,6 +270,14 @@ module.exports = { }, order: 14, }, + { + slug: 'api/experiment', + title: { + zh: '实验特性', + en: 'experiment', + }, + order: 15, + }, ], examples: [ { diff --git a/stories/simpleMap/components/parkdemo.tsx b/stories/simpleMap/components/parkdemo.tsx index 4381190301..bd82c71c1a 100644 --- a/stories/simpleMap/components/parkdemo.tsx +++ b/stories/simpleMap/components/parkdemo.tsx @@ -15,10 +15,10 @@ export default class Demo extends React.Component { map: new Map({ center: [500, 500], pitch: 0, - zoom: 2.5, + zoom: 3, version: 'SIMPLE', mapSize: 1000, - maxZoom: 4, + maxZoom: 5, minZoom: 2, pitchEnabled: false, rotateEnabled: false, @@ -30,30 +30,170 @@ export default class Demo extends React.Component { .source( [ { - x: 470, - y: 520, - t: '库布齐', + x: 515, + y: 575, + t: '小屋', }, { - x: 490, - y: 580, - t: '阿拉善', + x: 507, + y: 560, + t: '小屋', }, { - x: 530, - y: 530, - t: '鄂尔多斯', + x: 495, + y: 553, + t: '别墅', }, { - x: 545, - y: 480, - t: '武威', + x: 499, + y: 547, + t: '住宅', }, { - x: 490, - y: 470, - t: '黄山洋湖', + x: 480, + y: 544, + t: '住宅', }, + { + x: 471, + y: 539, + t: '住宅', + }, + { + x: 485, + y: 527, + t: '住宅', + }, + { + x: 463, + y: 533, + t: '住宅', + }, + { + x: 477, + y: 523, + t: '住宅', + }, + { + x: 473, + y: 517, + t: '住宅', + }, + { + x: 535, + y: 535, + t: '住宅小区', + }, + { + x: 550, + y: 545, + t: '住宅小区', + }, + { + x: 578, + y: 559, + t: '别墅', + }, + { + x: 583, + y: 554, + t: '别墅', + }, + { + x: 590, + y: 538, + t: '别墅', + }, + { + x: 599, + y: 537, + t: '住宅', + }, + { + x: 567, + y: 526, + t: '住宅', + }, + { + x: 564, + y: 519, + t: '住宅', + }, + { + x: 553.5, + y: 483, + t: '住宅', + }, + { + x: 554, + y: 479, + t: '住宅', + }, + { + x: 547, + y: 478.5, + t: '住宅', + }, + { + x: 533.5, + y: 475, + t: '住宅', + }, + { + x: 516, + y: 463, + t: '住宅', + }, + { + x: 538, + y: 453, + t: '住宅', + }, + { + x: 510.5, + y: 444, + t: '别墅', + }, + { + x: 488, + y: 440.5, + t: '住宅', + }, + { + x: 476.5, + y: 438.5, + t: '别墅', + }, + { + x: 474.5, + y: 431, + t: '别墅', + }, + { + x: 462, + y: 434.5, + t: '别墅', + }, + { + x: 431, + y: 436, + t: '住宅', + }, + { + x: 428, + y: 430, + t: '住宅', + }, + { + x: 402.5, + y: 448.5, + t: '别墅', + }, + { + x: 393.5, + y: 456, + t: '别墅', + } ], { parser: { @@ -64,15 +204,20 @@ export default class Demo extends React.Component { }, ) .shape('t', 'text') - .size(14) - .active(true) - .color('#0e0030') + .size(12) + .active({ + color: '#00f', + mix: 0.9 + }) + // .color('#0e0030') + .color('rgb(86, 156, 214)') .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left spacing: 2, // 字符间距 + fontWeight: '800', padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#ffffff', // 描边颜色 - strokeWidth: 1.5, // 描边宽度 + strokeWidth: 2, // 描边宽度 textAllowOverlap: true, });