2015-09-21 24 views
0

我存儲在MySQL列「poligon」多邊形數據,像這樣 (lat, long)(lat,long)結構多邊形數據繪製多邊形...如何HERE地圖從存儲在MySQL

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

如何進入這個數據到多邊形代碼在這裏地圖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' 
); 

對不起,我新手

回答

1

假設你是在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)"; 
 
\t \t \t //to remove first '(' and last ')' 
 
\t \t \t latLonString=latLonString.substring(1,latLonString.length -2); 
 
\t \t \t // get individual coordinates 
 
\t \t \t var latLonValues=latLonString.split("\)\("); 
 
\t \t \t var finalArray=[]; 
 
\t \t \t for(i=0;i<latLonValues.length;i++){ 
 
\t \t \t \t var latLonSperated=latLonValues[i].split(","); 
 
\t \t \t \t finalArray.push(parseFloat(latLonSperated[0])); 
 
\t \t \t \t finalArray.push(parseFloat(latLonSperated[1])); 
 
\t \t \t \t // no altitude 
 
\t \t \t \t finalArray.push(0); 
 
\t \t \t } 
 
\t \t \t var polystrip1 = new H.geo.Strip(finalArray); 
 
\t \t \t var polygon1 = new H.map.Polygon(polystrip1); 
 
\t \t \t map.addObject(polygon1);