From 745edc5b5deb10eefd76f1f577878786e82010c4 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 23 Mar 2022 16:04:30 +0800 Subject: [PATCH] style: lint style --- docs/api/experiment/simpleCoordinates.zh.md | 7 +- examples/point/text/demo/simpleCoordinate.js | 404 +++++++++---------- stories/simpleMap/components/parkdemo.tsx | 4 +- 3 files changed, 210 insertions(+), 205 deletions(-) diff --git a/docs/api/experiment/simpleCoordinates.zh.md b/docs/api/experiment/simpleCoordinates.zh.md index 74c7dc7991..37742e0526 100644 --- a/docs/api/experiment/simpleCoordinates.zh.md +++ b/docs/api/experiment/simpleCoordinates.zh.md @@ -12,10 +12,11 @@ order: 1 [在线案例](/zh/examples/point/text#simpleCoordinate) ### Map + 为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时制定 map 的 version 属性 ```javascript -import { Scene, ImageLayer, PointLayer, } from '@antv/l7'; +import { Scene, ImageLayer, PointLayer } from '@antv/l7'; import { Map } from '@antv/l7-maps'; const scene = new Scene({ @@ -35,17 +36,21 @@ const scene = new Scene({ ``` #### version + 用户在使用自定义坐标系的时候，需要将地图的类型设置成 'SIMPLE' #### mapSize: number + 用户在使用自定义坐标系的时候，可以设置绘图区域的大小。绘图区域默认是 10000 X 10000 的矩形区域，坐标起点是左下角，水平向右为 X 正方向，垂直向上是 Y 正方向。 案例 #### pitchEnabled/rotateEnabled + 用户在使用自定义坐标系的时候，推荐将 pitchEnabled/rotateEnabled 设置为 false #### layer + 用户在使用自定义坐标系的时候，可以正常使用普通的图层，唯一的区别就是需要将原本的经纬度坐标转化为平面坐标 ```javascript diff --git a/examples/point/text/demo/simpleCoordinate.js b/examples/point/text/demo/simpleCoordinate.js index 3b8645808f..6f100f1834 100644 --- a/examples/point/text/demo/simpleCoordinate.js +++ b/examples/point/text/demo/simpleCoordinate.js @@ -1,10 +1,10 @@ -import { Scene, ImageLayer, PointLayer, } from '@antv/l7'; +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], + center: [ 500, 500 ], pitch: 0, zoom: 3, version: 'SIMPLE', @@ -12,215 +12,215 @@ const scene = new Scene({ maxZoom: 5, minZoom: 2, pitchEnabled: false, - rotateEnabled: false, - }), + rotateEnabled: false + }) }); scene.setBgColor('rgb(94, 182, 140)'); const textlayer = new PointLayer({ zIndex: 2 }) -.source( - [ + .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: '别墅' + } + ], { - 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' + } } - ], - { - 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, -}); + ) + .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], - }, -}, + '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/stories/simpleMap/components/parkdemo.tsx b/stories/simpleMap/components/parkdemo.tsx index bd82c71c1a..69b2c1e5e9 100644 --- a/stories/simpleMap/components/parkdemo.tsx +++ b/stories/simpleMap/components/parkdemo.tsx @@ -193,7 +193,7 @@ export default class Demo extends React.Component { x: 393.5, y: 456, t: '别墅', - } + }, ], { parser: { @@ -207,7 +207,7 @@ export default class Demo extends React.Component { .size(12) .active({ color: '#00f', - mix: 0.9 + mix: 0.9, }) // .color('#0e0030') .color('rgb(86, 156, 214)')