From 68f2123d51088c4d052d8a509fb6b2af28ddbf08 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Mon, 31 May 2021 10:34:15 +0800 Subject: [PATCH 1/5] feat: l7 2.4 demo --- .../animate/demo/animate_path_texture.js | 6 +- examples/gallery/animate/demo/meta.json | 2 +- examples/point/text/demo/iconfont.js | 51 ++------ examples/point/text/demo/iconfonts.js | 40 ++++++- examples/point/text/demo/meta.json | 19 +-- examples/point/text/demo/temperture.js | 2 +- examples/point/text/demo/updown.js | 83 +++++++++++++ .../src/line/shaders/line_arc_frag.glsl | 11 ++ .../src/line/shaders/line_arc_vert.glsl | 31 +++++ .../Map/components/amap2demo_arcLineTex.tsx | 96 +++++++++++++++ stories/Map/components/amap2demo_mesh.tsx | 2 +- stories/Map/components/amap2demo_mesh2.tsx | 113 ++++++++++++++++++ stories/Map/components/amap2demo_road2.tsx | 75 ++++++++++++ stories/Map/map.stories.tsx | 6 + 14 files changed, 481 insertions(+), 56 deletions(-) create mode 100644 examples/point/text/demo/updown.js create mode 100644 stories/Map/components/amap2demo_arcLineTex.tsx create mode 100644 stories/Map/components/amap2demo_mesh2.tsx create mode 100644 stories/Map/components/amap2demo_road2.tsx diff --git a/examples/gallery/animate/demo/animate_path_texture.js b/examples/gallery/animate/demo/animate_path_texture.js index 199cbe9b08..a9571fae09 100644 --- a/examples/gallery/animate/demo/animate_path_texture.js +++ b/examples/gallery/animate/demo/animate_path_texture.js @@ -5,9 +5,9 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [ 120.19382669582967, 30.258134 ], - pitch: 0, - zoom: 16, - style: 'dark' + pitch: 20, + zoom: 18, + style: 'light' }) }); scene.on('loaded', () => { diff --git a/examples/gallery/animate/demo/meta.json b/examples/gallery/animate/demo/meta.json index c17d654ee2..314402cd46 100644 --- a/examples/gallery/animate/demo/meta.json +++ b/examples/gallery/animate/demo/meta.json @@ -7,7 +7,7 @@ { "filename": "animate_path_texture.js", "title": "路径贴图", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*TLt7RI9bAWMAAAAAAAAAAAAAARQnAQ" + "screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*0UrUTakTFQsAAAAAAAAAAAAAARQnAQ" }, { "filename": "animate_path.js", diff --git a/examples/point/text/demo/iconfont.js b/examples/point/text/demo/iconfont.js index 185df6aee5..1cd6e3787d 100644 --- a/examples/point/text/demo/iconfont.js +++ b/examples/point/text/demo/iconfont.js @@ -4,48 +4,18 @@ import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [ 110, 36 ], + center: [ 115, 30 ], pitch: 0, style: 'light', - zoom: 3 + zoom: 6 }) }); const fontFamily = 'iconfont'; -const fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496'; +const fontPath = '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140'; scene.addFontFace(fontFamily, fontPath); -scene.addIconFont('icon1', ''); +scene.addIconFont('icon1', ''); scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { - const pointLayer = new PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('m', 'text') - .size(12) - // .rotate("j",()=>{ - // return Math.random()*3*(Math.random()>0.5?1:-1) - // }) - .color('w', [ '#0e0030', '#0e0030', '#0e0030' ]) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0 - }); - - scene.addLayer(pointLayer); - }); - fetch( 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json' ) @@ -60,17 +30,16 @@ scene.on('loaded', () => { } }) .shape('icon', 'text') - .size(12) - .color('w', [ '#f00', '#f00', '#0f0' ]) + .size(20) + .color('w', ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac']) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ -10, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] + padding: [ 0, 0 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#ffffff', // 描边颜色 fontFamily, - iconfont: true - // textAllowOverlap: true, + iconfont: true, + textAllowOverlap: true, }); scene.addLayer(pointLayer); }); diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index 3c0a772789..04b45c95f9 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -6,13 +6,49 @@ const scene = new Scene({ map: new GaodeMap({ center: [ 120.5, 30.2 ], pitch: 0, - style: 'light', + style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9', zoom: 8.5, zooms: [ 8, 10 ], viewMode: '2D' }) }); const originData = [ + { + lng: 121.7, + lat: 30.6, + iconType: 'hugeRain', + iconColor: '#4678D2', + backgoundColor: '#285A8C', + temperature: '20℃', + weather: '大雨' + }, + { + lng: 119.2, + lat: 30., + iconType: 'smallRain', + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', + temperature: '22℃', + weather: '小雨' + }, + { + lng: 119.67, + lat: 30.2, + iconType: 'sun', + iconColor: '#FFA500', + backgoundColor: '#00BFFF', + temperature: '28℃', + weather: '晴朗' + }, + { + lng: 119.63, + lat: 30.6, + iconType: 'sun', + iconColor: '#FFA500', + backgoundColor: '#00BFFF', + temperature: '28℃', + weather: '晴朗' + }, { lng: 120, lat: 30, @@ -145,7 +181,7 @@ scene.on('loaded', () => { }) .shape('circle') .color('backgoundColor') - .size(40); + .size(42); scene.addLayer(layer); diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index 981ce924ef..4a8437389d 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -11,10 +11,15 @@ }, { "filename": "iconfont.js", - "title": "文字图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*96iHTKybWYcAAAAAAAAAAAAAARQnAQ" + "title": "图标标注", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*jnPwQZsY-bEAAAAAAAAAAAAAARQnAQ" }, - { + { + "filename": "polygon_text.js", + "title": "面数据标注", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ" + }, + { "filename": "iconfonts.js", "title": "天气图标标注", "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*AouOQ4VYTJMAAAAAAAAAAAAAARQnAQ" @@ -22,12 +27,12 @@ { "filename": "temperture.js", "title": "气温图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*VFmxTqQc7v4AAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*spetRL1JnfsAAAAAAAAAAAAAARQnAQ" }, { - "filename": "polygon_text.js", - "title": "面数据标注", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ" + "filename": "updown.js", + "title": "走势图标标注", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*5E4DR4H8qDQAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/point/text/demo/temperture.js b/examples/point/text/demo/temperture.js index d9ee085cf6..d7c6726efd 100644 --- a/examples/point/text/demo/temperture.js +++ b/examples/point/text/demo/temperture.js @@ -45,7 +45,7 @@ scene.on('loaded', () => { .shape('fill') .color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) .style({ - opacity: 0.8 + opacity: 0.5 }); scene.addLayer(filllayer); diff --git a/examples/point/text/demo/updown.js b/examples/point/text/demo/updown.js new file mode 100644 index 0000000000..ffbc1ad15e --- /dev/null +++ b/examples/point/text/demo/updown.js @@ -0,0 +1,83 @@ +import { Scene, PointLayer, PolygonLayer, LineLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + style: 'dark', + pitch: 40, + center: [ 118.8, 32.056 ], + zoom: 12.5 + }) +}); +let fontFamily = 'iconfont'; +let fontPath = + '//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063'; +scene.addIconFont('up', ''); +scene.addIconFont('down', ''); +scene.addFontFace(fontFamily, fontPath); + + +scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json', + ) + .then((res) => res.json()) + .then((data) => { + const filllayer = new PolygonLayer({ + name: 'fill', + zIndex: 3, + }) + .source(data) + .shape('fill') + .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)']) + .style({ + opacity: 0.5, + }); + scene.addLayer(filllayer); + + const linelayer = new LineLayer({ + zIndex: 5, + name: 'line2', + }) + .source(data) + .shape('line') + .size(1) + .color('#fff') + .style({ + opacity: 0.3, + }); + scene.addLayer(linelayer); + + const pointLayer = new PointLayer({ + zIndex: 10, + }) + .source(data) + .shape('icon', 'text') + .size(15) + .color('count', n => n>0?'#0f0':"#f00") + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [30, 5], + padding: [2, 2], + fontFamily, + iconfont: true, + // textAllowOverlap: true + }); + scene.addLayer(pointLayer); + + const textLayer = new PointLayer({ + zIndex: 10, + }) + .source(data) + .shape('count', 'text') + .size(12) + .color('count', n => n>0?'#0f0':"#f00") + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [40, 10], + padding: [1, 1], + }); + scene.addLayer(textLayer); + }); +}); diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl index 6cbeda27a8..6751c2e880 100644 --- a/packages/layers/src/line/shaders/line_arc_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_frag.glsl @@ -35,5 +35,16 @@ void main() { alpha = smoothstep(0., 1., alpha); gl_FragColor.a *= alpha; } + + // if(u_line_texture == LineTexture) { // while load texture + // //v_u; // 水平 + // float v = length(v_offset)/(v_a); // 横向 + // vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.; + // // gl_FragColor = vec4(v_u, v, 0.0, 1.0); + // // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u); + // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv)); + // } else { + // gl_FragColor = filterColor(gl_FragColor); + // } gl_FragColor = filterColor(gl_FragColor); } diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index 2b6f8a4308..bce49316d1 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -1,6 +1,7 @@ #define LineTypeSolid 0.0 #define LineTypeDash 1.0 #define Animate 0.0 +// #define LineTexture 1.0 attribute vec4 a_Color; attribute vec3 a_Position; attribute vec4 a_Instance; @@ -17,6 +18,15 @@ uniform float u_line_type: 0.0; uniform vec4 u_dash_array: [10.0, 5., 0, 0]; uniform float u_lineDir: 1.0; varying vec4 v_dash_array; + +// uniform float u_icon_step: 100; +// uniform float u_line_texture; +// varying float v_u; +// varying vec2 v_offset; +// varying float v_a; +// attribute vec2 a_iconMapUV; +// varying vec2 v_iconMapUV; + #pragma include "projection" #pragma include "project" #pragma include "picking" @@ -70,10 +80,12 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) { void main() { v_color = a_Color; + vec2 source = a_Instance.rg; vec2 target = a_Instance.ba; float segmentIndex = a_Position.x; float segmentRatio = getSegmentRatio(segmentIndex); + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); if(u_line_type == LineTypeDash) { @@ -93,6 +105,25 @@ void main() { vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); + // if(LineTexture == u_line_texture) { // 开启贴图模式 + // v_iconMapUV = a_iconMapUV; + + // float arctotal_Distance = length(source - target); + // float pixelLen = project_pixel(u_icon_step); + // v_u = fract(segmentRatio * (floor(arctotal_Distance/pixelLen))); + // // v_u = fract(segmentIndex/(segmentNumber) * (2.0)); + // // v_u = fract(segmentIndex/(segmentNumber - 1.0) * 1.0 + 0.3); + // // v_u = fract(mod(1.0- v_distance_ratio, 0.2)* (1.0/ 0.5)); + // // v_u = fract(clamp(v_u, 0.0, 1.0)*2.0); + // // v_u = fract(((segmentIndex * indexDir) / (segmentNumber - 1.)) * (floor(arctotal_Distance/pixelLen))); + // // float s = 6.0; + // // float l = segmentNumber/s; + // // v_u = mod(segmentIndex, l) / (segmentNumber/s); + // v_a = project_pixel(a_Size); + // v_offset = offset + offset * sign(a_Position.y); + // } + + // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); diff --git a/stories/Map/components/amap2demo_arcLineTex.tsx b/stories/Map/components/amap2demo_arcLineTex.tsx new file mode 100644 index 0000000000..81bdb7e8bc --- /dev/null +++ b/stories/Map/components/amap2demo_arcLineTex.tsx @@ -0,0 +1,96 @@ +// @ts-ignore +import { LineLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class Amap2demo_arcLineTex extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 40, + center: [107.77791556935472, 35.443286920228644], + zoom: 2.9142882493605033, + viewMode: '3D', + }), + }); + this.scene = scene; + + scene.on('loaded', () => { + scene.addImage( + '02', + 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', + ); + + let data = [ + // { + // lng1: 91.111891, + // lat1: 40.662557, + // lng2: 120.342625, + // lat2: 37.373799, + // }, + // { + // lng1: 116.98242187499999, + // lat1: 43.004647127794435, + // lng2: 105.64453124999999, + // lat2: 28.998531814051795, + // }, + { + lng1: 75.76171875, + lat1: 36.31512514748051, + lng2: 46.23046874999999, + lat2: 52.802761415419674, + }, + ]; + + const layer = new LineLayer({ + blend: 'normal', + }) + .source(data, { + parser: { + type: 'json', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2', + }, + }) + .size(10) + .shape('arc') + // .texture('02') + .color('#8C1EB2') + .style({ + forward: false, + // lineTexture: true, // 开启线的贴图功能 + // iconStep: 100, // 设置贴图纹理的间距 + }) + .animate(true) + scene.addLayer(layer); + + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/components/amap2demo_mesh.tsx b/stories/Map/components/amap2demo_mesh.tsx index 5b8674d242..a3a939e9a6 100644 --- a/stories/Map/components/amap2demo_mesh.tsx +++ b/stories/Map/components/amap2demo_mesh.tsx @@ -73,7 +73,7 @@ export default class Amap2demo_mesh extends React.Component { // '#FF0000' // ]) .style({ - opacity: 0.8, + opacity: 0.5, }); scene.addLayer(filllayer); diff --git a/stories/Map/components/amap2demo_mesh2.tsx b/stories/Map/components/amap2demo_mesh2.tsx new file mode 100644 index 0000000000..3fc7b08659 --- /dev/null +++ b/stories/Map/components/amap2demo_mesh2.tsx @@ -0,0 +1,113 @@ +//@ts-ignore +import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; +export default class Amap2demo_mesh2 extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + style: 'dark', + pitch: 40, + center: [118.8, 32.056], + zoom: 12.5, + }), + }); + + this.scene = scene; + let fontFamily = 'iconfont'; + let fontPath = + '//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063'; + scene.addIconFont('up', ''); + scene.addIconFont('down', ''); + scene.addFontFace(fontFamily, fontPath); + + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json', + ) + .then((res) => res.json()) + .then((data) => { + const filllayer = new PolygonLayer({ + name: 'fill', + zIndex: 3, + }) + .source(data) + .shape('fill') + .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)']) + .style({ + opacity: 0.5, + }); + scene.addLayer(filllayer); + + const linelayer = new LineLayer({ + zIndex: 5, + name: 'line2', + }) + .source(data) + .shape('line') + .size(1) + .color('#fff') + .style({ + opacity: 0.3, + }); + scene.addLayer(linelayer); + + const pointLayer = new PointLayer({ + zIndex: 10, + }) + .source(data) + .shape('icon', 'text') + .size(15) + .color('count', n => n>0?'#0f0':"#f00") + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [30, 5], + padding: [2, 2], + fontFamily, + iconfont: true, + // textAllowOverlap: true + }); + scene.addLayer(pointLayer); + + const textLayer = new PointLayer({ + zIndex: 10, + }) + .source(data) + .shape('count', 'text') + .size(12) + .color('count', n => n>0?'#0f0':"#f00") + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [40, 10], + padding: [1, 1], + }); + scene.addLayer(textLayer); + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/components/amap2demo_road2.tsx b/stories/Map/components/amap2demo_road2.tsx new file mode 100644 index 0000000000..30c7a2ee88 --- /dev/null +++ b/stories/Map/components/amap2demo_road2.tsx @@ -0,0 +1,75 @@ +// @ts-ignore +import { LineLayer, Scene, PointLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class Amap2demo_road2 extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [120.165, 30.25], + pitch: 50, + zoom: 16.8, + viewMode: '3D', + }), + }); + this.scene = scene; + + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', + ) + .then((res) => res.json()) + .then((data) => { + scene.addImage( + '02', + 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', + ); + + const layer = new LineLayer({}) + .source(data) + .size(5) + .shape('line') + .texture('02') + // .color('#ccc') + .color('rgb(20, 180, 90)') + // .animate({ + // interval: 1, // 间隔 + // duration: 1, // 持续时间，延时 + // trailLength: 2, // 流线长度 + // }) + .style({ + // opacity: 0.5, + lineTexture: true, // 开启线的贴图功能 + iconStep: 80, // 设置贴图纹理的间距 + }); + scene.addLayer(layer); + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index df8bbb326b..22f5347bf0 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -19,8 +19,10 @@ import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatC import Amap2demo_lineHeight from "./components/amap2demo_lineHeight" import Amap2demo_lineDash from "./components/amap2demo_lineDash" import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir" +import Amap2demo_arcLineTex from './components/amap2demo_arcLineTex'; import Amap2demo_lineStreet from './components/amap2demo_lineStreet'; import Amap2demo_road from './components/amap2demo_road'; +import Amap2demo_road2 from './components/amap2demo_road2'; import Amap2demo_heatmap from "./components/amap2demo_heatmap" import Amap2demo_heatmap3D from "./components/amap2demo_heatmap3D" @@ -43,6 +45,7 @@ import Amap2demo_instance from "./components/amap2demo_instance" import Amap2demo_drawControl from "./components/amap2demo_drawControl" import Amap2demo_mesh from "./components/amap2demo_mesh" +import Amap2demo_mesh2 from "./components/amap2demo_mesh2" // @ts-ignore storiesOf('地图方法', module) @@ -63,9 +66,11 @@ storiesOf('地图方法', module) .add('高德地图2.0 lineHeight', () => ) .add('高德地图2.0 lineDash', () => ) .add('高德地图2.0 line_arcDir', () => ) + .add('高德地图2.0 line_arcTex', () => ) .add('高德地图2.0 line_winds', () => ) .add('高德地图2.0 line_Street', () => ) .add('高德地图2.0 road', () => ) + .add('高德地图2.0 road2', () => ) .add('高德地图2.0 heatmap', () => ) .add('高德地图2.0 heatmap3D', () => ) @@ -85,3 +90,4 @@ storiesOf('地图方法', module) .add('高德地图2.0 drawControl实例', () => ) .add('高德地图2.0 mesh实例', () => ) + .add('高德地图2.0 mesh实例2', () => ) From 6f06a381ec0575a726fe3ab48f3c2d0eeda453e2 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Mon, 31 May 2021 10:37:14 +0800 Subject: [PATCH 2/5] style: code style change --- examples/point/text/demo/iconfont.js | 4 +- examples/point/text/demo/iconfonts.js | 2 +- examples/point/text/demo/updown.js | 38 +++++++++---------- .../Map/components/amap2demo_arcLineTex.tsx | 3 +- stories/Map/components/amap2demo_mesh2.tsx | 4 +- 5 files changed, 25 insertions(+), 26 deletions(-) diff --git a/examples/point/text/demo/iconfont.js b/examples/point/text/demo/iconfont.js index 1cd6e3787d..7e902a132f 100644 --- a/examples/point/text/demo/iconfont.js +++ b/examples/point/text/demo/iconfont.js @@ -31,7 +31,7 @@ scene.on('loaded', () => { }) .shape('icon', 'text') .size(20) - .color('w', ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac']) + .color('w', [ '#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac' ]) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] @@ -39,7 +39,7 @@ scene.on('loaded', () => { stroke: '#ffffff', // 描边颜色 fontFamily, iconfont: true, - textAllowOverlap: true, + textAllowOverlap: true }); scene.addLayer(pointLayer); }); diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index 04b45c95f9..495d21c802 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -24,7 +24,7 @@ const originData = [ }, { lng: 119.2, - lat: 30., + lat: 30.0, iconType: 'smallRain', iconColor: '#6EA0FF', backgoundColor: '#4678AA', diff --git a/examples/point/text/demo/updown.js b/examples/point/text/demo/updown.js index ffbc1ad15e..876b8cf0b7 100644 --- a/examples/point/text/demo/updown.js +++ b/examples/point/text/demo/updown.js @@ -10,8 +10,8 @@ const scene = new Scene({ zoom: 12.5 }) }); -let fontFamily = 'iconfont'; -let fontPath = +const fontFamily = 'iconfont'; +const fontPath = '//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063'; scene.addIconFont('up', ''); scene.addIconFont('down', ''); @@ -20,63 +20,63 @@ scene.addFontFace(fontFamily, fontPath); scene.on('loaded', () => { fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json', + 'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json' ) - .then((res) => res.json()) - .then((data) => { + .then(res => res.json()) + .then(data => { const filllayer = new PolygonLayer({ name: 'fill', - zIndex: 3, + zIndex: 3 }) .source(data) .shape('fill') - .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)']) + .color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) .style({ - opacity: 0.5, + opacity: 0.5 }); scene.addLayer(filllayer); const linelayer = new LineLayer({ zIndex: 5, - name: 'line2', + name: 'line2' }) .source(data) .shape('line') .size(1) .color('#fff') .style({ - opacity: 0.3, + opacity: 0.3 }); scene.addLayer(linelayer); const pointLayer = new PointLayer({ - zIndex: 10, + zIndex: 10 }) .source(data) .shape('icon', 'text') .size(15) - .color('count', n => n>0?'#0f0':"#f00") + .color('count', n => (n > 0 ? '#0f0' : '#f00')) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [30, 5], - padding: [2, 2], + textOffset: [ 30, 5 ], + padding: [ 2, 2 ], fontFamily, - iconfont: true, + iconfont: true // textAllowOverlap: true }); scene.addLayer(pointLayer); const textLayer = new PointLayer({ - zIndex: 10, + zIndex: 10 }) .source(data) .shape('count', 'text') .size(12) - .color('count', n => n>0?'#0f0':"#f00") + .color('count', n => (n > 0 ? '#0f0' : '#f00')) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [40, 10], - padding: [1, 1], + textOffset: [ 40, 10 ], + padding: [ 1, 1 ] }); scene.addLayer(textLayer); }); diff --git a/stories/Map/components/amap2demo_arcLineTex.tsx b/stories/Map/components/amap2demo_arcLineTex.tsx index 81bdb7e8bc..0b90ccbd8f 100644 --- a/stories/Map/components/amap2demo_arcLineTex.tsx +++ b/stories/Map/components/amap2demo_arcLineTex.tsx @@ -71,9 +71,8 @@ export default class Amap2demo_arcLineTex extends React.Component { // lineTexture: true, // 开启线的贴图功能 // iconStep: 100, // 设置贴图纹理的间距 }) - .animate(true) + .animate(true); scene.addLayer(layer); - }); } diff --git a/stories/Map/components/amap2demo_mesh2.tsx b/stories/Map/components/amap2demo_mesh2.tsx index 3fc7b08659..b1818a97e2 100644 --- a/stories/Map/components/amap2demo_mesh2.tsx +++ b/stories/Map/components/amap2demo_mesh2.tsx @@ -66,7 +66,7 @@ export default class Amap2demo_mesh2 extends React.Component { .source(data) .shape('icon', 'text') .size(15) - .color('count', n => n>0?'#0f0':"#f00") + .color('count', (n) => (n > 0 ? '#0f0' : '#f00')) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [30, 5], @@ -83,7 +83,7 @@ export default class Amap2demo_mesh2 extends React.Component { .source(data) .shape('count', 'text') .size(12) - .color('count', n => n>0?'#0f0':"#f00") + .color('count', (n) => (n > 0 ? '#0f0' : '#f00')) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [40, 10], From 9dd399351995f3535466982f7b39bf520275685c Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Mon, 31 May 2021 20:04:34 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=A1=88=E4=BE=8Bdemo=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/point/text/demo/iconfont.js | 9 ++--- examples/point/text/demo/iconfonts.js | 39 +++++++++++++--------- examples/point/text/demo/meta.json | 16 ++++----- examples/point/text/demo/temperture.js | 4 +-- examples/point/text/demo/updown.js | 4 +-- stories/3D_Model/Components/amap_three.tsx | 5 +-- stories/3D_Model/model.stories.tsx | 2 +- stories/Map/components/mapCenter.tsx | 4 +-- 8 files changed, 46 insertions(+), 37 deletions(-) diff --git a/examples/point/text/demo/iconfont.js b/examples/point/text/demo/iconfont.js index 7e902a132f..ace6447a89 100644 --- a/examples/point/text/demo/iconfont.js +++ b/examples/point/text/demo/iconfont.js @@ -4,10 +4,11 @@ import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [ 115, 30 ], + center: [ 110, 30 ], pitch: 0, - style: 'light', - zoom: 6 + // style: 'light', + style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9', + zoom: 5 }) }); const fontFamily = 'iconfont'; @@ -31,7 +32,7 @@ scene.on('loaded', () => { }) .shape('icon', 'text') .size(20) - .color('w', [ '#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac' ]) + .color('w', ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99']) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index 495d21c802..6a68dacc95 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -12,13 +12,20 @@ const scene = new Scene({ viewMode: '2D' }) }); +const dataColor = { + bigRainBC: "#285A8C", + middleRainBC: "#326EA0", + smallRainBC: "#4678AA", + sunBC: "#00BFFF", + cloudBC: "#1E90FF" +} const originData = [ { lng: 121.7, lat: 30.6, iconType: 'hugeRain', iconColor: '#4678D2', - backgoundColor: '#285A8C', + backgoundColor: dataColor.bigRainBC, temperature: '20℃', weather: '大雨' }, @@ -27,7 +34,7 @@ const originData = [ lat: 30.0, iconType: 'smallRain', iconColor: '#6EA0FF', - backgoundColor: '#4678AA', + backgoundColor: dataColor.smallRainBC, temperature: '22℃', weather: '小雨' }, @@ -36,7 +43,7 @@ const originData = [ lat: 30.2, iconType: 'sun', iconColor: '#FFA500', - backgoundColor: '#00BFFF', + backgoundColor: dataColor.sunBC, temperature: '28℃', weather: '晴朗' }, @@ -45,7 +52,7 @@ const originData = [ lat: 30.6, iconType: 'sun', iconColor: '#FFA500', - backgoundColor: '#00BFFF', + backgoundColor: dataColor.sunBC, temperature: '28℃', weather: '晴朗' }, @@ -54,7 +61,7 @@ const originData = [ lat: 30, iconType: 'sun', iconColor: '#FFA500', - backgoundColor: '#00BFFF', + backgoundColor: dataColor.sunBC, temperature: '28℃', weather: '晴朗' }, @@ -63,7 +70,7 @@ const originData = [ lat: 30.5, iconType: 'sun', iconColor: '#FFA500', - backgoundColor: '#00BFFF', + backgoundColor: dataColor.sunBC, temperature: '28℃', weather: '晴朗' }, @@ -72,7 +79,7 @@ const originData = [ lat: 31.4, iconType: 'cloud', iconColor: '#F0F8FF', - backgoundColor: '#1E90FF', + backgoundColor: dataColor.cloudBC, temperature: '22℃', weather: '多云' }, @@ -81,7 +88,7 @@ const originData = [ lat: 31, iconType: 'cloud', iconColor: '#F0F8FF', - backgoundColor: '#1E90FF', + backgoundColor: dataColor.cloudBC, temperature: '22℃', weather: '多云' }, @@ -90,7 +97,7 @@ const originData = [ lat: 30.8, iconType: 'cloud', iconColor: '#F0F8FF', - backgoundColor: '#1E90FF', + backgoundColor: dataColor.cloudBC, temperature: '22℃', weather: '多云' }, @@ -99,7 +106,7 @@ const originData = [ lat: 31.3, iconType: 'cloud', iconColor: '#F0F8FF', - backgoundColor: '#1E90FF', + backgoundColor: dataColor.cloudBC, temperature: '22℃', weather: '多云' }, @@ -108,7 +115,7 @@ const originData = [ lat: 30.2, iconType: 'smallRain', iconColor: '#6EA0FF', - backgoundColor: '#4678AA', + backgoundColor: dataColor.smallRainBC, temperature: '22℃', weather: '小雨' }, @@ -117,7 +124,7 @@ const originData = [ lat: 30.5, iconType: 'smallRain', iconColor: '#6EA0FF', - backgoundColor: '#4678AA', + backgoundColor: dataColor.smallRainBC, temperature: '22℃', weather: '小雨' }, @@ -126,7 +133,7 @@ const originData = [ lat: 30, iconType: 'middleRain', iconColor: '#6495ED', - backgoundColor: '#326EA0', + backgoundColor: dataColor.middleRainBC, temperature: '24℃', weather: '中雨' }, @@ -135,7 +142,7 @@ const originData = [ lat: 29.7, iconType: 'smallRain', iconColor: '#6EA0FF', - backgoundColor: '#4678AA', + backgoundColor: dataColor.smallRainBC, temperature: '22℃', weather: '小雨' }, @@ -144,7 +151,7 @@ const originData = [ lat: 29.8, iconType: 'middleRain', iconColor: '#6495ED', - backgoundColor: '#326EA0', + backgoundColor: dataColor.middleRainBC, temperature: '24℃', weather: '中雨' }, @@ -153,7 +160,7 @@ const originData = [ lat: 30, iconType: 'hugeRain', iconColor: '#4678D2', - backgoundColor: '#285A8C', + backgoundColor: dataColor.bigRainBC, temperature: '20℃', weather: '大雨' } diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index 4a8437389d..7a64d0bc4b 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -9,30 +9,30 @@ "title": "点数据标注", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ" }, - { - "filename": "iconfont.js", - "title": "图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*jnPwQZsY-bEAAAAAAAAAAAAAARQnAQ" - }, { "filename": "polygon_text.js", "title": "面数据标注", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ" }, + { + "filename": "iconfont.js", + "title": "图标标注", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*8PfqQ6-lQ0EAAAAAAAAAAAAAARQnAQ" + }, { "filename": "iconfonts.js", "title": "天气图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*AouOQ4VYTJMAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*JAhxTaabap4AAAAAAAAAAAAAARQnAQ" }, { "filename": "temperture.js", "title": "气温图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*spetRL1JnfsAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*36umQaf_hVEAAAAAAAAAAAAAARQnAQ" }, { "filename": "updown.js", "title": "走势图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*5E4DR4H8qDQAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*P5plS5ZsYZkAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/point/text/demo/temperture.js b/examples/point/text/demo/temperture.js index d7c6726efd..4bf45f9a84 100644 --- a/examples/point/text/demo/temperture.js +++ b/examples/point/text/demo/temperture.js @@ -43,9 +43,9 @@ scene.on('loaded', () => { }) .source(data) .shape('fill') - .color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) + .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f']) .style({ - opacity: 0.5 + opacity: 0.6 }); scene.addLayer(filllayer); diff --git a/examples/point/text/demo/updown.js b/examples/point/text/demo/updown.js index 876b8cf0b7..33fd94432d 100644 --- a/examples/point/text/demo/updown.js +++ b/examples/point/text/demo/updown.js @@ -30,9 +30,9 @@ scene.on('loaded', () => { }) .source(data) .shape('fill') - .color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) + .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f']) .style({ - opacity: 0.5 + opacity: 0.6 }); scene.addLayer(filllayer); diff --git a/stories/3D_Model/Components/amap_three.tsx b/stories/3D_Model/Components/amap_three.tsx index c63957acd3..8288ebc056 100644 --- a/stories/3D_Model/Components/amap_three.tsx +++ b/stories/3D_Model/Components/amap_three.tsx @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import { GaodeMap, Mapbox, GaodeMapV1 } from '@antv/l7-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as React from 'react'; // import { DirectionalLight, Scene as ThreeScene } from 'three'; @@ -23,7 +23,8 @@ export default class GlTFThreeJSDemo extends React.Component { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + // map: new GaodeMap({ + map: new GaodeMapV1({ center: [111.4453125, 32.84267363195431], pitch: 45, rotation: 30, diff --git a/stories/3D_Model/model.stories.tsx b/stories/3D_Model/model.stories.tsx index 1da45ee792..b031ad6727 100644 --- a/stories/3D_Model/model.stories.tsx +++ b/stories/3D_Model/model.stories.tsx @@ -6,5 +6,5 @@ import ThreeRender from './Components/threeRender'; storiesOf('3D 模型', module) .add('ThreeJS Render', () => , {}) - .add('高德模型', () => , {}) + .add('高德模型1.x', () => , {}) .add('Mapbox模型', () => , {}); diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index 0018b15100..e11654a232 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -1,6 +1,6 @@ // @ts-ignore import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps'; import * as React from 'react'; export default class GaodeMapComponent extends React.Component { @@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new GaodeMapV1({ center: [121.107846, 30.267069], pitch: 0, style: 'normal', From e17977b8e00f5fc472d2d6c652bb7a4df623d237 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Mon, 31 May 2021 20:39:15 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=AE=98?= =?UTF-8?q?=E7=BD=91=E6=96=87=E6=A1=A3=EF=BC=9AboxSelect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/layer/layer.zh.md | 14 ++ examples/point/text/demo/iconfont.js | 2 +- examples/point/text/demo/iconfonts.js | 12 +- examples/point/text/demo/temperture.js | 2 +- examples/point/text/demo/updown.js | 2 +- packages/component/src/control/BaseControl.ts | 1 - stories/Map/components/amap2demo_text.tsx | 51 +------ .../Map/components/amap2demo_textSelect.tsx | 126 ++++++++++++++++++ stories/Map/map.stories.tsx | 2 + 9 files changed, 152 insertions(+), 60 deletions(-) create mode 100644 stories/Map/components/amap2demo_textSelect.tsx diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index aaae44fbe8..489937443e 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -590,3 +590,17 @@ layer.on('inited', (option) => {}); - target 当前 layer - type 事件类型 + +## 图层框选 + +### boxSelect + +参数 option +- box [x1: number, y1: number, x2: number, y2: number] 相较于 +- cb (...args: any[]) => void 传入的回调方法，返回框选内部的 feature + +```javascript +layer.boxSelect(box, cb); +// (x1, y1), (x2, y2) 框选的方框左上角和右下角相对于地图左上角的像素坐标 +// cb 是传入的回调函数，回调函数返回的参数是选中的 feature 对象数组，对象的字段和用户传入的数据相关 +``` diff --git a/examples/point/text/demo/iconfont.js b/examples/point/text/demo/iconfont.js index ace6447a89..8c0818cfc1 100644 --- a/examples/point/text/demo/iconfont.js +++ b/examples/point/text/demo/iconfont.js @@ -32,7 +32,7 @@ scene.on('loaded', () => { }) .shape('icon', 'text') .size(20) - .color('w', ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99']) + .color('w', [ '#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99' ]) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index 6a68dacc95..a4e9fdaf53 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -13,12 +13,12 @@ const scene = new Scene({ }) }); const dataColor = { - bigRainBC: "#285A8C", - middleRainBC: "#326EA0", - smallRainBC: "#4678AA", - sunBC: "#00BFFF", - cloudBC: "#1E90FF" -} + bigRainBC: '#285A8C', + middleRainBC: '#326EA0', + smallRainBC: '#4678AA', + sunBC: '#00BFFF', + cloudBC: '#1E90FF' +}; const originData = [ { lng: 121.7, diff --git a/examples/point/text/demo/temperture.js b/examples/point/text/demo/temperture.js index 4bf45f9a84..3ed1326a1d 100644 --- a/examples/point/text/demo/temperture.js +++ b/examples/point/text/demo/temperture.js @@ -43,7 +43,7 @@ scene.on('loaded', () => { }) .source(data) .shape('fill') - .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f']) + .color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ]) .style({ opacity: 0.6 }); diff --git a/examples/point/text/demo/updown.js b/examples/point/text/demo/updown.js index 33fd94432d..26578e8d81 100644 --- a/examples/point/text/demo/updown.js +++ b/examples/point/text/demo/updown.js @@ -30,7 +30,7 @@ scene.on('loaded', () => { }) .source(data) .shape('fill') - .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f']) + .color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ]) .style({ opacity: 0.6 }); diff --git a/packages/component/src/control/BaseControl.ts b/packages/component/src/control/BaseControl.ts index 39e79caeb2..378c583d5c 100644 --- a/packages/component/src/control/BaseControl.ts +++ b/packages/component/src/control/BaseControl.ts @@ -45,7 +45,6 @@ export default class Control extends EventEmitter { }; } public setPosition(position: PositionName = 'bottomright') { - // 考虑组件的自动布局，需要销毁重建 const controlService = this.controlService; if (controlService) { diff --git a/stories/Map/components/amap2demo_text.tsx b/stories/Map/components/amap2demo_text.tsx index 3061d29f6c..7896a1122b 100644 --- a/stories/Map/components/amap2demo_text.tsx +++ b/stories/Map/components/amap2demo_text.tsx @@ -86,58 +86,9 @@ export default class Amap2demo_text extends React.Component { // textAllowOverlap: true, }); scene.addLayer(pointLayer); + }); - // https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json - // const pointIconFontLayer = new PointLayer({}) - // .source( - // [ - // { - // j: 140, - // w: 30, - // m: '', - // }, - // { - // j: 140, - // w: 32, - // m: '', - // }, - // { - // j: 140, - // w: 34, - // m: 'icon1', - // }, - // { - // j: 140, - // w: 36, - // m: 'icon2', - // }, - // ], - // { - // parser: { - // type: 'json', - // x: 'j', - // y: 'w', - // }, - // }, - // ) - // .shape('m', 'text') - // .size(12) - // .color('w', ['#f00', '#f00', '#0f0']) - // .style({ - // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - // textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] - // spacing: 2, // 字符间距 - // padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - // stroke: '#ffffff', // 描边颜色 - // strokeWidth: 0.3, // 描边宽度 - // strokeOpacity: 1.0, - // fontFamily, - // // fontFamily: "Times New Roman", - // iconfont: true, - // textAllowOverlap: true, - // }); - // scene.addLayer(pointIconFontLayer); fetch( 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', diff --git a/stories/Map/components/amap2demo_textSelect.tsx b/stories/Map/components/amap2demo_textSelect.tsx new file mode 100644 index 0000000000..0211f38edc --- /dev/null +++ b/stories/Map/components/amap2demo_textSelect.tsx @@ -0,0 +1,126 @@ +// @ts-ignore +import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; +export default class Amap2demo_textSelect extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + let fontFamily = 'iconfont'; + let fontPath = + '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496'; + + + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [120, 30.258134], + pitch: 0, + style: 'light', + zoom: 3, + // viewMode: "3D", + // mask + }), + }); + this.scene = scene; + scene.addIconFont('icon1', ''); + // scene.addIconFont("icon2", "") + + // scene.addIconFonts([ + // ['icon1', ''], + // ['icon2', ''], + // ]); + + scene.addFontFace(fontFamily, fontPath); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', + ) + .then((res) => res.json()) + .then((data) => { + console.log(data.list[0]) + const pointLayer = new PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w', + }, + }) + .shape('icon', 'text') + .size(12) + .color('w', ['#f00', '#f00', '#0f0']) + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + fontFamily, + // fontFamily: "Times New Roman", + iconfont: true, + // textAllowOverlap: true, + }); + scene.addLayer(pointLayer); + pointLayer.boxSelect([0, 0, 155, 278], (f) => { + console.log('======') + console.log(f) + }) + }); + + + fetch( + 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', + ) + .then((res) => res.json()) + .then((data) => { + const pointLayer = new PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w', + }, + }) + .shape('m', 'text') + .size(12) + .color('w', ['#0e0030', '#0e0030', '#0e0030']) + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + // textAllowOverlap: true + }); + scene.addLayer(pointLayer); + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index 22f5347bf0..f4208354e2 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -5,6 +5,7 @@ import Amap2demo from './components/amap2demo' import Amap2demo_extrude from './components/amap2demo_extrude' import Amapdemo_extrude from './components/amapdemo_extrude' import Amap2demo_text from './components/amap2demo_text' +import Amap2demo_textSelect from './components/amap2demo_textSelect' import Amap2demo_iconfont from './components/amap2demo_iconfont'; import Amap2demo_image from './components/amap2demo_image' @@ -54,6 +55,7 @@ storiesOf('地图方法', module) .add('高德地图 point/extrude', () => ) .add('高德地图2.0 point/extrude', () => ) .add('高德地图2.0 point/text', () => ) + .add('高德地图2.0 point/textSelect', () => ) .add('高德地图2.0 point/iconfont', () => ) .add('高德地图2.0 point/image', () => ) From 37b6f0dc7aa06016e08d1240b2df30ea7a26a3a7 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 31 May 2021 20:55:57 +0800 Subject: [PATCH 5/5] chore: publish --- lerna.json | 2 +- packages/component/package.json | 6 +++--- packages/core/package.json | 4 ++-- packages/l7/package.json | 14 +++++++------- packages/layers/package.json | 10 +++++----- packages/map/package.json | 4 ++-- packages/maps/package.json | 8 ++++---- packages/renderer/package.json | 4 ++-- packages/scene/package.json | 14 +++++++------- packages/source/package.json | 6 +++--- packages/three/package.json | 4 ++-- packages/utils/package.json | 2 +- 12 files changed, 39 insertions(+), 39 deletions(-) diff --git a/lerna.json b/lerna.json index 0db78e7ebb..d36de82475 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.3.10", + "version": "2.4.0", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index d4c3dbf7a2..1c8916905d 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-core": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index 901127f502..3cfd56505b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,7 +24,7 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "@mapbox/tiny-sdf": "^1.1.1", "ajv": "^6.10.2", diff --git a/packages/l7/package.json b/packages/l7/package.json index 5566da1d1d..50d005fbb5 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.3.10", + "version": "2.4.0", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,12 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.3.10", - "@antv/l7-core": "^2.3.10", - "@antv/l7-layers": "^2.3.10", - "@antv/l7-maps": "^2.3.10", - "@antv/l7-scene": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-component": "2.4.0", + "@antv/l7-core": "2.4.0", + "@antv/l7-layers": "2.4.0", + "@antv/l7-maps": "2.4.0", + "@antv/l7-scene": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7" }, "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0", diff --git a/packages/layers/package.json b/packages/layers/package.json index b7234f3929..a09b78d1cd 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.3.10", + "version": "2.4.0", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -24,10 +24,10 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.3.10", - "@antv/l7-layers": "^2.3.10", - "@antv/l7-source": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-core": "2.4.0", + "@antv/l7-layers": "2.4.0", + "@antv/l7-source": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/map/package.json b/packages/map/package.json index 2ff29936a0..57bb303fb0 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.3.10", + "version": "2.4.0", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.3.10", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/maps/package.json b/packages/maps/package.json index 6ea2c15af3..a147c503f4 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -27,9 +27,9 @@ "license": "ISC", "dependencies": { "@amap/amap-jsapi-loader": "^0.0.3", - "@antv/l7-core": "^2.3.10", - "@antv/l7-map": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-core": "2.4.0", + "@antv/l7-map": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index a93d089cc8..8a91e4abfc 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.3.10", + "@antv/l7-core": "2.4.0", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "lodash": "^4.17.15", diff --git a/packages/scene/package.json b/packages/scene/package.json index 2f2d41da1e..1f057a4267 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.3.10", - "@antv/l7-core": "^2.3.10", - "@antv/l7-layers": "^2.3.10", - "@antv/l7-maps": "^2.3.10", - "@antv/l7-renderer": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-component": "2.4.0", + "@antv/l7-core": "2.4.0", + "@antv/l7-layers": "2.4.0", + "@antv/l7-maps": "2.4.0", + "@antv/l7-renderer": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", diff --git a/packages/source/package.json b/packages/source/package.json index 4b4120f349..31e94817cf 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,8 +26,8 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.3.10", - "@antv/l7-utils": "^2.3.10", + "@antv/l7-core": "2.4.0", + "@antv/l7-utils": "2.4.0", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/three/package.json b/packages/three/package.json index b95ab7a6b1..08cc912768 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.3.10", + "version": "2.4.0", "description": "three for L7 ", "keywords": [ "3D", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7": "^2.3.10", + "@antv/l7": "2.4.0", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "rollup": "^2.3.3", diff --git a/packages/utils/package.json b/packages/utils/package.json index 4edace089a..79bdfc6972 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.3.10", + "version": "2.4.0", "description": "", "main": "lib/index.js", "module": "es/index.js",