javascript - 如何将包含坐标的变量传递给geojson“坐标”字段？
问题描述
我试图通过在经过一些数学计算后将包含坐标数组的变量传递到 map.addLayer 函数的“坐标”字段来在 mapboxgl 上绘制多边形。不确定这是否是正确的方法。
没有设法显示没有错误消息的多边形。
map.addLayer({
'id' : "layer1",
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [variable]
}
}
},
'layout': {},
'paint': {
'fill-color': '#cb4b16',
'fill-opacity': 0.8
}
});
以下是生成的坐标：
[103.7721606585124334, 1.3885039360043285],[103.7721665513856095, 1.3885034225235453],[103.7721723986707616, 1.3885023864315598],[103.7721781772912948, 1.3885008318173533],[103.7721838644416437, 1.3884987648162785],[103.7721894376772411, 1.3884961935858440],[103.7721948750030521, 1.3884931282735218],[103.7722001549604443, 1.3884895809766988],[103.7722052567118425, 1.3884855656949355],[103.7722101601229525, 1.3884810982747144],[103.7722148458422566, 1.3884761963469021],[103.7722192953773686, 1.3884708792571681],[103.7722234911679919, 1.3884651679896367],[103.7722274166552694, 1.3884590850840712],[103.7722310563470955, 1.3884526545469213],[103.7722343958792663, 1.3884459017565793],[103.7722374220721804, 1.3884388533632233],[103.7722401229828222, 1.3884315371836418],[103.7722424879519423, 1.3884239820914532],[103.7722445076460787, 1.3884162179031552],[103.7722461740944340, 1.3884082752604512],[103.7722474807202815, 1.3884001855093238],[103.7722484223669852, 1.3883919805763247],[103.7722489953182929, 1.3883836928425759],[103.7722491973130161, 1.3883753550159763],[103.7722490275539826, 1.3883670000021182],[103.7722484867111490, 1.3883586607744245],[103.7722475769189714, 1.3883503702440168],[103.7722463017679928, 1.3883421611298310],[103.7722446662906464, 1.3883340658294905],[103.7722426769414170, 1.3883261162914475],[103.7722403415713615, 1.3883183438888969],[103.7722376693971000, 1.3883107792959604],[103.7722346709645080, 1.3883034523666304],[103.7722313581070068, 1.3882963920169498],[103.7722277438989522, 1.3882896261108932],[103.7722238426039496, 1.3882831813504006],[103.7722196696186501, 1.3882770831699975],[103.7722152414119137, 1.3882713556364161],[103.7722105754598374, 1.3882660213536144],[103.7722056901768184, 1.3882611013735697],[103.7722006048428227, 1.3882566151131959],[103.7721953395273573, 1.3882525802777126],[103.7721899150101876, 1.3882490127907725],[103.7721843526994405, 1.3882459267316163],[103.7721786745469927, 1.3882433342795102],[103.7721729029619269, 1.3882412456656776],[103.7721670607220545, 1.3882396691329237],[103.7721611708840044, 1.3882386109031029],[103.7721552566923151, 1.3882380751525645],[103.7721493414875624, 1.3882380639956715],[103.7721434486143863, 1.3882385774764547],[103.7721376013292343, 1.3882396135684403],[103.7721318227087011, 1.3882411681826468],[103.7721261355583522, 1.3882432351837215],[103.7721205623227547, 1.3882458064141561],[103.7721151249969438, 1.3882488717264783],[103.7721098450395516, 1.3882524190233012],[103.7721047432881534, 1.3882564343050645],[103.7720998398770433, 1.3882609017252856],[103.7720951541577392, 1.3882658036530979],[103.7720907046226273, 1.3882711207428320],[103.7720865088320039, 1.3882768320103633],[103.7720825833447265, 1.3882829149159288],[103.7720789436529003, 1.3882893454530787],[103.7720756041207295, 1.3882960982434207],[103.7720725779278155, 1.3883031466367768],[103.7720698770171737, 1.3883104628163583],[103.7720675120480536, 1.3883180179085468],[103.7720654923539172, 1.3883257820968449],[103.7720638259055619, 1.3883337247395489],[103.7720625192797144, 1.3883418144906763],[103.7720615776330106, 1.3883500194236753],[103.7720610046817029, 1.3883583071574241],[103.7720608026869797, 1.3883666449840237],[103.7720609724460132, 1.3883749999978818],[103.7720615132888469, 1.3883833392255756],[103.7720624230810245, 1.3883916297559833],[103.7720636982320030, 1.3883998388701690],[103.7720653337093495, 1.3884079341705096],[103.7720673230585788, 1.3884158837085525],[103.7720696584286344, 1.3884236561111032],[103.7720723306028958, 1.3884312207040397],[103.7720753290354878, 1.3884385476333696],[103.7720786418929890, 1.3884456079830503],[103.7720822561010436, 1.3884523738891068],[103.7720861573960462, 1.3884588186495994],[103.7720903303813458, 1.3884649168300025],[103.7720947585880822, 1.3884706443635839],[103.7720994245401585, 1.3884759786463856],[103.7721043098231775, 1.3884808986264303],[103.7721093951571731, 1.3884853848868042],[103.7721146604726385, 1.3884894197222875],[103.7721200849898082, 1.3884929872092275],[103.7721256473005553, 1.3884960732683838],[103.7721313254530031, 1.3884986657204899],[103.7721370970380690, 1.3885007543343224],[103.7721429392779413, 1.3885023308670763],[103.7721488291159915, 1.3885033890968972],[103.7721547433076807, 1.3885039248474356],[103.7721606585124334, 1.3885039360043285]
解决方案
看起来你的多边形数据工作得很好。
您可以使用下面的示例来确定您的观点是否结构正确。
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [103.7721606585124334, 1.3883539360043285],
zoom: 18
});
map.on('load', () => {
map.addLayer({
'id' : "layer1",
'type': 'fill',
'layout': {},
'paint': {
'fill-color': '#cb4b16',
'fill-opacity': 0.8
},
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[
[103.7721606585124334, 1.3885039360043285],
[103.7721665513856095, 1.3885034225235453],
[103.7721723986707616, 1.3885023864315598],
[103.7721781772912948, 1.3885008318173533],
[103.7721838644416437, 1.3884987648162785],
[103.7721894376772411, 1.3884961935858440],
[103.7721948750030521, 1.3884931282735218],
[103.7722001549604443, 1.3884895809766988],
[103.7722052567118425, 1.3884855656949355],
[103.7722101601229525, 1.3884810982747144],
[103.7722148458422566, 1.3884761963469021],
[103.7722192953773686, 1.3884708792571681],
[103.7722234911679919, 1.3884651679896367],
[103.7722274166552694, 1.3884590850840712],
[103.7722310563470955, 1.3884526545469213],
[103.7722343958792663, 1.3884459017565793],
[103.7722374220721804, 1.3884388533632233],
[103.7722401229828222, 1.3884315371836418],
[103.7722424879519423, 1.3884239820914532],
[103.7722445076460787, 1.3884162179031552],
[103.7722461740944340, 1.3884082752604512],
[103.7722474807202815, 1.3884001855093238],
[103.7722484223669852, 1.3883919805763247],
[103.7722489953182929, 1.3883836928425759],
[103.7722491973130161, 1.3883753550159763],
[103.7722490275539826, 1.3883670000021182],
[103.7722484867111490, 1.3883586607744245],
[103.7722475769189714, 1.3883503702440168],
[103.7722463017679928, 1.3883421611298310],
[103.7722446662906464, 1.3883340658294905],
[103.7722426769414170, 1.3883261162914475],
[103.7722403415713615, 1.3883183438888969],
[103.7722376693971000, 1.3883107792959604],
[103.7722346709645080, 1.3883034523666304],
[103.7722313581070068, 1.3882963920169498],
[103.7722277438989522, 1.3882896261108932],
[103.7722238426039496, 1.3882831813504006],
[103.7722196696186501, 1.3882770831699975],
[103.7722152414119137, 1.3882713556364161],
[103.7722105754598374, 1.3882660213536144],
[103.7722056901768184, 1.3882611013735697],
[103.7722006048428227, 1.3882566151131959],
[103.7721953395273573, 1.3882525802777126],
[103.7721899150101876, 1.3882490127907725],
[103.7721843526994405, 1.3882459267316163],
[103.7721786745469927, 1.3882433342795102],
[103.7721729029619269, 1.3882412456656776],
[103.7721670607220545, 1.3882396691329237],
[103.7721611708840044, 1.3882386109031029],
[103.7721552566923151, 1.3882380751525645],
[103.7721493414875624, 1.3882380639956715],
[103.7721434486143863, 1.3882385774764547],
[103.7721376013292343, 1.3882396135684403],
[103.7721318227087011, 1.3882411681826468],
[103.7721261355583522, 1.3882432351837215],
[103.7721205623227547, 1.3882458064141561],
[103.7721151249969438, 1.3882488717264783],
[103.7721098450395516, 1.3882524190233012],
[103.7721047432881534, 1.3882564343050645],
[103.7720998398770433, 1.3882609017252856],
[103.7720951541577392, 1.3882658036530979],
[103.7720907046226273, 1.3882711207428320],
[103.7720865088320039, 1.3882768320103633],
[103.7720825833447265, 1.3882829149159288],
[103.7720789436529003, 1.3882893454530787],
[103.7720756041207295, 1.3882960982434207],
[103.7720725779278155, 1.3883031466367768],
[103.7720698770171737, 1.3883104628163583],
[103.7720675120480536, 1.3883180179085468],
[103.7720654923539172, 1.3883257820968449],
[103.7720638259055619, 1.3883337247395489],
[103.7720625192797144, 1.3883418144906763],
[103.7720615776330106, 1.3883500194236753],
[103.7720610046817029, 1.3883583071574241],
[103.7720608026869797, 1.3883666449840237],
[103.7720609724460132, 1.3883749999978818],
[103.7720615132888469, 1.3883833392255756],
[103.7720624230810245, 1.3883916297559833],
[103.7720636982320030, 1.3883998388701690],
[103.7720653337093495, 1.3884079341705096],
[103.7720673230585788, 1.3884158837085525],
[103.7720696584286344, 1.3884236561111032],
[103.7720723306028958, 1.3884312207040397],
[103.7720753290354878, 1.3884385476333696],
[103.7720786418929890, 1.3884456079830503],
[103.7720822561010436, 1.3884523738891068],
[103.7720861573960462, 1.3884588186495994],
[103.7720903303813458, 1.3884649168300025],
[103.7720947585880822, 1.3884706443635839],
[103.7720994245401585, 1.3884759786463856],
[103.7721043098231775, 1.3884808986264303],
[103.7721093951571731, 1.3884853848868042],
[103.7721146604726385, 1.3884894197222875],
[103.7721200849898082, 1.3884929872092275],
[103.7721256473005553, 1.3884960732683838],
[103.7721313254530031, 1.3884986657204899],
[103.7721370970380690, 1.3885007543343224],
[103.7721429392779413, 1.3885023308670763],
[103.7721488291159915, 1.3885033890968972],
[103.7721547433076807, 1.3885039248474356],
[103.7721606585124334, 1.3885039360043285]
]]
}
}
}
});
});#map {
width: 100vw;
height: 100vh;
}<script src="https://npmcdn.com/@turf/turf@5.1.6/turf.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet" type="text/css">
<div id="map"></div>推荐阅读
- python - 在组 Matplotlib 图中标记并使用正确颜色的图例
- numpy - 将 Fortran 数组转换为 numpy 数组
- javascript - 赠品命令不保存（Heroku）discord.js
- python - 是否无法在 web.archive “包含”网页中使用 Selenium (Python)，还是我做错了什么？
- r - 在 R 中使用 xpath 抓取数据表
- c++ - 表达式必须有一个常数值 VS 2019
- javascript - Javascript 网站安全 - 全局变量
- ios - 从断开连接的蓝牙设备捕获输入时，AVAudioSession 服务重置
- r - 创建一个优化模型，以便选择开始日期和结束日期会产生一些结果
- c - 未初始化条件 Valgrind