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] 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', () => )