diff --git a/dev-demos/bugs/point/demos/image.tsx b/dev-demos/bugs/point/demos/image.tsx index 3c574613fe..ec7e2f5136 100644 --- a/dev-demos/bugs/point/demos/image.tsx +++ b/dev-demos/bugs/point/demos/image.tsx @@ -33,14 +33,14 @@ export default () => { 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', ); const data = await response.json(); - const newData = data.map((item: any) => { - item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)]; + const newData = data.map((item: any,index: number) => { + item.type = ['00', '01', '02',''][index % 4]; return item; }); const imageLayer = new PointLayer({ autoFit:false }) - .source(newData, { + .source(newData.slice(0,4), { parser: { type: 'json', x: 'longitude', @@ -52,25 +52,9 @@ export default () => { }) .active(false) .size(20); + scene.addLayer(imageLayer); - setInterval(()=>{ - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', - ); - const data = newData.slice(0,5+ Math.round(Math.random()*10)); - imageLayer.setData(data) - console.log(imageLayer) - console.log('更新') - },3000) + }, []); diff --git a/dev-demos/bugs/point/demos/text.tsx b/dev-demos/bugs/point/demos/text.tsx index 3fdb061426..83e6b055cb 100644 --- a/dev-demos/bugs/point/demos/text.tsx +++ b/dev-demos/bugs/point/demos/text.tsx @@ -1,53 +1,3342 @@ // @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; +import { + GaodeMap, + LineLayer, + PointLayer, + PolygonLayer, + Scene, +} from "@antv/l7"; // @ts-ignore -import {GaodeMap } from '@antv/l7-maps'; import React, { useEffect } from 'react'; - +const polygonLayerData = { + type: "FeatureCollection", + features: [ + { + "type": "Feature", + "properties": { + "name": "大丰街道区块", + "address": "四川省 成都市 新都区 大丰街道", + "featureId": "88510114001" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [ + 104.057481, + 30.78354 + ], + [ + 104.058186, + 30.783133 + ], + [ + 104.059613, + 30.782591 + ], + [ + 104.060179, + 30.782231 + ], + [ + 104.062728, + 30.780216 + ], + [ + 104.063502, + 30.779994 + ], + [ + 104.064259, + 30.779996 + ], + [ + 104.064789, + 30.780208 + ], + [ + 104.065129, + 30.780532 + ], + [ + 104.065485, + 30.783537 + ], + [ + 104.065746, + 30.783846 + ], + [ + 104.066268, + 30.784021 + ], + [ + 104.067129, + 30.783948 + ], + [ + 104.068096, + 30.783578 + ], + [ + 104.069513, + 30.782788 + ], + [ + 104.071313, + 30.781568 + ], + [ + 104.072548, + 30.780206 + ], + [ + 104.073096, + 30.778287 + ], + [ + 104.072739, + 30.775405 + ], + [ + 104.072, + 30.773135 + ], + [ + 104.069241, + 30.767597 + ], + [ + 104.070009, + 30.767355 + ], + [ + 104.070729, + 30.767734 + ], + [ + 104.071163, + 30.767622 + ], + [ + 104.07251, + 30.765632 + ], + [ + 104.072545, + 30.765221 + ], + [ + 104.072175, + 30.764623 + ], + [ + 104.071574, + 30.764505 + ], + [ + 104.071015, + 30.764585 + ], + [ + 104.070456, + 30.765155 + ], + [ + 104.070216, + 30.765158 + ], + [ + 104.06961, + 30.764849 + ], + [ + 104.069096, + 30.764151 + ], + [ + 104.069827, + 30.763717 + ], + [ + 104.069923, + 30.762857 + ], + [ + 104.070255, + 30.762425 + ], + [ + 104.07214, + 30.761258 + ], + [ + 104.07307, + 30.761219 + ], + [ + 104.073433, + 30.761435 + ], + [ + 104.073704, + 30.761774 + ], + [ + 104.0742, + 30.763597 + ], + [ + 104.074549, + 30.763875 + ], + [ + 104.074947, + 30.763942 + ], + [ + 104.075299, + 30.76391 + ], + [ + 104.075518, + 30.763719 + ], + [ + 104.075386, + 30.761805 + ], + [ + 104.075609, + 30.761271 + ], + [ + 104.07711, + 30.760921 + ], + [ + 104.078014, + 30.761792 + ], + [ + 104.078324, + 30.761923 + ], + [ + 104.078629, + 30.761849 + ], + [ + 104.079369, + 30.761199 + ], + [ + 104.079798, + 30.761176 + ], + [ + 104.080433, + 30.761613 + ], + [ + 104.080521, + 30.761984 + ], + [ + 104.080228, + 30.76298 + ], + [ + 104.080571, + 30.764024 + ], + [ + 104.08101, + 30.764669 + ], + [ + 104.081614, + 30.765123 + ], + [ + 104.082748, + 30.765395 + ], + [ + 104.083466, + 30.766674 + ], + [ + 104.084041, + 30.767194 + ], + [ + 104.084814, + 30.767592 + ], + [ + 104.085709, + 30.767779 + ], + [ + 104.08907, + 30.768288 + ], + [ + 104.089602, + 30.767218 + ], + [ + 104.089254, + 30.765868 + ], + [ + 104.089453, + 30.765461 + ], + [ + 104.089989, + 30.765214 + ], + [ + 104.091817, + 30.765352 + ], + [ + 104.093935, + 30.765228 + ], + [ + 104.094807, + 30.765449 + ], + [ + 104.095725, + 30.766155 + ], + [ + 104.095969, + 30.766177 + ], + [ + 104.096603, + 30.76588 + ], + [ + 104.096854, + 30.765278 + ], + [ + 104.096858, + 30.764646 + ], + [ + 104.095411, + 30.763778 + ], + [ + 104.094715, + 30.76309 + ], + [ + 104.094597, + 30.761966 + ], + [ + 104.094728, + 30.761364 + ], + [ + 104.096578, + 30.760708 + ], + [ + 104.096393, + 30.760247 + ], + [ + 104.095377, + 30.758933 + ], + [ + 104.093987, + 30.757793 + ], + [ + 104.091285, + 30.756156 + ], + [ + 104.08802, + 30.754518 + ], + [ + 104.086074, + 30.753961 + ], + [ + 104.081936, + 30.753584 + ], + [ + 104.080528, + 30.753094 + ], + [ + 104.07899, + 30.752126 + ], + [ + 104.077799, + 30.750588 + ], + [ + 104.077332, + 30.749418 + ], + [ + 104.076312, + 30.74424 + ], + [ + 104.075937, + 30.742989 + ], + [ + 104.075213, + 30.741474 + ], + [ + 104.074059, + 30.740051 + ], + [ + 104.072691, + 30.73953 + ], + [ + 104.069839, + 30.739964 + ], + [ + 104.067236, + 30.740515 + ], + [ + 104.066675, + 30.741396 + ], + [ + 104.06322, + 30.743442 + ], + [ + 104.060184, + 30.745948 + ], + [ + 104.056084, + 30.748729 + ], + [ + 104.054769, + 30.749842 + ], + [ + 104.051742, + 30.750928 + ], + [ + 104.050796, + 30.750948 + ], + [ + 104.050056, + 30.75125 + ], + [ + 104.048567, + 30.752502 + ], + [ + 104.04895, + 30.752835 + ], + [ + 104.049273, + 30.753498 + ], + [ + 104.048741, + 30.754237 + ], + [ + 104.048236, + 30.754594 + ], + [ + 104.047026, + 30.754985 + ], + [ + 104.042787, + 30.755652 + ], + [ + 104.032589, + 30.761879 + ], + [ + 104.032067, + 30.762503 + ], + [ + 104.031988, + 30.763855 + ], + [ + 104.032659, + 30.765974 + ], + [ + 104.032781, + 30.767116 + ], + [ + 104.032633, + 30.769439 + ], + [ + 104.032032, + 30.771068 + ], + [ + 104.029219, + 30.776089 + ], + [ + 104.029019, + 30.778375 + ], + [ + 104.029324, + 30.779142 + ], + [ + 104.029829, + 30.779563 + ], + [ + 104.030848, + 30.779776 + ], + [ + 104.032154, + 30.779884 + ], + [ + 104.033557, + 30.779731 + ], + [ + 104.034837, + 30.779281 + ], + [ + 104.038913, + 30.777248 + ], + [ + 104.040489, + 30.776704 + ], + [ + 104.041925, + 30.776533 + ], + [ + 104.043005, + 30.776658 + ], + [ + 104.043884, + 30.777079 + ], + [ + 104.044703, + 30.777743 + ], + [ + 104.04553, + 30.778722 + ], + [ + 104.045983, + 30.779633 + ], + [ + 104.046104, + 30.780662 + ], + [ + 104.045269, + 30.783958 + ], + [ + 104.044407, + 30.785798 + ], + [ + 104.043467, + 30.786948 + ], + [ + 104.042622, + 30.787452 + ], + [ + 104.041909, + 30.787485 + ], + [ + 104.041151, + 30.787275 + ], + [ + 104.038443, + 30.785949 + ], + [ + 104.037198, + 30.785701 + ], + [ + 104.034219, + 30.785852 + ], + [ + 104.033191, + 30.786196 + ], + [ + 104.032242, + 30.786928 + ], + [ + 104.031023, + 30.788549 + ], + [ + 104.030988, + 30.790049 + ], + [ + 104.031249, + 30.790451 + ], + [ + 104.032337, + 30.791253 + ], + [ + 104.033888, + 30.792252 + ], + [ + 104.034524, + 30.792883 + ], + [ + 104.036961, + 30.792237 + ], + [ + 104.037905, + 30.792163 + ], + [ + 104.03739, + 30.792531 + ], + [ + 104.037648, + 30.793121 + ], + [ + 104.039536, + 30.794375 + ], + [ + 104.03945, + 30.794965 + ], + [ + 104.039107, + 30.795186 + ], + [ + 104.03842, + 30.795333 + ], + [ + 104.03842, + 30.795628 + ], + [ + 104.040566, + 30.795408 + ], + [ + 104.04048, + 30.794744 + ], + [ + 104.041338, + 30.795039 + ], + [ + 104.041853, + 30.794892 + ], + [ + 104.042565, + 30.795873 + ], + [ + 104.043144, + 30.794881 + ], + [ + 104.041984, + 30.793662 + ], + [ + 104.042714, + 30.793441 + ], + [ + 104.04207, + 30.792483 + ], + [ + 104.042799, + 30.791966 + ], + [ + 104.042585, + 30.791119 + ], + [ + 104.044173, + 30.790086 + ], + [ + 104.045719, + 30.790713 + ], + [ + 104.045719, + 30.789679 + ], + [ + 104.04632, + 30.789349 + ], + [ + 104.046448, + 30.789902 + ], + [ + 104.046835, + 30.790455 + ], + [ + 104.047908, + 30.790086 + ], + [ + 104.049625, + 30.788685 + ], + [ + 104.052157, + 30.789828 + ], + [ + 104.052844, + 30.789865 + ], + [ + 104.053531, + 30.789424 + ], + [ + 104.053445, + 30.788906 + ], + [ + 104.052329, + 30.788427 + ], + [ + 104.051986, + 30.7878 + ], + [ + 104.0522, + 30.787579 + ], + [ + 104.053831, + 30.787912 + ], + [ + 104.054518, + 30.787802 + ], + [ + 104.054947, + 30.787654 + ], + [ + 104.055075, + 30.786845 + ], + [ + 104.05762, + 30.788356 + ], + [ + 104.057133, + 30.787871 + ], + [ + 104.056297, + 30.785894 + ], + [ + 104.056315, + 30.784938 + ], + [ + 104.056724, + 30.78422 + ], + [ + 104.057481, + 30.78354 + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "三河街道区块", + "address": "四川省 成都市 新都区 三河街道", + "featureId": "88510114003" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [ + 104.151044, + 30.783699 + ], + [ + 104.152847, + 30.785985 + ], + [ + 104.153962, + 30.788566 + ], + [ + 104.154736, + 30.790999 + ], + [ + 104.156195, + 30.791737 + ], + [ + 104.157997, + 30.791884 + ], + [ + 104.159371, + 30.791737 + ], + [ + 104.160916, + 30.790262 + ], + [ + 104.162117, + 30.78864 + ], + [ + 104.163319, + 30.788198 + ], + [ + 104.165379, + 30.789377 + ], + [ + 104.166237, + 30.790852 + ], + [ + 104.16761, + 30.791294 + ], + [ + 104.168984, + 30.791294 + ], + [ + 104.170529, + 30.79041 + ], + [ + 104.171044, + 30.788935 + ], + [ + 104.170357, + 30.78746 + ], + [ + 104.170014, + 30.785543 + ], + [ + 104.17173, + 30.784068 + ], + [ + 104.174133, + 30.783773 + ], + [ + 104.17688, + 30.784068 + ], + [ + 104.179455, + 30.784658 + ], + [ + 104.182545, + 30.786575 + ], + [ + 104.183575, + 30.78746 + ], + [ + 104.184776, + 30.789082 + ], + [ + 104.186493, + 30.790999 + ], + [ + 104.187694, + 30.790999 + ], + [ + 104.188691, + 30.790571 + ], + [ + 104.18495, + 30.785249 + ], + [ + 104.184178, + 30.783627 + ], + [ + 104.182871, + 30.781776 + ], + [ + 104.1833, + 30.781113 + ], + [ + 104.181927, + 30.780523 + ], + [ + 104.180554, + 30.777352 + ], + [ + 104.18124, + 30.777131 + ], + [ + 104.180296, + 30.776615 + ], + [ + 104.180897, + 30.776467 + ], + [ + 104.180125, + 30.776393 + ], + [ + 104.179696, + 30.775951 + ], + [ + 104.180382, + 30.775877 + ], + [ + 104.180039, + 30.775435 + ], + [ + 104.179696, + 30.775508 + ], + [ + 104.178666, + 30.77396 + ], + [ + 104.179181, + 30.772706 + ], + [ + 104.179867, + 30.771747 + ], + [ + 104.179953, + 30.77101 + ], + [ + 104.18064, + 30.770567 + ], + [ + 104.181326, + 30.770494 + ], + [ + 104.182099, + 30.770051 + ], + [ + 104.1827, + 30.770199 + ], + [ + 104.182785, + 30.769683 + ], + [ + 104.183558, + 30.769609 + ], + [ + 104.183043, + 30.769019 + ], + [ + 104.183215, + 30.76806 + ], + [ + 104.183987, + 30.767544 + ], + [ + 104.183472, + 30.767028 + ], + [ + 104.182785, + 30.767028 + ], + [ + 104.181927, + 30.767544 + ], + [ + 104.181412, + 30.766806 + ], + [ + 104.180811, + 30.766511 + ], + [ + 104.180983, + 30.765921 + ], + [ + 104.180554, + 30.765184 + ], + [ + 104.181412, + 30.764667 + ], + [ + 104.181326, + 30.764151 + ], + [ + 104.18167, + 30.763709 + ], + [ + 104.180296, + 30.761644 + ], + [ + 104.181069, + 30.760759 + ], + [ + 104.180554, + 30.759505 + ], + [ + 104.181584, + 30.759136 + ], + [ + 104.183987, + 30.757144 + ], + [ + 104.184931, + 30.756849 + ], + [ + 104.185274, + 30.756186 + ], + [ + 104.185103, + 30.755374 + ], + [ + 104.185961, + 30.755079 + ], + [ + 104.186047, + 30.754415 + ], + [ + 104.186476, + 30.754342 + ], + [ + 104.185017, + 30.753604 + ], + [ + 104.185189, + 30.752793 + ], + [ + 104.185446, + 30.752424 + ], + [ + 104.185189, + 30.749916 + ], + [ + 104.181584, + 30.748293 + ], + [ + 104.181326, + 30.748736 + ], + [ + 104.180382, + 30.748367 + ], + [ + 104.180468, + 30.747703 + ], + [ + 104.180125, + 30.747851 + ], + [ + 104.179867, + 30.748514 + ], + [ + 104.179009, + 30.747408 + ], + [ + 104.177292, + 30.747924 + ], + [ + 104.176949, + 30.74667 + ], + [ + 104.176262, + 30.746449 + ], + [ + 104.176777, + 30.74608 + ], + [ + 104.176091, + 30.745785 + ], + [ + 104.17652, + 30.745416 + ], + [ + 104.175919, + 30.743572 + ], + [ + 104.174546, + 30.74372 + ], + [ + 104.17343, + 30.74549 + ], + [ + 104.172057, + 30.745269 + ], + [ + 104.169825, + 30.746523 + ], + [ + 104.16828, + 30.74667 + ], + [ + 104.167508, + 30.745859 + ], + [ + 104.167593, + 30.745195 + ], + [ + 104.166993, + 30.744605 + ], + [ + 104.166392, + 30.742244 + ], + [ + 104.166993, + 30.741728 + ], + [ + 104.165362, + 30.740031 + ], + [ + 104.16416, + 30.738482 + ], + [ + 104.162792, + 30.737605 + ], + [ + 104.16016, + 30.738416 + ], + [ + 104.157726, + 30.738856 + ], + [ + 104.153782, + 30.739057 + ], + [ + 104.14678, + 30.739067 + ], + [ + 104.143885, + 30.73885 + ], + [ + 104.14281, + 30.738576 + ], + [ + 104.142255, + 30.738217 + ], + [ + 104.141267, + 30.737224 + ], + [ + 104.138918, + 30.73597 + ], + [ + 104.137583, + 30.735694 + ], + [ + 104.136411, + 30.735986 + ], + [ + 104.133403, + 30.737621 + ], + [ + 104.133204, + 30.738099 + ], + [ + 104.133403, + 30.738318 + ], + [ + 104.134972, + 30.739186 + ], + [ + 104.136602, + 30.739421 + ], + [ + 104.137592, + 30.739947 + ], + [ + 104.140076, + 30.740726 + ], + [ + 104.14085, + 30.741104 + ], + [ + 104.141362, + 30.741816 + ], + [ + 104.141269, + 30.742563 + ], + [ + 104.140832, + 30.743084 + ], + [ + 104.139615, + 30.743994 + ], + [ + 104.13995, + 30.745806 + ], + [ + 104.139829, + 30.748972 + ], + [ + 104.138962, + 30.758255 + ], + [ + 104.138399, + 30.760873 + ], + [ + 104.137827, + 30.761976 + ], + [ + 104.137194, + 30.76272 + ], + [ + 104.134722, + 30.764501 + ], + [ + 104.133569, + 30.765148 + ], + [ + 104.132321, + 30.76557 + ], + [ + 104.130032, + 30.765722 + ], + [ + 104.123483, + 30.765462 + ], + [ + 104.122069, + 30.76566 + ], + [ + 104.120664, + 30.76612 + ], + [ + 104.118955, + 30.767026 + ], + [ + 104.117827, + 30.767832 + ], + [ + 104.117211, + 30.768575 + ], + [ + 104.116934, + 30.76927 + ], + [ + 104.116951, + 30.770039 + ], + [ + 104.117142, + 30.770696 + ], + [ + 104.117619, + 30.771289 + ], + [ + 104.12377, + 30.775419 + ], + [ + 104.125341, + 30.776842 + ], + [ + 104.125653, + 30.777436 + ], + [ + 104.125783, + 30.778528 + ], + [ + 104.125696, + 30.779642 + ], + [ + 104.125192, + 30.780946 + ], + [ + 104.124238, + 30.782527 + ], + [ + 104.122981, + 30.783742 + ], + [ + 104.121142, + 30.784934 + ], + [ + 104.119312, + 30.785703 + ], + [ + 104.117039, + 30.786149 + ], + [ + 104.11302, + 30.786623 + ], + [ + 104.110894, + 30.787021 + ], + [ + 104.108829, + 30.787616 + ], + [ + 104.10744, + 30.788161 + ], + [ + 104.106372, + 30.788817 + ], + [ + 104.104619, + 30.790339 + ], + [ + 104.10564, + 30.791218 + ], + [ + 104.105983, + 30.791955 + ], + [ + 104.107443, + 30.793503 + ], + [ + 104.10873, + 30.794314 + ], + [ + 104.10916, + 30.794314 + ], + [ + 104.110447, + 30.793652 + ], + [ + 104.111048, + 30.793578 + ], + [ + 104.111541, + 30.793105 + ], + [ + 104.113018, + 30.792102 + ], + [ + 104.11774, + 30.79048 + ], + [ + 104.1198, + 30.789595 + ], + [ + 104.120916, + 30.789449 + ], + [ + 104.122546, + 30.789006 + ], + [ + 104.124606, + 30.788122 + ], + [ + 104.126238, + 30.787827 + ], + [ + 104.128041, + 30.788048 + ], + [ + 104.130873, + 30.788712 + ], + [ + 104.134478, + 30.788565 + ], + [ + 104.136452, + 30.789819 + ], + [ + 104.138341, + 30.790482 + ], + [ + 104.140058, + 30.790703 + ], + [ + 104.141689, + 30.790408 + ], + [ + 104.14598, + 30.7865 + ], + [ + 104.14701, + 30.785763 + ], + [ + 104.148898, + 30.783773 + ], + [ + 104.150014, + 30.783405 + ], + [ + 104.151044, + 30.783699 + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "新都镇区块", + "address": "四川省 成都市 新都区 新都镇", + "featureId": "88510114100" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [ + 104.154736, + 30.790999 + ], + [ + 104.153962, + 30.788566 + ], + [ + 104.152847, + 30.785985 + ], + [ + 104.151044, + 30.783699 + ], + [ + 104.150014, + 30.783405 + ], + [ + 104.148898, + 30.783773 + ], + [ + 104.14701, + 30.785763 + ], + [ + 104.14598, + 30.7865 + ], + [ + 104.141689, + 30.790408 + ], + [ + 104.140058, + 30.790703 + ], + [ + 104.138341, + 30.790482 + ], + [ + 104.136452, + 30.789819 + ], + [ + 104.134478, + 30.788565 + ], + [ + 104.130873, + 30.788712 + ], + [ + 104.128041, + 30.788048 + ], + [ + 104.126238, + 30.787827 + ], + [ + 104.124606, + 30.788122 + ], + [ + 104.122546, + 30.789006 + ], + [ + 104.120916, + 30.789449 + ], + [ + 104.1198, + 30.789595 + ], + [ + 104.11774, + 30.79048 + ], + [ + 104.113018, + 30.792102 + ], + [ + 104.111541, + 30.793105 + ], + [ + 104.111477, + 30.794684 + ], + [ + 104.11241, + 30.795834 + ], + [ + 104.11182, + 30.796232 + ], + [ + 104.112668, + 30.797751 + ], + [ + 104.112164, + 30.798297 + ], + [ + 104.112421, + 30.79896 + ], + [ + 104.111906, + 30.799402 + ], + [ + 104.111123, + 30.799668 + ], + [ + 104.110951, + 30.800405 + ], + [ + 104.108548, + 30.80092 + ], + [ + 104.107861, + 30.801436 + ], + [ + 104.107861, + 30.802247 + ], + [ + 104.108473, + 30.802203 + ], + [ + 104.10873, + 30.802645 + ], + [ + 104.10873, + 30.803309 + ], + [ + 104.106487, + 30.803648 + ], + [ + 104.107689, + 30.804312 + ], + [ + 104.108033, + 30.805344 + ], + [ + 104.108548, + 30.806228 + ], + [ + 104.109406, + 30.806671 + ], + [ + 104.110779, + 30.806082 + ], + [ + 104.111134, + 30.805005 + ], + [ + 104.112936, + 30.803678 + ], + [ + 104.113623, + 30.803384 + ], + [ + 104.114309, + 30.803457 + ], + [ + 104.11491, + 30.802573 + ], + [ + 104.115941, + 30.803457 + ], + [ + 104.116016, + 30.802912 + ], + [ + 104.117303, + 30.802764 + ], + [ + 104.117647, + 30.804313 + ], + [ + 104.117486, + 30.805743 + ], + [ + 104.117818, + 30.806229 + ], + [ + 104.118591, + 30.805492 + ], + [ + 104.119063, + 30.804664 + ], + [ + 104.119707, + 30.804386 + ], + [ + 104.120651, + 30.806451 + ], + [ + 104.118763, + 30.807704 + ], + [ + 104.118763, + 30.808367 + ], + [ + 104.119546, + 30.808691 + ], + [ + 104.119718, + 30.808397 + ], + [ + 104.120233, + 30.808692 + ], + [ + 104.120404, + 30.810093 + ], + [ + 104.121778, + 30.810609 + ], + [ + 104.121349, + 30.810756 + ], + [ + 104.120404, + 30.810535 + ], + [ + 104.121778, + 30.811641 + ], + [ + 104.122035, + 30.812083 + ], + [ + 104.121177, + 30.812378 + ], + [ + 104.118945, + 30.812377 + ], + [ + 104.117658, + 30.811935 + ], + [ + 104.116456, + 30.811935 + ], + [ + 104.115082, + 30.812377 + ], + [ + 104.113966, + 30.812377 + ], + [ + 104.113365, + 30.812672 + ], + [ + 104.112679, + 30.813262 + ], + [ + 104.11225, + 30.816505 + ], + [ + 104.11328, + 30.817463 + ], + [ + 104.113795, + 30.817758 + ], + [ + 104.11388, + 30.818422 + ], + [ + 104.113451, + 30.819085 + ], + [ + 104.112936, + 30.819454 + ], + [ + 104.113537, + 30.820854 + ], + [ + 104.114309, + 30.82137 + ], + [ + 104.114996, + 30.821444 + ], + [ + 104.115339, + 30.821296 + ], + [ + 104.115941, + 30.821296 + ], + [ + 104.116199, + 30.821591 + ], + [ + 104.115511, + 30.822181 + ], + [ + 104.115254, + 30.822771 + ], + [ + 104.11491, + 30.822844 + ], + [ + 104.114567, + 30.823434 + ], + [ + 104.115254, + 30.824687 + ], + [ + 104.115683, + 30.824466 + ], + [ + 104.117057, + 30.824613 + ], + [ + 104.118173, + 30.824318 + ], + [ + 104.117915, + 30.824761 + ], + [ + 104.118001, + 30.825277 + ], + [ + 104.117658, + 30.825793 + ], + [ + 104.117143, + 30.826161 + ], + [ + 104.117486, + 30.826824 + ], + [ + 104.118945, + 30.82653 + ], + [ + 104.120147, + 30.827636 + ], + [ + 104.120061, + 30.828078 + ], + [ + 104.118688, + 30.829625 + ], + [ + 104.118945, + 30.830657 + ], + [ + 104.119375, + 30.830731 + ], + [ + 104.120061, + 30.830584 + ], + [ + 104.12049, + 30.83169 + ], + [ + 104.119889, + 30.832427 + ], + [ + 104.12125, + 30.832024 + ], + [ + 104.122108, + 30.83136 + ], + [ + 104.122881, + 30.830476 + ], + [ + 104.123224, + 30.831655 + ], + [ + 104.123825, + 30.831655 + ], + [ + 104.124683, + 30.831287 + ], + [ + 104.126401, + 30.831508 + ], + [ + 104.128289, + 30.832908 + ], + [ + 104.12889, + 30.833056 + ], + [ + 104.129748, + 30.832761 + ], + [ + 104.129834, + 30.833645 + ], + [ + 104.13095, + 30.833277 + ], + [ + 104.131208, + 30.832908 + ], + [ + 104.13198, + 30.832909 + ], + [ + 104.132323, + 30.833499 + ], + [ + 104.132838, + 30.833794 + ], + [ + 104.132066, + 30.834309 + ], + [ + 104.132581, + 30.835268 + ], + [ + 104.134469, + 30.835046 + ], + [ + 104.134393, + 30.835662 + ], + [ + 104.133878, + 30.836473 + ], + [ + 104.133363, + 30.836473 + ], + [ + 104.13362, + 30.836841 + ], + [ + 104.133535, + 30.837357 + ], + [ + 104.13302, + 30.837505 + ], + [ + 104.134393, + 30.838315 + ], + [ + 104.134393, + 30.838831 + ], + [ + 104.134994, + 30.839126 + ], + [ + 104.136796, + 30.838979 + ], + [ + 104.137312, + 30.838684 + ], + [ + 104.138685, + 30.838315 + ], + [ + 104.139544, + 30.838463 + ], + [ + 104.13963, + 30.837873 + ], + [ + 104.140563, + 30.838512 + ], + [ + 104.140907, + 30.838291 + ], + [ + 104.140316, + 30.837505 + ], + [ + 104.141432, + 30.83721 + ], + [ + 104.142205, + 30.836841 + ], + [ + 104.143835, + 30.836841 + ], + [ + 104.143825, + 30.836375 + ], + [ + 104.144168, + 30.836228 + ], + [ + 104.146228, + 30.836007 + ], + [ + 104.146582, + 30.837505 + ], + [ + 104.147269, + 30.838169 + ], + [ + 104.147955, + 30.839201 + ], + [ + 104.149243, + 30.841854 + ], + [ + 104.151035, + 30.847135 + ], + [ + 104.149661, + 30.847355 + ], + [ + 104.149672, + 30.848044 + ], + [ + 104.150015, + 30.848633 + ], + [ + 104.149243, + 30.848633 + ], + [ + 104.148631, + 30.84883 + ], + [ + 104.148299, + 30.850991 + ], + [ + 104.147516, + 30.85082 + ], + [ + 104.147344, + 30.851262 + ], + [ + 104.148127, + 30.851507 + ], + [ + 104.148631, + 30.851997 + ], + [ + 104.148288, + 30.853545 + ], + [ + 104.149157, + 30.855486 + ], + [ + 104.149758, + 30.855854 + ], + [ + 104.147183, + 30.856296 + ], + [ + 104.14744, + 30.85696 + ], + [ + 104.14744, + 30.857475 + ], + [ + 104.147784, + 30.858065 + ], + [ + 104.149586, + 30.860423 + ], + [ + 104.151131, + 30.86138 + ], + [ + 104.152333, + 30.861454 + ], + [ + 104.153277, + 30.861675 + ], + [ + 104.154212, + 30.860322 + ], + [ + 104.153868, + 30.859585 + ], + [ + 104.154479, + 30.859244 + ], + [ + 104.154898, + 30.858777 + ], + [ + 104.15634, + 30.859901 + ], + [ + 104.156443, + 30.860472 + ], + [ + 104.156014, + 30.86143 + ], + [ + 104.156357, + 30.861872 + ], + [ + 104.157044, + 30.861651 + ], + [ + 104.157645, + 30.860546 + ], + [ + 104.157791, + 30.859657 + ], + [ + 104.158599, + 30.859465 + ], + [ + 104.159286, + 30.860423 + ], + [ + 104.160659, + 30.86138 + ], + [ + 104.161174, + 30.862633 + ], + [ + 104.162118, + 30.863149 + ], + [ + 104.163406, + 30.863149 + ], + [ + 104.164178, + 30.862707 + ], + [ + 104.165547, + 30.863323 + ], + [ + 104.166677, + 30.862338 + ], + [ + 104.166419, + 30.861676 + ], + [ + 104.166731, + 30.860939 + ], + [ + 104.166618, + 30.860635 + ], + [ + 104.165614, + 30.860227 + ], + [ + 104.165297, + 30.859928 + ], + [ + 104.165229, + 30.859195 + ], + [ + 104.165628, + 30.858557 + ], + [ + 104.166681, + 30.858381 + ], + [ + 104.166729, + 30.857813 + ], + [ + 104.16714, + 30.857144 + ], + [ + 104.16721, + 30.856206 + ], + [ + 104.168386, + 30.855275 + ], + [ + 104.168694, + 30.85519 + ], + [ + 104.169462, + 30.855279 + ], + [ + 104.169939, + 30.856238 + ], + [ + 104.170954, + 30.856875 + ], + [ + 104.171373, + 30.858245 + ], + [ + 104.171814, + 30.859086 + ], + [ + 104.172428, + 30.859784 + ], + [ + 104.173507, + 30.861531 + ], + [ + 104.17392, + 30.863194 + ], + [ + 104.174852, + 30.863731 + ], + [ + 104.176732, + 30.864362 + ], + [ + 104.178872, + 30.86474 + ], + [ + 104.180908, + 30.864879 + ], + [ + 104.184426, + 30.864742 + ], + [ + 104.186393, + 30.86438 + ], + [ + 104.187761, + 30.863931 + ], + [ + 104.189728, + 30.862774 + ], + [ + 104.192622, + 30.85966 + ], + [ + 104.194277, + 30.858614 + ], + [ + 104.195126, + 30.858389 + ], + [ + 104.197154, + 30.858405 + ], + [ + 104.199148, + 30.859157 + ], + [ + 104.200075, + 30.859937 + ], + [ + 104.203629, + 30.863972 + ], + [ + 104.204851, + 30.865177 + ], + [ + 104.205657, + 30.865771 + ], + [ + 104.206176, + 30.865894 + ], + [ + 104.206679, + 30.865833 + ], + [ + 104.207216, + 30.865534 + ], + [ + 104.207814, + 30.864902 + ], + [ + 104.209201, + 30.861955 + ], + [ + 104.209773, + 30.861333 + ], + [ + 104.210215, + 30.861085 + ], + [ + 104.21123, + 30.861331 + ], + [ + 104.213337, + 30.862953 + ], + [ + 104.214091, + 30.863349 + ], + [ + 104.21514, + 30.863618 + ], + [ + 104.217923, + 30.863671 + ], + [ + 104.220316, + 30.863073 + ], + [ + 104.225953, + 30.86067 + ], + [ + 104.226781, + 30.860188 + ], + [ + 104.227983, + 30.859489 + ], + [ + 104.231079, + 30.858135 + ], + [ + 104.232562, + 30.857292 + ], + [ + 104.234382, + 30.855859 + ], + [ + 104.23638, + 30.85385 + ], + [ + 104.239894, + 30.849764 + ], + [ + 104.240258, + 30.84912 + ], + [ + 104.24044, + 30.848425 + ], + [ + 104.24018, + 30.847161 + ], + [ + 104.239053, + 30.845443 + ], + [ + 104.238714, + 30.844364 + ], + [ + 104.238723, + 30.843752 + ], + [ + 104.239137, + 30.84263 + ], + [ + 104.239469, + 30.842654 + ], + [ + 104.24, + 30.842316 + ], + [ + 104.240232, + 30.842318 + ], + [ + 104.240475, + 30.842724 + ], + [ + 104.240368, + 30.843229 + ], + [ + 104.24063, + 30.843493 + ], + [ + 104.241623, + 30.843479 + ], + [ + 104.24216, + 30.8432 + ], + [ + 104.24246, + 30.842584 + ], + [ + 104.242265, + 30.841862 + ], + [ + 104.242389, + 30.841468 + ], + [ + 104.24278, + 30.841177 + ], + [ + 104.243645, + 30.840877 + ], + [ + 104.244303, + 30.839656 + ], + [ + 104.246716, + 30.838567 + ], + [ + 104.247193, + 30.838152 + ], + [ + 104.247593, + 30.83737 + ], + [ + 104.247584, + 30.836969 + ], + [ + 104.247237, + 30.836361 + ], + [ + 104.244763, + 30.83584 + ], + [ + 104.244155, + 30.835623 + ], + [ + 104.243816, + 30.835402 + ], + [ + 104.243695, + 30.835146 + ], + [ + 104.243842, + 30.833997 + ], + [ + 104.245926, + 30.831838 + ], + [ + 104.246221, + 30.831237 + ], + [ + 104.246264, + 30.830652 + ], + [ + 104.245856, + 30.830034 + ], + [ + 104.245422, + 30.82981 + ], + [ + 104.244814, + 30.829687 + ], + [ + 104.243434, + 30.829887 + ], + [ + 104.242627, + 30.830189 + ], + [ + 104.237316, + 30.833501 + ], + [ + 104.236796, + 30.833639 + ], + [ + 104.236275, + 30.833478 + ], + [ + 104.23585, + 30.833031 + ], + [ + 104.231624, + 30.825289 + ], + [ + 104.231207, + 30.824058 + ], + [ + 104.230964, + 30.822662 + ], + [ + 104.231086, + 30.821081 + ], + [ + 104.231641, + 30.81958 + ], + [ + 104.232691, + 30.817973 + ], + [ + 104.234985, + 30.815691 + ], + [ + 104.23464, + 30.815324 + ], + [ + 104.233685, + 30.815375 + ], + [ + 104.233513, + 30.815891 + ], + [ + 104.232655, + 30.815891 + ], + [ + 104.232065, + 30.816651 + ], + [ + 104.23111, + 30.81626 + ], + [ + 104.23111, + 30.817218 + ], + [ + 104.230509, + 30.818103 + ], + [ + 104.229234, + 30.817757 + ], + [ + 104.228719, + 30.817978 + ], + [ + 104.227677, + 30.817514 + ], + [ + 104.227088, + 30.818495 + ], + [ + 104.225961, + 30.818693 + ], + [ + 104.225017, + 30.818177 + ], + [ + 104.225103, + 30.817292 + ], + [ + 104.2233, + 30.816703 + ], + [ + 104.224073, + 30.814565 + ], + [ + 104.223987, + 30.813681 + ], + [ + 104.22536, + 30.813681 + ], + [ + 104.225024, + 30.811259 + ], + [ + 104.224674, + 30.810732 + ], + [ + 104.222185, + 30.811764 + ], + [ + 104.221509, + 30.810534 + ], + [ + 104.220736, + 30.810534 + ], + [ + 104.220211, + 30.81029 + ], + [ + 104.218848, + 30.810902 + ], + [ + 104.21842, + 30.810902 + ], + [ + 104.217819, + 30.811419 + ], + [ + 104.217132, + 30.810313 + ], + [ + 104.21678, + 30.811101 + ], + [ + 104.215922, + 30.811027 + ], + [ + 104.216265, + 30.810658 + ], + [ + 104.215578, + 30.810142 + ], + [ + 104.215321, + 30.81029 + ], + [ + 104.21472, + 30.809626 + ], + [ + 104.215063, + 30.808889 + ], + [ + 104.214634, + 30.808889 + ], + [ + 104.214548, + 30.808153 + ], + [ + 104.213948, + 30.807932 + ], + [ + 104.214205, + 30.807416 + ], + [ + 104.21369, + 30.805499 + ], + [ + 104.212746, + 30.804393 + ], + [ + 104.211802, + 30.803877 + ], + [ + 104.212317, + 30.803582 + ], + [ + 104.212317, + 30.803066 + ], + [ + 104.213004, + 30.802919 + ], + [ + 104.213442, + 30.802131 + ], + [ + 104.212145, + 30.801444 + ], + [ + 104.211716, + 30.801371 + ], + [ + 104.211888, + 30.800781 + ], + [ + 104.213089, + 30.800928 + ], + [ + 104.214978, + 30.799527 + ], + [ + 104.216179, + 30.799453 + ], + [ + 104.217209, + 30.798126 + ], + [ + 104.219384, + 30.797065 + ], + [ + 104.218248, + 30.796159 + ], + [ + 104.216532, + 30.795421 + ], + [ + 104.213442, + 30.794832 + ], + [ + 104.212069, + 30.794243 + ], + [ + 104.210695, + 30.79321 + ], + [ + 104.21018, + 30.792178 + ], + [ + 104.208979, + 30.791441 + ], + [ + 104.207777, + 30.791441 + ], + [ + 104.206575, + 30.790556 + ], + [ + 104.206404, + 30.789966 + ], + [ + 104.204517, + 30.789229 + ], + [ + 104.201427, + 30.789229 + ], + [ + 104.196792, + 30.787018 + ], + [ + 104.194732, + 30.786428 + ], + [ + 104.192329, + 30.78746 + ], + [ + 104.19044, + 30.788935 + ], + [ + 104.18941, + 30.790262 + ], + [ + 104.188691, + 30.790571 + ], + [ + 104.187694, + 30.790999 + ], + [ + 104.186493, + 30.790999 + ], + [ + 104.184776, + 30.789082 + ], + [ + 104.183575, + 30.78746 + ], + [ + 104.182545, + 30.786575 + ], + [ + 104.179455, + 30.784658 + ], + [ + 104.17688, + 30.784068 + ], + [ + 104.174133, + 30.783773 + ], + [ + 104.17173, + 30.784068 + ], + [ + 104.170014, + 30.785543 + ], + [ + 104.170357, + 30.78746 + ], + [ + 104.171044, + 30.788935 + ], + [ + 104.170529, + 30.79041 + ], + [ + 104.168984, + 30.791294 + ], + [ + 104.16761, + 30.791294 + ], + [ + 104.166237, + 30.790852 + ], + [ + 104.165379, + 30.789377 + ], + [ + 104.163319, + 30.788198 + ], + [ + 104.162117, + 30.78864 + ], + [ + 104.160916, + 30.790262 + ], + [ + 104.159371, + 30.791737 + ], + [ + 104.157997, + 30.791884 + ], + [ + 104.156195, + 30.791737 + ], + [ + 104.154736, + 30.790999 + ] + ] + ] + } + } + ] +} + export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - 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) - .color('w', [ '#0e0030', '#0e0030', '#0e0030' ]) - .style({ - // textAllowOverlap: true, - 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); - setTimeout(()=>{ - - },2000) - }); - - }); - - }, []); + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + style: 'normal', + center: [104.288144, 31.239692], + zoom: 10 + }) + }) + + + scene.on('loaded', () => { + const polygonLayer = new PolygonLayer({}).source(polygonLayerData) + polygonLayer + .color("name", [ + "rgb(239,243,255)", + "rgb(189,215,231)", + "rgb(107,174,214)", + "rgb(49,130,189)", + ]) + .shape("fill") + .active(true) + .style({ + opacity: 0.8, + }) + + + // 图层边界 + const lineLayer = new LineLayer({ + zIndex: 0 + }).source(polygonLayerData) + .color("rgb(93,112,146)") + .size(0.6) + .style({ + opacity: 1 + }); + + + const labelLayer = new PointLayer({ + zIndex: 1, + autoFit: true + }) + .source(polygonLayerData) + .color("black") + .shape("name", "text") + .size(15) + .style({ + opacity: 1, + fontFamily:'fangsong', + stroke: "#fff", + strokeWidth: 1, + padding: [0, 0], + textAllowOverlap: false + }); + + + + scene.addLayer(polygonLayer); + scene.addLayer(lineLayer); + scene.addLayer(labelLayer); + setTimeout(() => { + + labelLayer.style({ + // fontFamily:'cursive', + // textAnchor: 'top', + textOffset:[20,10] + + + }) + scene.render(); + + },2000) + }) + return (
{ return icon.id === id; }); @@ -58,9 +53,8 @@ export default class IconService extends EventEmitter implements IIconService { iconImage.height = imagedata.height; } this.update(); - } - + /** * 适配小程序 * @param id diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 48548d9030..ac7a977a6a 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -12,17 +12,14 @@ import { import { getMask, PointFillTriangulation } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; -import { IPointLayerStyleOptions } from '../../core/interface'; +import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; // animate pointLayer shader - support animate import waveFillFrag from '../shaders/animate/wave_frag.glsl'; // static pointLayer shader - not support animate import pointFillFrag from '../shaders/fill_frag.glsl'; import pointFillVert from '../shaders/fill_vert.glsl'; -import { SizeUnitType } from '../../core/interface' - export default class FillModel extends BaseModel { - public getUninforms(): IModelUniform { const { opacity = 1, @@ -100,9 +97,8 @@ export default class FillModel extends BaseModel { }; } public getAnimateUniforms(): IModelUniform { - const { - animateOption = { enable: false }, - } = this.layer.getLayerConfig() as ILayerConfig; + const { animateOption = { enable: false } } = + this.layer.getLayerConfig() as ILayerConfig; return { u_animate: this.animateOption2Array(animateOption), u_time: this.layer.getLayerAnimateTime(), @@ -122,10 +118,10 @@ export default class FillModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { + public async buildModels(): Promise { const { mask = false, maskInside = true, @@ -139,32 +135,33 @@ export default class FillModel extends BaseModel { const { frag, vert, type } = this.getShaders(animateOption); this.layer.triangulation = PointFillTriangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: type, - vertexShader: vert, - fragmentShader: frag, - triangulation: PointFillTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - workerEnabled, - workerOptions: { - modelType: type, - enablePicking, - shape2d, - }, - }); - return [model]; + const model = await this.layer.buildLayerModel({ + moduleName: type, + vertexShader: vert, + fragmentShader: frag, + triangulation: PointFillTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + workerEnabled, + workerOptions: { + modelType: type, + enablePicking, + shape2d, + }, + }); + return [model]; } /** * 根据 animateOption 的值返回对应的 shader 代码 * @returns */ - public getShaders( - animateOption: Partial, - ): { frag: string; vert: string; type: string } { + public getShaders(animateOption: Partial): { + frag: string; + vert: string; + type: string; + } { if (animateOption.enable) { switch (animateOption.type) { case 'wave': @@ -242,9 +239,7 @@ export default class FillModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 5 } = feature; return Array.isArray(size) ? [size[0]] : [size]; }, @@ -264,9 +259,7 @@ export default class FillModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { shape = 2 } = feature; const shapeIndex = shape2d.indexOf(shape as string); return [shapeIndex]; @@ -274,6 +267,4 @@ export default class FillModel extends BaseModel { }, }); } - - } diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index e0251a5f37..d119e97fdd 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -11,12 +11,11 @@ import { import { getCullFace, getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; -import { IPointLayerStyleOptions } from '../../core/interface'; +import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; import { PointFillTriangulation } from '../../core/triangulation'; // static pointLayer shader - not support animate import pointFillFrag from '../shaders/image/fillImage_frag.glsl'; import pointFillVert from '../shaders/image/fillImage_vert.glsl'; -import { SizeUnitType } from '../../core/interface' export default class FillImageModel extends BaseModel { private meter2coord: number = 1; @@ -132,35 +131,29 @@ export default class FillImageModel extends BaseModel { ); } - public async initModels():Promise { + public async initModels(): Promise { this.iconService.on('imageUpdate', this.updateTexture); this.updateTexture(); - return await this.buildModels(); + return this.buildModels(); } - - - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointFillImage', - vertexShader: pointFillVert, - fragmentShader: pointFillFrag, - triangulation: PointFillTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - cull: { - enable: true, - face: getCullFace(this.mapService.version), - }, - }); - return [model] - + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'pointFillImage', + vertexShader: pointFillVert, + fragmentShader: pointFillFrag, + triangulation: PointFillTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, + }); + return [model]; } public clearModels() { @@ -182,9 +175,7 @@ export default class FillImageModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { rotate = 0 } = feature; return Array.isArray(rotate) ? [rotate[0]] : [rotate as number]; }, @@ -202,12 +193,10 @@ export default class FillImageModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { shape } = feature; - const { x, y } = iconMap[shape as string] || { x: 0, y: 0 }; + const { x, y } = iconMap[shape as string] || { x: -64, y: -64 }; return [x, y]; }, }, @@ -256,13 +245,9 @@ export default class FillImageModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 5 } = feature; - return Array.isArray(size) - ? [size[0]] - : [(size as number)]; + return Array.isArray(size) ? [size[0]] : [size as number]; }, }, }); diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index 2ce798a119..193eaee3d9 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -48,21 +48,21 @@ export default class ImageModel extends BaseModel { this.dataTexture = this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ - flipY: true, - data, - format: gl.LUMINANCE, - type: gl.FLOAT, - width, - height, - }) + flipY: true, + data, + format: gl.LUMINANCE, + type: gl.FLOAT, + width, + height, + }) : this.createTexture2D({ - flipY: true, - data: [1], - format: gl.LUMINANCE, - type: gl.FLOAT, - width: 1, - height: 1, - }); + flipY: true, + data: [1], + format: gl.LUMINANCE, + type: gl.FLOAT, + width: 1, + height: 1, + }); } return { u_raisingHeight: Number(raisingHeight), @@ -83,7 +83,7 @@ export default class ImageModel extends BaseModel { public async initModels(): Promise { this.iconService.on('imageUpdate', this.updateTexture); this.updateTexture(); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -93,25 +93,21 @@ export default class ImageModel extends BaseModel { } public async buildModels(): Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointImage', - vertexShader: pointImageVert, - fragmentShader: pointImageFrag, - triangulation: PointImageTriangulation, - depth: { enable: false }, - primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }); - - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'pointImage', + vertexShader: pointImageVert, + fragmentShader: pointImageFrag, + triangulation: PointImageTriangulation, + depth: { enable: false }, + primitive: gl.POINTS, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { // point layer size; @@ -127,9 +123,7 @@ export default class ImageModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 5 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -149,12 +143,10 @@ export default class ImageModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { shape } = feature; - const { x, y } = iconMap[shape as string] || { x: 0, y: 0 }; + const { x, y } = iconMap[shape as string] || { x: -64, y: -64 }; // 非画布区域，默认的图标改为透明 return [x, y]; }, }, @@ -172,9 +164,10 @@ export default class ImageModel extends BaseModel { }); // 更新完纹理后在更新的图层的时候需要更新所有的图层 // this.layer.layerModelNeedUpdate = true; - setTimeout(() => { // 延迟渲染 + setTimeout(() => { + // 延迟渲染 this.layerService.throttleRenderLayers(); - }) + }); return; } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index c06c1c10ab..6e20937165 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -12,7 +12,7 @@ import { getMask, padBounds, } from '@antv/l7-utils'; -import { isNumber } from 'lodash'; +import { isEqual, isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; import CollisionIndex from '../../utils/collision-index'; @@ -102,9 +102,6 @@ export default class TextModel extends BaseModel { opacity = 1.0, stroke = '#fff', strokeWidth = 0, - textAnchor = 'center', - textOffset, - textAllowOverlap = false, halo = 0.5, gamma = 2.0, raisingHeight = 0, @@ -116,11 +113,7 @@ export default class TextModel extends BaseModel { this.textCount = Object.keys(mapping).length; } - this.preTextStyle = { - textAnchor, - textAllowOverlap, - textOffset, - }; + this.preTextStyle = this.getTextStyle(); if ( this.dataTextureTest && @@ -176,85 +169,96 @@ export default class TextModel extends BaseModel { u_sdf_map: this.texture, u_halo_blur: halo, u_gamma_scale: gamma, - u_sdf_map_size: [canvas?.width || 1, canvas?.height ||1], + u_sdf_map_size: [canvas?.width || 1, canvas?.height || 1], }; } - public async initModels():Promise { - + public async initModels(): Promise { // 绑定事件 this.bindEvent(); this.extent = this.textExtent(); - const { - textAnchor = 'center', - textAllowOverlap = true, - textOffset, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - this.preTextStyle = { - textAnchor, - textAllowOverlap, - textOffset - }; - return await this.buildModels(); + this.preTextStyle = this.getTextStyle(); + return this.buildModels(); } - public async buildModels():Promise { + public async buildModels(): Promise { const { mask = false, maskInside = true, - textAllowOverlap = false + textAllowOverlap = false, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - - - // this.mapping(); 重复调用 - this.initGlyph(); // - this.updateTexture(); - if(!textAllowOverlap) { - this.filterGlyphs(); - } - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointText', - vertexShader: textVert, - fragmentShader: textFrag, - triangulation: TextTriangulation.bind(this), - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }); - return [model] - + + // this.mapping(); 重复调用 + this.initGlyph(); // + this.updateTexture(); + if (!textAllowOverlap) { + this.filterGlyphs(); + } + const model = await this.layer.buildLayerModel({ + moduleName: 'pointText', + vertexShader: textVert, + fragmentShader: textFrag, + triangulation: TextTriangulation.bind(this), + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } - - public async needUpdate():Promise { + // 需要更新的场景 + // 1. 文本偏移量发生改变 + // 2. 文本锚点发生改变 + // 3. 文本允许重叠发生改变 + // 4. 文本字体发生改变 + // 5. 文本字体粗细发生改变 + public async needUpdate(): Promise { const { textAllowOverlap = false, textAnchor = 'center', - textOffset - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - const data = this.layer.getEncodedData(); - if(JSON.stringify(textOffset) !==JSON.stringify(this.preTextStyle.textOffset) ||textAnchor!==this.preTextStyle.textAnchor ) { + textOffset, + padding, + fontFamily, + fontWeight, + } = this.getTextStyle() as IPointLayerStyleOptions; + if ( + !isEqual(padding, this.preTextStyle.padding) || + !isEqual(textOffset, this.preTextStyle.textOffset) || + !isEqual(textAnchor, this.preTextStyle.textAnchor) || + !isEqual(fontFamily, this.preTextStyle.fontFamily) || + !isEqual(fontWeight, this.preTextStyle.fontWeight) + ) { await this.mapping(); return true; } - if(data.length < 5 || textAllowOverlap) { // 小于不做避让 + + // if ( + // JSON.stringify(textOffset) !== + // JSON.stringify(this.preTextStyle.textOffset) || + // textAnchor !== this.preTextStyle.textAnchor + // ) { + // await this.mapping(); + // return true; + // } + if (textAllowOverlap) { + // 小于不做避让 return false; } - + // textAllowOverlap 发生改变 const zoom = this.mapService.getZoom(); const extent = this.mapService.getBounds(); const flag = boundsContains(this.extent, extent); // 文本不能压盖则进行过滤 if ( - ((Math.abs(this.currentZoom - zoom) > 1 || !flag)) || + Math.abs(this.currentZoom - zoom) > 0.5 || + !flag || textAllowOverlap !== this.preTextStyle.textAllowOverlap ) { // TODO this.mapping 数据未变化，避让 await this.reBuildModel(); return true; } - + return false; } @@ -277,9 +281,7 @@ export default class TextModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { rotate = 0 } = feature; return Array.isArray(rotate) ? [rotate[0]] : [rotate as number]; }, @@ -320,9 +322,7 @@ export default class TextModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 12 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -352,17 +352,17 @@ export default class TextModel extends BaseModel { } private bindEvent() { - if(!this.layer.isTileLayer) { + if (!this.layer.isTileLayer) { // 重新绑定 this.layer.on('remapping', this.mapping); } } - private mapping = async(): Promise =>{ + private mapping = async (): Promise => { this.initGlyph(); // this.updateTexture(); await this.reBuildModel(); - } + }; private textExtent(): [[number, number], [number, number]] { const bounds = this.mapService.getBounds(); @@ -372,10 +372,7 @@ export default class TextModel extends BaseModel { * 生成文字纹理（生成文字纹理字典） */ private initTextFont() { - const { - fontWeight = '400', - fontFamily = 'sans-serif', - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { fontWeight, fontFamily } = this.getTextStyle(); const data = this.layer.getEncodedData(); const characterSet: string[] = []; data.forEach((item: IEncodeFeature) => { @@ -400,10 +397,7 @@ export default class TextModel extends BaseModel { * 生成 iconfont 纹理字典 */ private initIconFontTex() { - const { - fontWeight = '400', - fontFamily = 'sans-serif', - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { fontWeight, fontFamily } = this.getTextStyle(); const data = this.layer.getEncodedData(); const characterSet: string[] = []; data.forEach((item: IEncodeFeature) => { @@ -421,6 +415,33 @@ export default class TextModel extends BaseModel { }); } + private getTextStyle() { + const { + fontWeight = '400', + fontFamily = 'sans-serif', + textAllowOverlap = false, + padding = [0, 0], + textAnchor = 'center', + textOffset = [0, 0], + opacity = 1, + strokeOpacity = 1, + strokeWidth = 0, + stroke = '#000', + } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + return { + fontWeight, + fontFamily, + textAllowOverlap, + padding, + textAnchor, + textOffset, + opacity, + strokeOpacity, + strokeWidth, + stroke, + }; + } + /** * 生成文字布局（对照文字纹理字典提取对应文字的位置很好信息） */ @@ -435,7 +456,7 @@ export default class TextModel extends BaseModel { const data = this.layer.getEncodedData(); this.glyphInfo = data.map((feature: IEncodeFeature) => { - const { shape = '', id, size = 1, } = feature; + const { shape = '', id, size = 1 } = feature; const shaping = shapeText( shape.toString(), @@ -445,7 +466,7 @@ export default class TextModel extends BaseModel { textAnchor, 'left', spacing, - textOffset || feature.textOffset || [0,0], + textOffset || feature.textOffset || [0, 0], iconfont, ); const glyphQuads = getGlyphQuads(shaping, textOffset, false); @@ -473,13 +494,10 @@ export default class TextModel extends BaseModel { * 文字避让 depend on originCentorid */ private filterGlyphs() { - const { - padding = [0, 0], - textAllowOverlap = false, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { padding = [0, 0], textAllowOverlap = false } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; if (textAllowOverlap) { // 如果允许文本覆盖 - // this.layer.setEncodedData(this.glyphInfo); return; } this.glyphInfoMap = {}; @@ -491,9 +509,11 @@ export default class TextModel extends BaseModel { const { shaping, id = 0 } = feature; // const centroid = feature.centroid as [number, number]; // const centroid = feature.originCentroid as [number, number]; - const centroid = (feature.version === 'GAODE2.x' - ? feature.originCentroid - : feature.centroid) as [number, number]; + const centroid = ( + feature.version === 'GAODE2.x' + ? feature.originCentroid + : feature.centroid + ) as [number, number]; const size = feature.size as number; const fontScale: number = size / 16; const pixels = this.mapService.lngLatToContainer(centroid); @@ -525,8 +545,6 @@ export default class TextModel extends BaseModel { const { iconfont = false } = this.layer.getLayerConfig(); // 1.生成文字纹理（或是生成 iconfont） iconfont ? this.initIconFontTex() : this.initTextFont(); - // this.initTextFont(); - // 2.生成文字布局 this.generateGlyphLayout(iconfont); } @@ -550,22 +568,19 @@ export default class TextModel extends BaseModel { } private async reBuildModel() { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - this.filterGlyphs(); - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointText', - vertexShader: textVert, - fragmentShader: textFrag, - triangulation: TextTriangulation.bind(this), - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }); - // TODO 渲染流程待修改 - this.layer.models = [model]; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; + this.filterGlyphs(); + const model = await this.layer.buildLayerModel({ + moduleName: 'pointText', + vertexShader: textVert, + fragmentShader: textFrag, + triangulation: TextTriangulation.bind(this), + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + // TODO 渲染流程待修改 + this.layer.models = [model]; } } diff --git a/packages/site/docs/common/layer/layer_encode.md b/packages/site/docs/common/layer/layer_encode.md index ba08837f54..16297a9760 100644 --- a/packages/site/docs/common/layer/layer_encode.md +++ b/packages/site/docs/common/layer/layer_encode.md @@ -212,7 +212,7 @@ layer.scale('value'); // L7 能够自动推断为 identify ```ts -pointLayer.size('type', (type) => { +pointLayer.filter('type', (type) => { // 回调函数 if (type === 'a') { return false; diff --git a/packages/source/src/utils/bandOperation/math.ts b/packages/source/src/utils/bandOperation/math.ts index c6371b817f..54c21e2314 100644 --- a/packages/source/src/utils/bandOperation/math.ts +++ b/packages/source/src/utils/bandOperation/math.ts @@ -1,133 +1,159 @@ - import { IRasterData } from '../../interface'; /** 数学运算 根据计算表达式进行数学运算 * * * Math operators: - * `['*', value1, value2]` + * `['*', value1, value2]` * `['/', value1, value2]` - * `['+', value1, value2]` - * `['-', value1, value2]` - * `['%', value1, value2]` - * `['^', value1, value2]` - * `['abs', value1]` - * `['floor', value1]` - * `['round', value1]` - * `['ceil', value1]` - * `['sin', value1]` - * `['cos', value1]` - * `['atan', value1, value2]` + * `['+', value1, value2]` + * `['-', value1, value2]` + * `['%', value1, value2]` + * `['^', value1, value2]` + * `['abs', value1]` + * `['floor', value1]` + * `['round', value1]` + * `['ceil', value1]` + * `['sin', value1]` + * `['cos', value1]` + * `['atan', value1, value2]` */ -export function mathematical(symbol: string, n1: number, n2: number) { - switch(symbol) { - case '+': return n1 + n2; - case '-': return n1 - n2; - case '*': return n1 * n2; - case '/': return n1 / n2; - case '%': return n1 % n2; +export function mathematical(symbol: string, n1: number, n2: number) { + switch (symbol) { + case '+': + return n1 + n2; + case '-': + return n1 - n2; + case '*': + return n1 * n2; + case '/': + return n1 / n2; + case '%': + return n1 % n2; - case '^': return Math.pow(n1, n2); - case 'abs': return Math.abs(n1); - case 'floor': return Math.floor(n1); - case 'round': return Math.round(n1); - case 'ceil': return Math.ceil(n1); - case 'sin': return Math.sin(n1); - case 'cos': return Math.cos(n1); - case 'atan': return (n2 === -1) ? Math.atan(n1): Math.atan2(n1, n2); - - default: - console.warn('Calculate symbol err! Return default 0'); - return 0; - } + case '^': + return Math.pow(n1, n2); + case 'abs': + return Math.abs(n1); + case 'floor': + return Math.floor(n1); + case 'round': + return Math.round(n1); + case 'ceil': + return Math.ceil(n1); + case 'sin': + return Math.sin(n1); + case 'cos': + return Math.cos(n1); + case 'atan': + return n2 === -1 ? Math.atan(n1) : Math.atan2(n1, n2); + case 'min': + return Math.min(n1, n2); + case 'max': + return Math.max(n1, n2); + case 'log10': + return Math.log(n1); + case 'log2': + return Math.log2(n1); + default: + console.warn('Calculate symbol err! Return default 0'); + return 0; + } } /** * 根据表达式计算 - * @param express - * @param bandsData + * @param express + * @param bandsData */ export function calculate(express: any[], bandsData: IRasterData[]) { - const {width, height} = bandsData[0]; - const dataArray = bandsData.map(band => band.rasterData) as Uint8Array[]; - const length = width * height; - const rasterData = []; - const originExp = JSON.stringify(express); - for(let i = 0;i < length; i++) { - const exp = JSON.parse(originExp); - // 将表达式中的 ['band', 0]、['band', 1] 等替换为实际的栅格数据 - const expResult = spellExpress(exp, dataArray, i); - if(typeof expResult === 'number') { - // exp: ['band', 0] => exp: 2 ... - // exp 直接指定了波段值，替换完后直接就是数值了，无需计算 - rasterData.push(expResult); - } else { - const result = calculateExpress(exp); - rasterData.push(result); - } - + const { width, height } = bandsData[0]; + const dataArray = bandsData.map((band) => band.rasterData) as Uint8Array[]; + const length = width * height; + const rasterData = []; + const originExp = JSON.stringify(express); + for (let i = 0; i < length; i++) { + const exp = JSON.parse(originExp); + // 将表达式中的 ['band', 0]、['band', 1] 等替换为实际的栅格数据 + const expResult = spellExpress(exp, dataArray, i); + if (typeof expResult === 'number') { + // exp: ['band', 0] => exp: 2 ... + // exp 直接指定了波段值，替换完后直接就是数值了，无需计算 + rasterData.push(expResult); + } else { + const result = calculateExpress(exp); + rasterData.push(result); } - return rasterData as unknown as Uint8Array; + } + return rasterData as unknown as Uint8Array; } type IExpress = any[]; /** * 将表达式中的指定波段替换为对应波段的栅格数据 - * @param express - * @param dataArray - * @param index + * @param express + * @param dataArray + * @param index */ -export function spellExpress(express: IExpress, dataArray: Uint8Array[], index: number) { - /** - * 用户直接指定波段数值，无需计算 - */ - if(express.length === 2 && express[0] === 'band' && typeof express[1] === 'number') { - try { - return dataArray[express[1]][index]; - } catch(err) { - console.warn('Raster Data err!'); - return 0; - } +export function spellExpress( + express: IExpress, + dataArray: Uint8Array[], + index: number, +) { + /** + * 用户直接指定波段数值，无需计算 + */ + if ( + express.length === 2 && + express[0] === 'band' && + typeof express[1] === 'number' + ) { + try { + return dataArray[express[1]][index]; + } catch (err) { + console.warn('Raster Data err!'); + return 0; } - express.map((e, i) => { - if(Array.isArray(e) && e.length > 0) { - switch(e[0]) { - case 'band': - try { - express[i] = dataArray[e[1]][index]; - } catch(err) { - console.warn('Raster Data err!'); - express[i] = 0; - } - break; - default: - spellExpress(e, dataArray, index); - } - } - }) + } + express.map((e, i) => { + if (Array.isArray(e) && e.length > 0) { + switch (e[0]) { + case 'band': + try { + express[i] = dataArray[e[1]][index]; + } catch (err) { + console.warn('Raster Data err!'); + express[i] = 0; + } + break; + default: + spellExpress(e, dataArray, index); + } + } + }); } export function formatExpress(express: IExpress) { - const [symbol1, symbol2 = -1, symbol3 = -1] = express; - if(symbol1 === undefined) { - console.warn('Express err!') - return ['+', 0, 0]; - } - const symbol = symbol1.replace(/\s+/g, ''); + const [symbol1, symbol2 = -1, symbol3 = -1] = express; + if (symbol1 === undefined) { + console.warn('Express err!'); + return ['+', 0, 0]; + } + const symbol = symbol1.replace(/\s+/g, ''); - return [symbol, symbol2, symbol3]; + return [symbol, symbol2, symbol3]; } export function calculateExpress(express: IExpress) { - const formatExp = formatExpress(express); - const str = formatExp[0]; - let left = formatExp[1]; - let right = formatExp[2]; - - if(Array.isArray(left)) { - left = calculateExpress(express[1]); - } - if(Array.isArray(right)) { - right = calculateExpress(express[2]); - } - return mathematical(str, left, right); -} \ No newline at end of file + const formatExp = formatExpress(express); + const str = formatExp[0]; + let left = formatExp[1]; + let right = formatExp[2]; + + if (Array.isArray(left)) { + left = calculateExpress(express[1]); + } + if (Array.isArray(right)) { + right = calculateExpress(express[2]); + } + return mathematical(str, left, right); +} diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts index 1f13f70527..f3262a9e41 100644 --- a/packages/utils/src/color.ts +++ b/packages/utils/src/color.ts @@ -2,7 +2,7 @@ import * as d3 from 'd3-color'; import { Context } from 'vm'; import { $window, isMini } from './mini-adapter'; export interface IColorRamp { - type?: 'cat' | 'linear' | 'quantize' | 'custom' + type?: 'cat' | 'linear' | 'quantize' | 'custom'; positions: number[]; colors: string[]; } @@ -74,7 +74,6 @@ export function generateColorRamp( ctx.fillStyle = gradient; ctx.fillRect(0, 0, 256, 1); - if (!isMini) { data = ctx.getImageData(0, 0, 256, 1).data; // 使用 createImageData 替代 new ImageData、兼容 IE11 @@ -114,8 +113,7 @@ export function generateLinearRamp( const step = domain[1] - domain[0]; for (let i = 0; i < colorRamp.colors.length; ++i) { - const value = Math.max((colorRamp.positions[i] - domain[0]) / step,0); - console.log(value) + const value = Math.max((colorRamp.positions[i] - domain[0]) / step, 0); gradient.addColorStop(value, colorRamp.colors[i]); } ctx.fillStyle = gradient; @@ -127,16 +125,11 @@ export function generateLinearRamp( canvas = null; // @ts-ignore ctx = null; - return imageData - + return imageData; } - // 枚举类型 -export function generateCatRamp( - colorRamp: IColorRamp, -): ImageData | IImagedata { - +export function generateCatRamp(colorRamp: IColorRamp): ImageData | IImagedata { let canvas = $window.document.createElement('canvas'); let ctx = canvas.getContext('2d') as CanvasRenderingContext2D; canvas.width = 256; @@ -144,12 +137,12 @@ export function generateCatRamp( const imageData = ctx.createImageData(256, 1); imageData.data.fill(0); colorRamp.positions.forEach((p: number, index: number) => { - const colorArray = rgb2arr(colorRamp.colors[index]) + const colorArray = rgb2arr(colorRamp.colors[index]); imageData.data[p * 4 + 0] = colorArray[0] * 255; imageData.data[p * 4 + 1] = colorArray[1] * 255; imageData.data[p * 4 + 2] = colorArray[2] * 255; imageData.data[p * 4 + 3] = colorArray[3] * 255; - }) + }); // @ts-ignore canvas = null; // @ts-ignore @@ -163,10 +156,10 @@ export function generateQuantizeRamp( ): ImageData | IImagedata { let canvas = $window.document.createElement('canvas'); let ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - ctx.globalAlpha = 1.0 + ctx.globalAlpha = 1.0; canvas.width = 256; canvas.height = 1; - const step = 256 / colorRamp.colors.length;// TODO 精度问题 + const step = 256 / colorRamp.colors.length; // TODO 精度问题 // draw linear color for (let i = 0; i < colorRamp.colors.length; i++) { ctx.beginPath(); @@ -176,14 +169,12 @@ export function generateQuantizeRamp( ctx.moveTo(i * step, 0); // positioned at 50,25 ctx.lineTo((i + 1) * step, 0); ctx.stroke(); - } const data = ctx.getImageData(0, 0, 256, 1).data; // 使用 createImageData 替代 new ImageData、兼容 IE11 const imageData = toIEIMageData(ctx, data); - // @ts-ignore canvas = null; // @ts-ignore @@ -197,25 +188,25 @@ export function generateCustomRamp( colorRamp: IColorRamp, domain: [number, number], ): ImageData | IImagedata { - let canvas = $window.document.createElement('canvas'); let ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - ctx.globalAlpha = 1.0 + ctx.globalAlpha = 1.0; canvas.width = 256; canvas.height = 1; const step = domain[1] - domain[0]; - if(colorRamp.positions.length - colorRamp.colors.length !==1) { - console.warn('positions 的数字个数应当比 colors 的样式多一个,poisitions 的首尾值一般为数据的最大最新值') + if (colorRamp.positions.length - colorRamp.colors.length !== 1) { + console.warn( + 'positions 的数字个数应当比 colors 的样式多一个,poisitions 的首尾值一般为数据的最大最新值', + ); } for (let i = 0; i < colorRamp.colors.length; i++) { ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = colorRamp.colors[i]; - ctx.moveTo((colorRamp.positions[i] - domain[0]) / step * 255, 0); // positioned at 50,25 - ctx.lineTo((colorRamp.positions[i + 1]- domain[0]) / step * 255, 0); + ctx.moveTo(((colorRamp.positions[i] - domain[0]) / step) * 255, 0); // positioned at 50,25 + ctx.lineTo(((colorRamp.positions[i + 1] - domain[0]) / step) * 255, 0); ctx.stroke(); - } const data = ctx.getImageData(0, 0, 256, 1).data; const imageData = toIEIMageData(ctx, data); @@ -233,15 +224,15 @@ function toIEIMageData(ctx: Context, data: Uint8ClampedArray) { imageData.data[i + 2] = data[i + 2]; imageData.data[i + 3] = data[i + 3]; } - return imageData + return imageData; } -export function getDefaultDomain(rampColors:IColorRamp) { +export function getDefaultDomain(rampColors: IColorRamp) { switch (rampColors.type) { - case 'cat' : - return [0,255] - default: - [0,1] + case 'cat': + return [0, 255]; + default: + [0, 1]; } +} -} \ No newline at end of file diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 0d0356a4b2..8a39e2df76 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,22 +1,19 @@ // @ts-ignore -export { djb2hash, BKDRHash } from './hash'; - -import * as DOM from './dom'; -import * as Satistics from './statistics'; - -export { DOM, Satistics }; - -export * from './mini-adapter/index'; export * from './ajax'; -export * from './geo'; -export * from './lru_cache'; -export * from './event'; -export * from './color'; export * from './anchor'; -export * from './stencli'; -export * from './worker-helper'; +export * from './color'; export * from './cull'; +export * as DOM from './dom'; export * from './env'; -export * from './tileset-manager'; -export * from './workers/triangulation'; +export * from './event'; +export * from './geo'; +export { BKDRHash, djb2hash } from './hash'; export * from './lineAtOffset'; +export * from './lru_cache'; +export * from './mini-adapter/index'; +export * as Satistics from './statistics'; +export * from './stencli'; +export * from './tileset-manager'; +export * from './worker-helper'; +export * from './workers/triangulation'; +