我有一个问题，我正在根据各种用户行程创建动态折线。我根据给定行程的用户创建了一个 latlong 位置数组，但是，当我为 PolyLine 设置位置时，它似乎绘制了多条线。我可以创建一个具有相同坐标的 const 全局数组并使用它，一切正常。例如，如果我设置 linePositions=myRouteTest 它会很好地加载线路。有什么想法吗。
这是代码：
import React, { useState, useCallback, useEffect, useRef } from 'react'
import L from 'leaflet';
import { LayersControl, Polyline} from 'react-leaflet'
import Alert from 'react-s-alert';
import { floor, random } from 'mathjs'
const myRouteTest = [
[34.452013,-75.821677],
[34.457749,-75.823401],
[34.462844,-75.827613],
[34.467903,-75.831405],
[34.469101,-75.825433],
[34.472537,-75.826517],
[34.46738,-75.823303],
[34.466348,-75.821663],
[34.462159,-75.815665],
[34.457858,-75.809724],
[34.453227,-75.806552],
[34.450229,-75.803527],
[34.444998,-75.798925],
[34.439271,-75.796441],
[34.433141,-75.796452],
[34.482771,-75.718814],
[34.51903,-76.442413],
[34.519628,-76.465259],
[34.521005,-76.48865],
[34.525232,-76.508717]
]
export default function TripLine2({trip}) {
return (
<div>
<LayersControl.Overlay checked name={trip.name}>
<CFTripLine trip={trip} />
</LayersControl.Overlay>
</div>
)
}
const CFTripLine = ({ trip }) => {
const [linePositions, setLinePositions] = useState([]);
const [color, setColor] = useState();
useEffect(() => {
var tempLatLong = [];
trip.tripWaypoint.map(waypoint =>
tempLatLong.push([Number(waypoint.latitude), Number(waypoint.longitude)])
);
setLinePositions(tempLatLong);
console.log("New: " + tempLatLong);
console.log("const: " + myRouteTest);
//dynamically set the line color for the trip
setColor({ color: getColor() });
}, []);
const getColor = () => {
console.log("getting color");
var r = floor(random() * 255);
var g = floor(random() * 255);
var b = floor(random() * 255)
return "rgb(" + r + " ," + g + "," + b + ")";
}
return (
<div>
{
(linePositions && linePositions.length > 0) ? <Polyline pathOptions={color} positions={linePositions} /> : null
}
</div>
)
}
这是一个示例 json：
{
"tripID":1,
"user":{
"id":2,
"name":"test,
"profile":null,
"waypoints":[
],
"email":"test",
"imageUrl":null,
"emailVerified":true,
"provider":null,
"providerId":null
},
"tripWaypoint":[
{
"id":1,
"latitude":34.67599502764642,
"longitude":-76.65639395825565,
"speed":0.0,
"elevation":0.0,
"name":"TW0.4625323333214715"
},
{
"id":2,
"latitude":34.66065698303282,
"longitude":-76.64228503592312,
"speed":0.0,
"elevation":0.0,
"name":"TW0.0658351705169683"
},
{
"id":3,
"latitude":34.64539797976613,
"longitude":-76.62809598259628,
"speed":0.0,
"elevation":0.0,
"name":"TW0.957917922018214"
},
{
"id":4,
"latitude":34.63000402785838,
"longitude":-76.61363703198731,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8996815085608042"
},
{
"id":5,
"latitude":34.61495096795261,
"longitude":-76.59945501945913,
"speed":0.0,
"elevation":0.0,
"name":"TW0.025047788294637496"
},
{
"id":6,
"latitude":34.60001399740577,
"longitude":-76.58547802828252,
"speed":0.0,
"elevation":0.0,
"name":"TW0.37358115819515314"
},
{
"id":7,
"latitude":34.58539696410298,
"longitude":-76.5720789693296,
"speed":0.0,
"elevation":0.0,
"name":"TW0.05164300416673007"
},
{
"id":8,
"latitude":34.5717020239681,
"longitude":-76.55940997414291,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3285483477149437"
},
{
"id":9,
"latitude":34.55762797035277,
"longitude":-76.54618903063238,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3439910413133228"
},
{
"id":10,
"latitude":34.54380503855646,
"longitude":-76.53298996388912,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7025978234833568"
},
{
"id":11,
"latitude":34.52656396664679,
"longitude":-76.51689796708524,
"speed":0.0,
"elevation":0.0,
"name":"TW0.9951697714467905"
},
{
"id":12,
"latitude":34.52151001431048,
"longitude":-76.49242197163403,
"speed":0.0,
"elevation":0.0,
"name":"TW0.1347634133562452"
},
{
"id":13,
"latitude":34.52400497160852,
"longitude":-76.46309201605618,
"speed":0.0,
"elevation":0.0,
"name":"TW0.24147729087646597"
},
{
"id":14,
"latitude":34.52595896087587,
"longitude":-76.43877200782299,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7316560643332694"
},
{
"id":15,
"latitude":34.5288119930774,
"longitude":-76.41897697001696,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8294183964830047"
},
{
"id":16,
"latitude":34.53094895929098,
"longitude":-76.39967202208936,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5607757280076388"
},
{
"id":17,
"latitude":34.53380299732089,
"longitude":-76.37227996252477,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5260754134537965"
},
{
"id":18,
"latitude":34.53482600860298,
"longitude":-76.35333904065192,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3571899945440181"
},
{
"id":19,
"latitude":34.53746899031103,
"longitude":-76.3336119800806,
"speed":0.0,
"elevation":0.0,
"name":"TW0.09533153270937111"
},
{
"id":20,
"latitude":34.53914604149759,
"longitude":-76.31359599530697,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3209122099401692"
},
{
"id":21,
"latitude":34.54269703477621,
"longitude":-76.29412399604917,
"speed":0.0,
"elevation":0.0,
"name":"TW0.33219391704748347"
},
{
"id":22,
"latitude":34.54546197317541,
"longitude":-76.27408797852695,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8438944089925343"
},
{
"id":23,
"latitude":34.54856897704303,
"longitude":-76.25491102226079,
"speed":0.0,
"elevation":0.0,
"name":"TW0.36398386573914765"
},
{
"id":24,
"latitude":34.550529001280665,
"longitude":-76.23528001829982,
"speed":0.0,
"elevation":0.0,
"name":"TW0.03115800604559138"
},
{
"id":25,
"latitude":34.55335898324847,
"longitude":-76.21489296667278,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6726480940845876"
},
{
"id":26,
"latitude":34.55648803152144,
"longitude":-76.19424004107714,
"speed":0.0,
"elevation":0.0,
"name":"TW0.10400848032177046"
},
{
"id":27,
"latitude":34.55834697000682,
"longitude":-76.17363799363375,
"speed":0.0,
"elevation":0.0,
"name":"TW0.714751966626381"
},
{
"id":28,
"latitude":34.56060002557933,
"longitude":-76.1526610236615,
"speed":0.0,
"elevation":0.0,
"name":"TW0.2189323091239299"
},
{
"id":29,
"latitude":34.56355799920857,
"longitude":-76.13186501897871,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6783163111638825"
},
{
"id":30,
"latitude":34.56705903634429,
"longitude":-76.11068302765489,
"speed":0.0,
"elevation":0.0,
"name":"TW0.06869450828961199"
},
{
"id":31,
"latitude":34.56918896175921,
"longitude":-76.08934697695076,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6476584186153899"
},
{
"id":32,
"latitude":34.571133982390165,
"longitude":-76.06715697795153,
"speed":0.0,
"elevation":0.0,
"name":"TW0.40800681731430233"
},
{
"id":33,
"latitude":34.573455015197396,
"longitude":-76.04622200131416,
"speed":0.0,
"elevation":0.0,
"name":"TW0.09351924762239894"
},
{
"id":34,
"latitude":34.576887991279364,
"longitude":-76.02514503523707,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5612109189517532"
},
{
"id":35,
"latitude":34.57823798060417,
"longitude":-76.00225003436208,
"speed":0.0,
"elevation":0.0,
"name":"TW0.2763567018455305"
},
{
"id":36,
"latitude":34.581467024981976,
"longitude":-75.98089001141489,
"speed":0.0,
"elevation":0.0,
"name":"TW0.11062887879355576"
},
{
"id":37,
"latitude":34.5608470402658,
"longitude":-75.72843203321099,
"speed":0.0,
"elevation":0.0,
"name":"TW0.47173268062798046"
},
{
"id":38,
"latitude":34.56802597269416,
"longitude":-75.7275060005486,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5591163063586786"
},
{
"id":39,
"latitude":34.5688250195235,
"longitude":-75.7319599762559,
"speed":0.0,
"elevation":0.0,
"name":"TW0.2898243232100508"
},
{
"id":40,
"latitude":34.565973998978734,
"longitude":-75.73355304077268,
"speed":0.0,
"elevation":0.0,
"name":"TW0.4270751759829343"
},
{
"id":41,
"latitude":34.56311400979757,
"longitude":-75.73644001968205,
"speed":0.0,
"elevation":0.0,
"name":"TW0.17347115786989065"
},
{
"id":42,
"latitude":34.55965102650225,
"longitude":-75.73762899264693,
"speed":0.0,
"elevation":0.0,
"name":"TW0.24153172732682693"
},
{
"id":43,
"latitude":34.55576098524034,
"longitude":-75.73758297599852,
"speed":0.0,
"elevation":0.0,
"name":"TW0.09368325732232441"
},
{
"id":44,
"latitude":34.55504802055657,
"longitude":-75.73932901024818,
"speed":0.0,
"elevation":0.0,
"name":"TW0.352275568518189"
},
{
"id":45,
"latitude":34.551925007253885,
"longitude":-75.73927603662014,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7066560187648049"
},
{
"id":46,
"latitude":34.55122201703489,
"longitude":-75.73800198733807,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7575265591964035"
},
{
"id":47,
"latitude":34.55780197866261,
"longitude":-75.73855795897543,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7461685765935566"
},
{
"id":48,
"latitude":34.55529101192951,
"longitude":-75.74234196916223,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8198115507403634"
},
{
"id":49,
"latitude":34.552761018276215,
"longitude":-75.74417802505195,
"speed":0.0,
"elevation":0.0,
"name":"TW0.16950813703065937"
},
{
"id":50,
"latitude":34.54882697202265,
"longitude":-75.74381399899721,
"speed":0.0,
"elevation":0.0,
"name":"TW0.22298291541737503"
},
{
"id":51,
"latitude":34.544748002663255,
"longitude":-75.74202303774655,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7891177318371495"
},
{
"id":52,
"latitude":34.540386982262135,
"longitude":-75.73906799778342,
"speed":0.0,
"elevation":0.0,
"name":"TW0.975506647616044"
},
{
"id":53,
"latitude":34.536646977066994,
"longitude":-75.73515800759196,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5569825078315026"
},
{
"id":54,
"latitude":34.53338800929487,
"longitude":-75.73283999226987,
"speed":0.0,
"elevation":0.0,
"name":"TW0.05583224680540411"
},
{
"id":55,
"latitude":34.67599502764642,
"longitude":-76.65639395825565,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8409539568596216"
},
{
"id":56,
"latitude":34.66065698303282,
"longitude":-76.64228503592312,
"speed":0.0,
"elevation":0.0,
"name":"TW0.16599150275016417"
},
{
"id":57,
"latitude":34.64539797976613,
"longitude":-76.62809598259628,
"speed":0.0,
"elevation":0.0,
"name":"TW0.4739875420965156"
},
{
"id":58,
"latitude":34.63000402785838,
"longitude":-76.61363703198731,
"speed":0.0,
"elevation":0.0,
"name":"TW0.39334685729929575"
},
{
"id":59,
"latitude":34.61495096795261,
"longitude":-76.59945501945913,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8664896036237502"
},
{
"id":60,
"latitude":34.60001399740577,
"longitude":-76.58547802828252,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6520395010294587"
},
{
"id":61,
"latitude":34.58539696410298,
"longitude":-76.5720789693296,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3621095349898389"
},
{
"id":62,
"latitude":34.5717020239681,
"longitude":-76.55940997414291,
"speed":0.0,
"elevation":0.0,
"name":"TW2.087810425505099E-4"
},
{
"id":63,
"latitude":34.55762797035277,
"longitude":-76.54618903063238,
"speed":0.0,
"elevation":0.0,
"name":"TW0.36747627597440136"
},
{
"id":64,
"latitude":34.54380503855646,
"longitude":-76.53298996388912,
"speed":0.0,
"elevation":0.0,
"name":"TW0.11213289899397283"
},
{
"id":65,
"latitude":34.52656396664679,
"longitude":-76.51689796708524,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6912885791691252"
},
{
"id":66,
"latitude":34.52151001431048,
"longitude":-76.49242197163403,
"speed":0.0,
"elevation":0.0,
"name":"TW0.7723663588134086"
},
{
"id":67,
"latitude":34.52400497160852,
"longitude":-76.46309201605618,
"speed":0.0,
"elevation":0.0,
"name":"TW0.34818032694997414"
},
{
"id":68,
"latitude":34.52595896087587,
"longitude":-76.43877200782299,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5886342804520899"
},
{
"id":69,
"latitude":34.5288119930774,
"longitude":-76.41897697001696,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6938691766520492"
},
{
"id":70,
"latitude":34.53094895929098,
"longitude":-76.39967202208936,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6692289842573389"
},
{
"id":71,
"latitude":34.53380299732089,
"longitude":-76.37227996252477,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8018638276009495"
},
{
"id":72,
"latitude":34.53482600860298,
"longitude":-76.35333904065192,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6471011203293123"
},
{
"id":73,
"latitude":34.53746899031103,
"longitude":-76.3336119800806,
"speed":0.0,
"elevation":0.0,
"name":"TW0.12567493925344364"
},
{
"id":74,
"latitude":34.53914604149759,
"longitude":-76.31359599530697,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6655390642371621"
},
{
"id":75,
"latitude":34.54269703477621,
"longitude":-76.29412399604917,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6369027275191426"
},
{
"id":76,
"latitude":34.54546197317541,
"longitude":-76.27408797852695,
"speed":0.0,
"elevation":0.0,
"name":"TW0.16869626017905148"
},
{
"id":77,
"latitude":34.54856897704303,
"longitude":-76.25491102226079,
"speed":0.0,
"elevation":0.0,
"name":"TW0.22723393420759863"
},
{
"id":78,
"latitude":34.550529001280665,
"longitude":-76.23528001829982,
"speed":0.0,
"elevation":0.0,
"name":"TW0.10429919005986765"
},
{
"id":79,
"latitude":34.55335898324847,
"longitude":-76.21489296667278,
"speed":0.0,
"elevation":0.0,
"name":"TW0.4153754450341114"
},
{
"id":80,
"latitude":34.55648803152144,
"longitude":-76.19424004107714,
"speed":0.0,
"elevation":0.0,
"name":"TW0.3763104488946786"
},
{
"id":81,
"latitude":34.55834697000682,
"longitude":-76.17363799363375,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5280073574891413"
},
{
"id":82,
"latitude":34.56060002557933,
"longitude":-76.1526610236615,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6534220112784409"
},
{
"id":83,
"latitude":34.56355799920857,
"longitude":-76.13186501897871,
"speed":0.0,
"elevation":0.0,
"name":"TW0.012306756873057156"
},
{
"id":84,
"latitude":34.56705903634429,
"longitude":-76.11068302765489,
"speed":0.0,
"elevation":0.0,
"name":"TW0.4069277174747923"
},
{
"id":85,
"latitude":34.56918896175921,
"longitude":-76.08934697695076,
"speed":0.0,
"elevation":0.0,
"name":"TW0.38745049458472636"
},
{
"id":86,
"latitude":34.571133982390165,
"longitude":-76.06715697795153,
"speed":0.0,
"elevation":0.0,
"name":"TW0.9213088212832486"
},
{
"id":87,
"latitude":34.573455015197396,
"longitude":-76.04622200131416,
"speed":0.0,
"elevation":0.0,
"name":"TW0.320353230478409"
},
{
"id":88,
"latitude":34.576887991279364,
"longitude":-76.02514503523707,
"speed":0.0,
"elevation":0.0,
"name":"TW0.9859279126269395"
},
{
"id":89,
"latitude":34.57823798060417,
"longitude":-76.00225003436208,
"speed":0.0,
"elevation":0.0,
"name":"TW0.1989627279533166"
},
{
"id":90,
"latitude":34.581467024981976,
"longitude":-75.98089001141489,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6703525795602392"
},
{
"id":91,
"latitude":34.5608470402658,
"longitude":-75.72843203321099,
"speed":0.0,
"elevation":0.0,
"name":"TW0.42256831709235443"
},
{
"id":92,
"latitude":34.56802597269416,
"longitude":-75.7275060005486,
"speed":0.0,
"elevation":0.0,
"name":"TW0.5334353414149261"
},
{
"id":93,
"latitude":34.5688250195235,
"longitude":-75.7319599762559,
"speed":0.0,
"elevation":0.0,
"name":"TW0.9962580080816836"
},
{
"id":94,
"latitude":34.565973998978734,
"longitude":-75.73355304077268,
"speed":0.0,
"elevation":0.0,
"name":"TW0.48239944630269926"
},
{
"id":95,
"latitude":34.56311400979757,
"longitude":-75.73644001968205,
"speed":0.0,
"elevation":0.0,
"name":"TW0.23498643785927986"
},
{
"id":96,
"latitude":34.55965102650225,
"longitude":-75.73762899264693,
"speed":0.0,
"elevation":0.0,
"name":"TW0.33848582367790947"
},
{
"id":97,
"latitude":34.55576098524034,
"longitude":-75.73758297599852,
"speed":0.0,
"elevation":0.0,
"name":"TW0.796415769143147"
},
{
"id":98,
"latitude":34.55504802055657,
"longitude":-75.73932901024818,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6764924242169598"
},
{
"id":99,
"latitude":34.551925007253885,
"longitude":-75.73927603662014,
"speed":0.0,
"elevation":0.0,
"name":"TW0.48111721516412054"
},
{
"id":100,
"latitude":34.55122201703489,
"longitude":-75.73800198733807,
"speed":0.0,
"elevation":0.0,
"name":"TW0.27369946100558806"
},
{
"id":101,
"latitude":34.55780197866261,
"longitude":-75.73855795897543,
"speed":0.0,
"elevation":0.0,
"name":"TW0.38984718591276835"
},
{
"id":102,
"latitude":34.55529101192951,
"longitude":-75.74234196916223,
"speed":0.0,
"elevation":0.0,
"name":"TW0.2567598848429836"
},
{
"id":103,
"latitude":34.552761018276215,
"longitude":-75.74417802505195,
"speed":0.0,
"elevation":0.0,
"name":"TW0.0020425480484795866"
},
{
"id":104,
"latitude":34.54882697202265,
"longitude":-75.74381399899721,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8913092512422502"
},
{
"id":105,
"latitude":34.544748002663255,
"longitude":-75.74202303774655,
"speed":0.0,
"elevation":0.0,
"name":"TW0.44463940288519654"
},
{
"id":106,
"latitude":34.540386982262135,
"longitude":-75.73906799778342,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6771001703845265"
},
{
"id":107,
"latitude":34.536646977066994,
"longitude":-75.73515800759196,
"speed":0.0,
"elevation":0.0,
"name":"TW0.8286605038270607"
},
{
"id":108,
"latitude":34.53338800929487,
"longitude":-75.73283999226987,
"speed":0.0,
"elevation":0.0,
"name":"TW0.6408112678998857"
}
],
"startTime":"2022-03-01T12:22:46.731+00:00",
"endTime":"2022-03-01T12:22:46.731+00:00",
"name":"tripTest1"
}