gpt4 book ai didi

javascript - 如何从存储在mysql中的多边形数据在HERE Map中绘制多边形

转载 作者:行者123 更新时间:2023-11-29 11:58:54 27 4
gpt4 key购买 nike

我有一个多边形数据存储在 mysql 列“poligon”中,其结构如下(纬度,经度)(纬度,经度)...

'(-6.811408423530006, 110.85068956017494)(-6.811770629167109, 110.85174098610878)(-6.81129656585151, 110.85196629166603)(-6.810718634097109, 110.85200116038322)(-6.8106946645623, 110.85195824503899)(-6.811046217619413, 110.85130110383034)'

如何将此数据输入到多边形代码 HERE Map Js API 下面

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css"href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >


/**
* Adds a polygon to the map
*
* @param {H.Map} map A HERE Map instance within the application
*/
function addPolygonToMap(map) {
var geoStrip = new H.geo.Strip(
[52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100], 'values lat lng alt'
);
map.addObject(
new H.map.Polygon(geoStrip, {
style: {
fillColor: '#FFFFCC',
strokeColor: '#829',
lineWidth: 8
}
})
);
}



/**
* Boilerplate map initialization code starts below:
*/

//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:52, lng:5},
zoom: 5
});

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);


// Now use the map as required...
addPolygonToMap(map);
</script>
</body>
</html>

如何用我的多边形数据结构(纬度,经度)(纬度,经度)替换下面的数据...

new H.geo.Strip(
[52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100], 'values lat lng alt'
);

对不起,我是新手

最佳答案

假设您在 JavaScript 端以字符串形式检索多边形数据,您应该能够使用简单的字符串操作。

var latLonString="(-6.811408423530006, 110.85068956017494)(-6.811770629167109, 110.85174098610878)(-6.81129656585151, 110.85196629166603)(-6.810718634097109, 110.85200116038322)(-6.8106946645623, 110.85195824503899)(-6.811046217619413, 110.85130110383034)";
//to remove first '(' and last ')'
latLonString=latLonString.substring(1,latLonString.length -2);
// get individual coordinates
var latLonValues=latLonString.split("\)\(");
var finalArray=[];
for(i=0;i<latLonValues.length;i++){
var latLonSperated=latLonValues[i].split(",");
finalArray.push(parseFloat(latLonSperated[0]));
finalArray.push(parseFloat(latLonSperated[1]));
// no altitude
finalArray.push(0);
}
var polystrip1 = new H.geo.Strip(finalArray);
var polygon1 = new H.map.Polygon(polystrip1);
map.addObject(polygon1);

关于javascript - 如何从存储在mysql中的多边形数据在HERE Map中绘制多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32706297/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com