From 479b803404eeeb44904a398b39321bae2bf4384c Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Thu, 27 May 2021 19:55:06 +0800 Subject: [PATCH] feat: 2.4 beat versio --- docs/api/map.zh.md | 14 +- docs/api/scene.zh.md | 119 +++++---- .../animate/demo/animate_path_texture.js | 6 +- examples/line/path/demo/road_red.js | 4 +- examples/point/image/demo/road.js | 50 ++-- examples/point/scatter/demo/animatePoint.js | 22 +- examples/point/scatter/demo/dynamicScatter.js | 16 +- examples/point/text/demo/iconfont.js | 48 ++-- examples/point/text/demo/iconfonts.js | 238 +++++++++--------- examples/point/text/demo/temperture.js | 90 +++---- stories/Map/components/amap2demo_iconfont.tsx | 122 +++++---- stories/Map/components/amap2demo_mesh.tsx | 115 +++++---- stories/Map/components/amap2demo_road.tsx | 91 ++++--- stories/Map/components/amap2demo_text.tsx | 5 +- 14 files changed, 483 insertions(+), 457 deletions(-) diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md index c2685e7b17..3c9e2b6b16 100644 --- a/docs/api/map.zh.md +++ b/docs/api/map.zh.md @@ -15,7 +15,7 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管 ### 引入 Map ```javascript -import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0 +import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0 import { GaodeMapV1 } from '@antv/l7-maps'; // 默认引入高德1.x 版本 import { Mapbox } from '@antv/l7-maps'; @@ -78,8 +78,8 @@ const scene = new Scene({ ```javascript const map = new AMap.Map('map', { viewMode: '3D', - resizeEnable: true, // 是否监控地图容器尺寸变化 - zoom: 11, // 初始化地图层级 + resizeEnable: true, // 是否监控地图容器尺寸变化 + zoom: 11, // 初始化地图层级 center: [116.397428, 39.90923], // 初始化地图中心点 }); const scene = new Scene({ @@ -101,10 +101,10 @@ const scene = new Scene({ ```javascript mapboxgl.accessToken = 'xxxx - token'; const map = new mapboxgl.Map({ - container: 'map', // container id - style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location - center: [-74.5, 40], // starting position [lng, lat] - zoom: 9, // starting zoom + container: 'map', // container id + style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location + center: [-74.5, 40], // starting position [lng, lat] + zoom: 9, // starting zoom }); const scene = new Scene({ diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 5a7f4a3215..3cab6145dc 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -173,6 +173,7 @@ L7 Logo 的显示位置 默认左下角 增加图层对象 参数 : + - `layer` {ILayer} 图层对象 ```javascript @@ -184,10 +185,13 @@ scene.addLayer(layer); 获取对应的图层对象 参数 : + - `id` {string} + ```javascript scene.getLayer('layerID'); ``` + ### getLayers() 获取所有的地图图层 获取所有的地图图层 @@ -208,8 +212,7 @@ scene.getLayers(); scene.getLayerByName(name); // return Layer 图层对象 ``` - -### removeLayer 移除 layer 图层 +### removeLayer 移除 layer 图层 移除 layer 图层 @@ -261,17 +264,16 @@ scene.removeControl(ctl); - `name` { string } - ```javascript -const zoomControl = new Zoom({ // zoom 控件 +const zoomControl = new Zoom({ + // zoom 控件 name: 'z1', // 用户传入的控件名称（也可以不传入，该控件默认名称为 zoom） - position: 'topright' + position: 'topright', }); scene.getControlByName('z1'); ``` - ## 标记方法 ### addMarker(maker) 添加标记 @@ -284,22 +286,24 @@ scene.getControlByName('z1'); ```javascript const marker = new Marker({ - element: el + element: el, }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); scene.addMarker(marker); ``` ### addMarkerLayer(layer) 添加 Marker 统一管理图层 + 当用户需要添加许多个 Marker 实例时，为了方便管理可以使用 markerLayer 对象统一管理 参数 : -- `layer` { IMarkerLayer } 标记图层对象 +- `layer` { IMarkerLayer } 标记图层对象 ```javascript const markerLayer = new MarkerLayer(); scene.addMarkerLayer(markerLayer); ``` + [示例地址](/zh/examples/point/marker#markerlayer) ### removeMarkerLayer(layer) 移除标签图层 @@ -334,7 +338,6 @@ scene.getZoom(); return {float}   当前缩放等级 - ### getCenter() 获取地图中心 获取地图中心点 @@ -518,7 +521,6 @@ scene.fitBounds([ ]); ``` - ### exportMap 导出地图图片 导出地图，目前仅支持导出可视化层，不支持底图导出 @@ -536,6 +538,7 @@ scene 销毁方法，离开页面，或者不需要使用地图可以调用 ```javascript scene.destroy(); ``` + ## iconfont 映射支持 ### addIconFont(name, fontUnicode) 增加对数据中 unicode 的映射支持 @@ -548,37 +551,40 @@ scene.destroy(); - `fontUnicode` {string} ```javascript - scene.addIconFont("icon1", "") - scene.addIconFont("icon2", "") - scene.addFontFace(fontFamily, fontPath); - const pointIconFontLayer = new PointLayer({}) - .source( - [{ - 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({ - fontFamily, - iconfont: true, - textAllowOverlap: true, - }); - scene.addLayer(pointIconFontLayer); +scene.addIconFont('icon1', ''); +scene.addIconFont('icon2', ''); +scene.addFontFace(fontFamily, fontPath); +const pointIconFontLayer = new PointLayer({}) + .source( + [ + { + 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({ + fontFamily, + iconfont: true, + textAllowOverlap: true, + }); +scene.addLayer(pointIconFontLayer); ``` ### addIconFonts(options) 同时传入多组 name - unicode 的键值对 @@ -586,14 +592,16 @@ scene.destroy(); 同时传入多组 name - unicode 的键值对 参数 : + - `options` { Array<[name, unicode]> } ```javascript - scene.addIconFonts([ - ['icon1', ''], - ['icon2', ''], - ]); +scene.addIconFonts([ + ['icon1', ''], + ['icon2', ''], +]); ``` + ## 全局资源 ### addImage(id, img) 全局中添加的图片资源 @@ -601,11 +609,17 @@ scene.destroy(); 在 L7 的图层对象可以使用在 scene 全局中添加的图片资源 参数 : + - `id` {string} - `img` {HTMLImageElement | File | string} + ```javascript -scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'); +scene.addImage( + '02', + 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', +); ``` + [示例地址](/zh/examples/gallery/animate#animate_path_texture) ### hasImage(id) 判断全局图片资源 @@ -613,9 +627,11 @@ scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-41 判断是否已经在全局添加过相应的图片资源 参数 : + - `id` {string} + ```javascript -scene.hasImage('imageID') +scene.hasImage('imageID'); ``` ### removeImage(id) 全局删除图片资源 @@ -623,9 +639,11 @@ scene.hasImage('imageID') 从全局删除对应的图片资源 参数 : + - `id` {string} + ```javascript -scene.removeImage('imageID') +scene.removeImage('imageID'); ``` ### addFontFace(fontFamily, fontPath) 添加字体文件 @@ -633,11 +651,14 @@ scene.removeImage('imageID') 添加字体文件 参数 : + - `fontFamily` {string} 用户为自己定义的字体名称 - `fontPath` {string} 导入的文件地址 + ```javascript let fontFamily = 'iconfont'; -let fontPath = '//at.alicdn.com/t/font_2534097_iiet9d3nekn.woff2?t=1620444089776'; +let fontPath = + '//at.alicdn.com/t/font_2534097_iiet9d3nekn.woff2?t=1620444089776'; scene.addFontFace(fontFamily, fontPath); ``` diff --git a/examples/gallery/animate/demo/animate_path_texture.js b/examples/gallery/animate/demo/animate_path_texture.js index 72d2284bf9..199cbe9b08 100644 --- a/examples/gallery/animate/demo/animate_path_texture.js +++ b/examples/gallery/animate/demo/animate_path_texture.js @@ -13,7 +13,7 @@ const scene = new Scene({ scene.on('loaded', () => { scene.addImage( '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg' ); fetch( 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json' @@ -33,8 +33,8 @@ scene.on('loaded', () => { }) .style({ lineTexture: true, // 开启线的贴图功能 - iconStep: 100, // 设置贴图纹理的间距 - }) + iconStep: 100 // 设置贴图纹理的间距 + }); scene.addLayer(layer); }); }); diff --git a/examples/line/path/demo/road_red.js b/examples/line/path/demo/road_red.js index a7a5725614..85d0c17a83 100644 --- a/examples/line/path/demo/road_red.js +++ b/examples/line/path/demo/road_red.js @@ -9,12 +9,12 @@ import { const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [116.3956, 39.9392], + center: [ 116.3956, 39.9392 ], pitch: 0, zoom: 10, rotation: 0, style: 'amap://styles/light', - viewMode: '2D', + viewMode: '2D' }) }); scene.on('loaded', () => { diff --git a/examples/point/image/demo/road.js b/examples/point/image/demo/road.js index c4df662595..c2c67908c4 100644 --- a/examples/point/image/demo/road.js +++ b/examples/point/image/demo/road.js @@ -4,18 +4,18 @@ import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [120.115, 30.221], + center: [ 120.115, 30.221 ], pitch: 40, zoom: 16, - viewMode: '3D', + viewMode: '3D' }) }); scene.on('loaded', () => { fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json', + 'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json' ) - .then((res) => res.json()) - .then((data) => { + .then(res => res.json()) + .then(data => { scene.addImage( 'road', @@ -31,76 +31,76 @@ scene.on('loaded', () => { .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 - trailLength: 2, // 流线长度 + trailLength: 2 // 流线长度 }) .style({ lineTexture: true, // 开启线的贴图功能 - iconStep: 200, // 设置贴图纹理的间距 + iconStep: 200 // 设置贴图纹理的间距 }); scene.addLayer(layer); scene.addImage( 'start', - 'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg' ); scene.addImage( 'visitor', - 'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg' ); scene.addImage( 'museum', - 'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg' ); scene.addImage( 'supermarket', - 'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg' ); scene.addImage( 'tower', - 'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg' ); scene.addImage( 'end', - 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg', + 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg' ); const imageLayer = new PointLayer() .source([{ lng: 120.11025885601617, lat: 30.22006389085372, icon: 'start' - },{ + }, { lng: 120.11123578376913, lat: 30.220443561196277, icon: 'visitor' - },{ + }, { lng: 120.11408457779198, lat: 30.22019805564678, icon: 'museum' - },{ + }, { lng: 120.11683172384723, lat: 30.21875509667716, icon: 'supermarket' - },{ + }, { lng: 120.11945546294194, lat: 30.218724022876376, icon: 'tower' - },{ + }, { lng: 120.1184189041221, lat: 30.21783201718256, icon: 'end' } - ], { + ], { parser: { type: 'json', x: 'lng', - y: 'lat', - }, + y: 'lat' + } }) - .shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end']) + .shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ]) .size(35) .style({ - offsets: [0, 20] - }) + offsets: [ 0, 20 ] + }); scene.addLayer(imageLayer); }); -}); \ No newline at end of file +}); diff --git a/examples/point/scatter/demo/animatePoint.js b/examples/point/scatter/demo/animatePoint.js index 2d5171bb57..e6bb545790 100644 --- a/examples/point/scatter/demo/animatePoint.js +++ b/examples/point/scatter/demo/animatePoint.js @@ -5,23 +5,23 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [112, 23.69], - zoom: 2.5, + center: [ 112, 23.69 ], + zoom: 2.5 }) }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv', + 'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv' ) - .then((res) => res.text()) - .then((data) => { + .then(res => res.text()) + .then(data => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', - y: 'Latitude', - }, + y: 'Latitude' + } }) .shape('circle') .active(true) @@ -30,15 +30,15 @@ fetch( .color('#ffa842') .style({ opacity: 1, - offsets: [40, 40], + offsets: [ 40, 40 ] }); const pointLayer2 = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', - y: 'Latitude', - }, + y: 'Latitude' + } }) .shape('circle') .active(true) @@ -46,7 +46,7 @@ fetch( .size(50) .color('#f00') .style({ - opacity: 1, + opacity: 1 }); scene.addLayer(pointLayer); diff --git a/examples/point/scatter/demo/dynamicScatter.js b/examples/point/scatter/demo/dynamicScatter.js index ff7f0c0e89..34de1a999b 100644 --- a/examples/point/scatter/demo/dynamicScatter.js +++ b/examples/point/scatter/demo/dynamicScatter.js @@ -5,7 +5,7 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [120.19382669582967, 30.258134], + center: [ 120.19382669582967, 30.258134 ], zoom: 10 }) }); @@ -23,11 +23,11 @@ function pointOnCircle(angle) { type: 'Point', coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, - 30.258134 + Math.sin(angle) * radius, - ], - }, - }, - ], + 30.258134 + Math.sin(angle) * radius + ] + } + } + ] }; } const layer = new PointLayer({}) @@ -39,7 +39,7 @@ const layer = new PointLayer({}) .style({ stroke: '#fff', strokeWidth: 2, - opacity: 1, + opacity: 1 }); scene.addLayer(layer); layer.setData(pointOnCircle(1000)); @@ -49,4 +49,4 @@ function animateMarker(timestamp) { scene.render(); requestAnimationFrame(animateMarker); } -animateMarker(0); \ No newline at end of file +animateMarker(0); diff --git a/examples/point/text/demo/iconfont.js b/examples/point/text/demo/iconfont.js index 80842e25e8..185df6aee5 100644 --- a/examples/point/text/demo/iconfont.js +++ b/examples/point/text/demo/iconfont.js @@ -10,13 +10,13 @@ const scene = new Scene({ zoom: 3 }) }); -let fontFamily = 'iconfont'; -let fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496'; +const fontFamily = 'iconfont'; +const fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496'; scene.addFontFace(fontFamily, fontPath); -scene.addIconFont("icon1", "") +scene.addIconFont('icon1', ''); scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) .then(data => { const pointLayer = new PointLayer({}) @@ -46,32 +46,32 @@ scene.on('loaded', () => { scene.addLayer(pointLayer); }); - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({}) + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json' + ) + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({}) .source(data.list, { - parser: { + parser: { type: 'json', x: 'j', - y: 'w', - }, + y: 'w' + } }) .shape('icon', 'text') .size(12) - .color('w', ['#f00', '#f00', '#0f0']) + .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', // 描边颜色 - fontFamily, - iconfont: true, - // textAllowOverlap: true, + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ -10, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + fontFamily, + iconfont: true + // textAllowOverlap: true, }); - scene.addLayer(pointLayer); - }) + scene.addLayer(pointLayer); + }); }); diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index d4365206ab..3c0a772789 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -4,21 +4,21 @@ import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [120.5, 30.2], + center: [ 120.5, 30.2 ], pitch: 0, style: 'light', zoom: 8.5, - zooms: [8, 10], + zooms: [ 8, 10 ], viewMode: '2D' - }), + }) }); -let originData = [ +const originData = [ { lng: 120, lat: 30, iconType: 'sun', - iconColor: "#FFA500", - backgoundColor: "#00BFFF", + iconColor: '#FFA500', + backgoundColor: '#00BFFF', temperature: '28℃', weather: '晴朗' }, @@ -26,8 +26,8 @@ let originData = [ lng: 120.2, lat: 30.5, iconType: 'sun', - iconColor: "#FFA500", - backgoundColor: "#00BFFF", + iconColor: '#FFA500', + backgoundColor: '#00BFFF', temperature: '28℃', weather: '晴朗' }, @@ -35,8 +35,8 @@ let originData = [ lng: 121.5, lat: 31.4, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', weather: '多云' }, @@ -44,8 +44,8 @@ let originData = [ lng: 120, lat: 31, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', weather: '多云' }, @@ -53,8 +53,8 @@ let originData = [ lng: 120.6, lat: 30.8, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', weather: '多云' }, @@ -62,8 +62,8 @@ let originData = [ lng: 120.5, lat: 31.3, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', weather: '多云' }, @@ -71,8 +71,8 @@ let originData = [ lng: 121.3, lat: 30.2, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', weather: '小雨' }, @@ -80,8 +80,8 @@ let originData = [ lng: 121, lat: 30.5, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', weather: '小雨' }, @@ -89,8 +89,8 @@ let originData = [ lng: 120.6, lat: 30, iconType: 'middleRain', - iconColor: "#6495ED", - backgoundColor: "#326EA0", + iconColor: '#6495ED', + backgoundColor: '#326EA0', temperature: '24℃', weather: '中雨' }, @@ -98,8 +98,8 @@ let originData = [ lng: 120.2, lat: 29.7, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', weather: '小雨' }, @@ -107,8 +107,8 @@ let originData = [ lng: 121.7, lat: 29.8, iconType: 'middleRain', - iconColor: "#6495ED", - backgoundColor: "#326EA0", + iconColor: '#6495ED', + backgoundColor: '#326EA0', temperature: '24℃', weather: '中雨' }, @@ -116,110 +116,110 @@ let originData = [ lng: 121.5, lat: 30, iconType: 'hugeRain', - iconColor: "#4678D2", - backgoundColor: "#285A8C", + iconColor: '#4678D2', + backgoundColor: '#285A8C', temperature: '20℃', weather: '大雨' - }, + } ]; -let fontFamily = 'iconfont'; -let fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; +const fontFamily = 'iconfont'; +const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; scene.addFontFace(fontFamily, fontPath); scene.addIconFonts([ - ['smallRain', ''], - ['middleRain', ''], - ['hugeRain', ''], - ['sun', ''], - ['cloud', ''], + [ 'smallRain', '' ], + [ 'middleRain', '' ], + [ 'hugeRain', '' ], + [ 'sun', '' ], + [ 'cloud', '' ] ]); scene.on('loaded', () => { - - const layer = new PointLayer() - .source(originData, { + + const layer = new PointLayer() + .source(originData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + }) + .shape('circle') + .color('backgoundColor') + .size(40); + scene.addLayer(layer); + + + const pointIconFontLayer = new PointLayer({}) + .source(originData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('iconType', 'text') + .size(30) + .color('iconColor') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 38, 10 ], // 文本相对锚点的偏移量 [水平, 垂直] + fontFamily, + iconfont: true, + textAllowOverlap: true + }); + scene.addLayer(pointIconFontLayer); + + const textLayer = new PointLayer({}) + .source(originData, + { parser: { type: 'json', x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .color('backgoundColor') - .size(40) - scene.addLayer(layer); + y: 'lat' + } + } + ) + .shape('temperature', 'text') + .size(10) + .color('#ffffff') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + fontFamily: 'Times New Roman', + textAllowOverlap: true + }); + scene.addLayer(textLayer); - - const pointIconFontLayer = new PointLayer({}) - .source(originData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - } - }, - ) - .shape('iconType', 'text') - .size(30) - .color('iconColor') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [38, 10], // 文本相对锚点的偏移量 [水平, 垂直] - fontFamily, - iconfont: true, - textAllowOverlap: true, - }); - scene.addLayer(pointIconFontLayer); - - const textLayer = new PointLayer({}) - .source(originData, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('temperature', 'text') - .size(10) - .color('#ffffff') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [5, -55], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - fontFamily: "Times New Roman", - textAllowOverlap: true, - }); - scene.addLayer(textLayer); - - const textLayer2 = new PointLayer({}) - .source(originData, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - }, - }, - ) - .shape('weather', 'text') - .size(14) - .color('#ffffff') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [5, -15], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - fontFamily: "Times New Roman", - textAllowOverlap: true, - }); - scene.addLayer(textLayer2); + const textLayer2 = new PointLayer({}) + .source(originData, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('weather', 'text') + .size(14) + .color('#ffffff') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + fontFamily: 'Times New Roman', + textAllowOverlap: true + }); + scene.addLayer(textLayer2); }); diff --git a/examples/point/text/demo/temperture.js b/examples/point/text/demo/temperture.js index 487071489f..d9ee085cf6 100644 --- a/examples/point/text/demo/temperture.js +++ b/examples/point/text/demo/temperture.js @@ -6,19 +6,19 @@ const scene = new Scene({ map: new GaodeMap({ style: 'dark', pitch: 40, - center: [118.8, 32.056], + center: [ 118.8, 32.056 ], zoom: 12.5 }) }); -let fontFamily = 'iconfont'; -let fontPath = +const fontFamily = 'iconfont'; +const fontPath = '//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225'; - scene.addIconFont("icon", "") - scene.addFontFace(fontFamily, fontPath); +scene.addIconFont('icon', ''); +scene.addFontFace(fontFamily, fontPath); -let colors = [ - '#87CEFA', - '#00BFFF', +const colors = [ + '#87CEFA', + '#00BFFF', '#7FFFAA', '#00FF7F', @@ -30,28 +30,28 @@ let colors = [ '#FF7F50', '#FF6347', '#FF0000' -] +]; scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json') - .then((res) => res.json()) - .then((data) => { + .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.8 + 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.8 + }); scene.addLayer(filllayer); const linelayer = new LineLayer({ zIndex: 5, - name: 'line2', + name: 'line2' }) .source(data) .shape('line') @@ -60,24 +60,24 @@ scene.on('loaded', () => { .style({ opacity: 0.3 }); - scene.addLayer(linelayer); - - const pointLayer = new PointLayer({ - zIndex: 10 - }) + scene.addLayer(linelayer); + + const pointLayer = new PointLayer({ + zIndex: 10 + }) .source(data) .shape('icon', 'text') .size(30) .color('count', t => { - let c = Number(t.replace('℃', '')) - return colors[Math.floor(((c - 18)/16)*10)] + const c = Number(t.replace('℃', '')); + return colors[Math.floor(((c - 18) / 16) * 10)]; }) .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); @@ -85,19 +85,19 @@ scene.on('loaded', () => { const tempertureLayer = new PointLayer({ zIndex: 10 }) - .source(data) - .shape('count', 'text') - .size(12) - .color('count', t => { - let c = Number(t.replace('℃', '')) - return colors[Math.floor(((c - 18)/16)*10)] - }) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [35, 30], - padding: [1, 1], - }); - scene.addLayer(tempertureLayer); + .source(data) + .shape('count', 'text') + .size(12) + .color('count', t => { + const c = Number(t.replace('℃', '')); + return colors[Math.floor(((c - 18) / 16) * 10)]; + }) + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 35, 30 ], + padding: [ 1, 1 ] + }); + scene.addLayer(tempertureLayer); - }) + }); }); diff --git a/stories/Map/components/amap2demo_iconfont.tsx b/stories/Map/components/amap2demo_iconfont.tsx index cfc52d23e2..a0db923df0 100644 --- a/stories/Map/components/amap2demo_iconfont.tsx +++ b/stories/Map/components/amap2demo_iconfont.tsx @@ -15,7 +15,6 @@ export default class Amap2demo_iconfont extends React.Component { let fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; - const scene = new Scene({ id: 'map', map: new GaodeMap({ @@ -24,7 +23,7 @@ export default class Amap2demo_iconfont extends React.Component { style: 'normal', zoom: 9, zooms: [8, 10], - viewMode: '2D' + viewMode: '2D', }), }); this.scene = scene; @@ -44,109 +43,109 @@ export default class Amap2demo_iconfont extends React.Component { lng: 120, lat: 30, iconType: 'sun', - iconColor: "#FFA500", - backgoundColor: "#00BFFF", + iconColor: '#FFA500', + backgoundColor: '#00BFFF', temperature: '28℃', - weather: '晴朗' + weather: '晴朗', }, { lng: 120.2, lat: 30.5, iconType: 'sun', - iconColor: "#FFA500", - backgoundColor: "#00BFFF", + iconColor: '#FFA500', + backgoundColor: '#00BFFF', temperature: '28℃', - weather: '晴朗' + weather: '晴朗', }, { lng: 121.5, lat: 31.4, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', - weather: '多云' + weather: '多云', }, { lng: 120, lat: 31, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', - weather: '多云' + weather: '多云', }, { lng: 120.6, lat: 30.8, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', - weather: '多云' + weather: '多云', }, { lng: 120.5, lat: 31.3, iconType: 'cloud', - iconColor: "#F0F8FF", - backgoundColor: "#1E90FF", + iconColor: '#F0F8FF', + backgoundColor: '#1E90FF', temperature: '22℃', - weather: '多云' + weather: '多云', }, { lng: 121.3, lat: 30.2, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', - weather: '小雨' + weather: '小雨', }, { lng: 121, lat: 30.5, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', - weather: '小雨' + weather: '小雨', }, { lng: 120.6, lat: 30, iconType: 'middleRain', - iconColor: "#6495ED", - backgoundColor: "#326EA0", + iconColor: '#6495ED', + backgoundColor: '#326EA0', temperature: '24℃', - weather: '中雨' + weather: '中雨', }, { lng: 120.2, lat: 29.7, iconType: 'smallRain', - iconColor: "#6EA0FF", - backgoundColor: "#4678AA", + iconColor: '#6EA0FF', + backgoundColor: '#4678AA', temperature: '22℃', - weather: '小雨' + weather: '小雨', }, { lng: 121.7, lat: 29.8, iconType: 'middleRain', - iconColor: "#6495ED", - backgoundColor: "#326EA0", + iconColor: '#6495ED', + backgoundColor: '#326EA0', temperature: '24℃', - weather: '中雨' + weather: '中雨', }, { lng: 121.5, lat: 30, iconType: 'hugeRain', - iconColor: "#4678D2", - backgoundColor: "#285A8C", + iconColor: '#4678D2', + backgoundColor: '#285A8C', temperature: '20℃', - weather: '大雨' + weather: '大雨', }, ]; @@ -160,19 +159,17 @@ export default class Amap2demo_iconfont extends React.Component { }) .shape('circle') .color('backgoundColor') - .size(40) + .size(40); scene.addLayer(layer); - const pointIconFontLayer = new PointLayer({}) .source(originData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - } + parser: { + type: 'json', + x: 'lng', + y: 'lat', }, - ) + }) .shape('iconType', 'text') .size(30) .color('iconColor') @@ -186,15 +183,13 @@ export default class Amap2demo_iconfont extends React.Component { scene.addLayer(pointIconFontLayer); const textLayer = new PointLayer({}) - .source(originData, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, + .source(originData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', }, - ) + }) .shape('temperature', 'text') .size(10) .color('#ffffff') @@ -206,21 +201,19 @@ export default class Amap2demo_iconfont extends React.Component { stroke: '#ffffff', // 描边颜色 strokeWidth: 0.3, // 描边宽度 strokeOpacity: 1.0, - fontFamily: "Times New Roman", + fontFamily: 'Times New Roman', textAllowOverlap: true, }); scene.addLayer(textLayer); const textLayer2 = new PointLayer({}) - .source(originData, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - }, + .source(originData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', }, - ) + }) .shape('weather', 'text') .size(14) .color('#ffffff') @@ -232,11 +225,10 @@ export default class Amap2demo_iconfont extends React.Component { stroke: '#ffffff', // 描边颜色 strokeWidth: 0.3, // 描边宽度 strokeOpacity: 1.0, - fontFamily: "Times New Roman", + fontFamily: 'Times New Roman', textAllowOverlap: true, }); scene.addLayer(textLayer2); - }); } diff --git a/stories/Map/components/amap2demo_mesh.tsx b/stories/Map/components/amap2demo_mesh.tsx index 045dd90d73..5b8674d242 100644 --- a/stories/Map/components/amap2demo_mesh.tsx +++ b/stories/Map/components/amap2demo_mesh.tsx @@ -17,20 +17,20 @@ export default class Amap2demo_mesh extends React.Component { style: 'dark', pitch: 40, center: [118.8, 32.056], - zoom: 12.5 + zoom: 12.5, }), }); - + this.scene = scene; let fontFamily = 'iconfont'; let fontPath = '//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225'; - scene.addIconFont("icon", "") - scene.addFontFace(fontFamily, fontPath); + scene.addIconFont('icon', ''); + scene.addFontFace(fontFamily, fontPath); let colors = [ - '#87CEFA', - '#00BFFF', + '#87CEFA', + '#00BFFF', '#7FFFAA', '#00FF7F', @@ -41,15 +41,15 @@ export default class Amap2demo_mesh extends React.Component { '#FF7F50', '#FF6347', - '#FF0000' - ] + '#FF0000', + ]; scene.on('loaded', () => { - - fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json') + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json', + ) .then((res) => res.json()) .then((data) => { - const filllayer = new PolygonLayer({ name: 'fill', zIndex: 3, @@ -58,8 +58,8 @@ export default class Amap2demo_mesh extends React.Component { .shape('fill') .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)']) // .color('count', [ - // '#87CEFA', - // '#00BFFF', + // '#87CEFA', + // '#00BFFF', // '#7FFFAA', // '#00FF7F', @@ -73,52 +73,52 @@ export default class Amap2demo_mesh extends React.Component { // '#FF0000' // ]) .style({ - opacity: 0.8 - }) - scene.addLayer(filllayer); + opacity: 0.8, + }); + 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(30) - .color('count', t => { - let c = Number(t.replace('℃', '')) - return colors[Math.floor(((c - 18)/16)*10)] - }) - .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 linelayer = new LineLayer({ + zIndex: 5, + name: 'line2', + }) + .source(data) + .shape('line') + .size(1) + .color('#fff') + .style({ + opacity: 0.3, + }); + scene.addLayer(linelayer); - const tempertureLayer = new PointLayer({ - zIndex: 10 + const pointLayer = new PointLayer({ + zIndex: 10, + }) + .source(data) + .shape('icon', 'text') + .size(30) + .color('count', (t) => { + let c = Number(t.replace('℃', '')); + return colors[Math.floor(((c - 18) / 16) * 10)]; }) + .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 tempertureLayer = new PointLayer({ + zIndex: 10, + }) .source(data) .shape('count', 'text') .size(12) // .color('count', [ - // '#87CEFA', - // '#00BFFF', + // '#87CEFA', + // '#00BFFF', // '#7FFFAA', // '#00FF7F', @@ -131,18 +131,17 @@ export default class Amap2demo_mesh extends React.Component { // '#FF6347', // '#FF0000' // ]) - .color('count', t => { - let c = Number(t.replace('℃', '')) - return colors[Math.floor(((c - 18)/16)*10)] + .color('count', (t) => { + let c = Number(t.replace('℃', '')); + return colors[Math.floor(((c - 18) / 16) * 10)]; }) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [35, 30], + textOffset: [35, 30], padding: [1, 1], }); scene.addLayer(tempertureLayer); - - }) + }); }); } diff --git a/stories/Map/components/amap2demo_road.tsx b/stories/Map/components/amap2demo_road.tsx index 260b007de2..ca7f5894d0 100644 --- a/stories/Map/components/amap2demo_road.tsx +++ b/stories/Map/components/amap2demo_road.tsx @@ -18,21 +18,20 @@ export default class Amap2demo_road extends React.Component { center: [120.1145, 30.221], pitch: 50, zoom: 16.8, - viewMode: '3D' + viewMode: '3D', }), }); this.scene = scene; - + scene.on('loaded', () => { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json', ) .then((res) => res.json()) .then((data) => { - scene.addImage( 'road', - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ' + 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ', ); const layer = new LineLayer() @@ -77,43 +76,59 @@ export default class Amap2demo_road extends React.Component { 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg', ); const imageLayer = new PointLayer() - .source([{ - lng: 120.11025885601617, - lat: 30.22006389085372, - icon: 'start' - },{ - lng: 120.11123578376913, - lat: 30.220443561196277, - icon: 'visitor' - },{ - lng: 120.11408457779198, - lat: 30.22019805564678, - icon: 'museum' - },{ - lng: 120.11683172384723, - lat: 30.21875509667716, - icon: 'supermarket' - },{ - lng: 120.11945546294194, - lat: 30.218724022876376, - icon: 'tower' - },{ - lng: 120.1184189041221, - lat: 30.21783201718256, - icon: 'end' - } - ], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', + .source( + [ + { + lng: 120.11025885601617, + lat: 30.22006389085372, + icon: 'start', + }, + { + lng: 120.11123578376913, + lat: 30.220443561196277, + icon: 'visitor', + }, + { + lng: 120.11408457779198, + lat: 30.22019805564678, + icon: 'museum', + }, + { + lng: 120.11683172384723, + lat: 30.21875509667716, + icon: 'supermarket', + }, + { + lng: 120.11945546294194, + lat: 30.218724022876376, + icon: 'tower', + }, + { + lng: 120.1184189041221, + lat: 30.21783201718256, + icon: 'end', + }, + ], + { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, }, - }) - .shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end']) + ) + .shape('icon', [ + 'start', + 'visitor', + 'museum', + 'supermarket', + 'tower', + 'end', + ]) .size(35) .style({ - offsets: [0, 20] - }) + offsets: [0, 20], + }); scene.addLayer(imageLayer); }); }); diff --git a/stories/Map/components/amap2demo_text.tsx b/stories/Map/components/amap2demo_text.tsx index 02a783e4bf..3061d29f6c 100644 --- a/stories/Map/components/amap2demo_text.tsx +++ b/stories/Map/components/amap2demo_text.tsx @@ -46,7 +46,7 @@ export default class Amap2demo_text extends React.Component { }), }); this.scene = scene; - scene.addIconFont("icon1", "") + scene.addIconFont('icon1', ''); // scene.addIconFont("icon2", "") // scene.addIconFonts([ @@ -56,7 +56,6 @@ export default class Amap2demo_text extends React.Component { scene.addFontFace(fontFamily, fontPath); scene.on('loaded', () => { - fetch( 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', ) @@ -87,7 +86,7 @@ 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({})