Yandex.Maps API का उपयोग करके वक्र की न्यूनतम दूरी का पता लगाना

नमस्कार प्रिय पाठकों।

यदि आपको कभी भी विषय में वर्णित कार्य का सामना करना पड़ा है, तो आप शायद आश्चर्यचकित होंगे कि गेटक्लोस्टॉप्टॉप () विधि के विवरण के संदर्भ के अलावा पोस्ट में कुछ भी होगा, इसलिए मैं तुरंत कहता हूं कि मेरा समाधान निश्चित रूप से इस पर आधारित है। हालाँकि, मैं इतना एल्गोरिथम सौंदर्य साझा नहीं करना चाहूंगा (यह मेरे लिए एपीआई बनाने वाली यैंडेक्स टीम द्वारा महसूस किया गया था), लेकिन मेरे लिए निर्धारित कार्य के लिए तैयार समाधान के रूप में।

हमारी कंपनी आईपी-टेलीफोनी और इंटरनेट सेवाओं के प्रावधान के साथ-साथ हमारे अपने ऑप्टिकल फाइबर के किलोमीटर में भी शामिल है। हमारे लिए, केबल का उद्देश्य ग्राहक के कार्यालय से कितनी दूर है, यह सवाल बहुत महत्वपूर्ण है।

कट के तहत रूपों में निर्मित कम से कम दूरी निर्धारण को लागू करने के लिए, प्रकाशिकी मार्गों के साथ एक नक्शा बनाने से लेकर तैयार समाधान की तलाश करें।

मैं आपको धोखा नहीं दूंगा या खुद को छिपाने की कोशिश नहीं करूंगा कि सभी कार्यों में तैयार समाधान और उदाहरणों को संकलित करना अनिवार्य रूप से शामिल था। शुरुआत में मैं उन सभी को धन्यवाद देना चाहता हूं जिनकी उपलब्धियों ने मुझे पूरी परियोजना का एहसास कराने में मदद की।

कार्य निम्नानुसार है: उपयोगकर्ता पते में प्रवेश करता है

• साइट और GET अनुरोध का उपयोग करने वाले पते को मानचित्र के साथ पृष्ठ पर स्थानांतरित किया जाता है
• मानचित्र पर ही एक विशेष रूप में

या वह सही बिंदु पर माउस को दबाकर खुद घर चुनता है।

उसके बाद, चयनित पते और निकटतम ऑप्टिकल केबल से दूरी के साथ एक निशान मानचित्र पर डाला जाता है। प्रदर्शन में आसानी के लिए, एक लंबवत केबल पर खींचा जाता है (एक विवादास्पद समाधान, लेकिन मुझे नेत्रहीन परिणाम पसंद आया)।

मैं एक उदाहरण देता हूं, ताकि http://www.infotis.ru/maps.html निराधार न हो।

काम कई चरणों में कम हो गया था

1. एक भौतिक कार्ड से Yandex.Map में केबल स्थानांतरण करें
2. कार्ड पर घटता (पॉलीलाइन) के रूप में केबल खींचना
3. कस्टम नियंत्रण बनाएँ
4. दूरी की गणना करने वाला एक कार्य लिखें
5. आपको जो पता चाहिए और जो निर्देशांक चाहिए, उन्हें प्राप्त करें

स्टेज 1

इस स्तर पर, एक सहकर्मी के हाथों से, इसके अलावा, मानचित्र पर कई दसियों किलोमीटर की केबल डालना आवश्यक था, जो सीधे आईटी विशेषता से संबंधित नहीं था। यहाँ यमिक संपादक ने मदद की जिसके लिए उन्हें बहुत धन्यवाद। यह इस पद की खोज से था कि अंतिम विकल्प Yandex.Maps (Google मैप्स के बजाय) के पक्ष में बनाया गया था।

अपने सहकर्मी के काम के कुछ समय बाद, मुझे निम्नलिखित फ़ॉर्म की एक टेक्स्ट फ़ाइल मिली (उदाहरण के लिए, 2 बिंदुओं के एक वक्र के लिए, ताकि उस स्थान पर कूड़े न हों)

{ "name": "1", "center": { "lng": 37.62110402807594, "lat": 55.74879798509053, "zoom": 12 }, "styles": [{ "name": "ymikEditor#1315408925757#0", "style": { "lineStyle": { "strokeColor": "0000ff80", "strokeWidth": "5" } } }], "objects": [{ "style": "ymikEditor#1315408925757#0", "name": "1", "description": "1", "type": "Polyline", "points": [{ "lng": 37.62110402807594, "lat": 55.773576281653035 }, { "lng": 37.6235072873533, "lat": 55.74957254620929 }] }] } 

स्टेज 2

यामिक के काम की छवि और समानता में , हम इन कलाओं को मानचित्र पर आकर्षित करते हैं।

हम सहमत हैं कि हमारी वस्तु चर घाटी, मानचित्र में निहित है -
अगला थोड़ा सा कोड है (यह सरल है, लेकिन समाधान स्वयं सरल है, इसलिए इसे टिप्पणियों के साथ रहने दें)

एक नक्शा और सरल नियंत्रण बनाएँ। जैसा कि आप कोड से देख सकते हैं, jQuery प्रक्रिया में लोड है, जिसे हम भविष्य में उपयोग करेंगे ($ के बजाय YMaps.jQuery का उपयोग करके)।

 map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]); map.setCenter(new YMaps.GeoPoint(37.643347, 55.745478), 13); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.ScaleLine()); map.addControl(new YMaps.TypeControl()); map.setType(YMaps.MapType.SATELLITE); //     var moscowBounds = new YMaps.GeoBounds( new YMaps.GeoPoint(37.389705, 55.577759), new YMaps.GeoPoint(37.844264, 55.91086) ); 

रेखा खींचने का कार्य

 polylines=[]; function draw_lines() { k = 0; //  for (var j = 0; j < val['objects'].length; j++) //        { if (val['objects'][j]['type'] == 'Polyline') //         Points { Points = []; for (var i = 0; i < val['objects'][j]['points'].length; i++) { Points.push(new YMaps.GeoPoint(val['objects'][j]['points'][i]['lng'], val['objects'][j]['points'][i]['lat'])); } //        pl = new YMaps.Polyline(Points, { style: { lineStyle: { strokeColor: val['styles'][k]['style']['lineStyle']['strokeColor'], strokeWidth: val['styles'][k]['style']['lineStyle']['strokeWidth'] } }, hasHint: 1 }); pl.name = val['objects'][j]['name']; pl.description = val['objects'][j]['description']; polylines.push(pl); //    polylines map.addOverlay(pl); //    k++; } if (val['objects'][j]['type'] == 'Placemark') //      { var placemark = new YMaps.Placemark(new YMaps.GeoPoint(val['objects'][j]['points']['lng'], val['objects'][j]['points']['lat']), { style: val['objects'][j]['style'] }); placemark.name = val['objects'][j]['name']; placemark.description = val['objects'][j]['description']; map.addOverlay(placemark); } } } 

स्टेज 3

इस स्तर पर हम मुख्य काम करेंगे।

शुरुआत करने वालों के लिए, मानचित्र पर एक ऐसा फॉर्म होना बहुत अच्छा होगा, जहाँ उपयोगकर्ता उस पते पर जा सकता है, जिसकी उसे जरूरत थी और यह देखें कि श्रमिकों को जाने के लिए केबल कितनी दूर है।

यहाँ यैंडेक्स से एक देशी नियंत्रण का एक उदाहरण है: http://api.yandex.ru/maps/jsapi/examples/mapcontrolscustomizing.html

इस मॉडल के अनुसार, हम कार्य करेंगे।

मैं इस नियंत्रण का डिजाइनर लाता हूं

 function nearest_search(object_address) { //      this.onAddToMap = function (map, position) { this.container = YMaps.jQuery("<div class='YMaps-button'> <i class='YMaps-button-c YMaps-button-l'><i></i></i><i class='YMaps-button-m YMaps-cursor-pointer'><i></i> <form id='find_nearest_form' action='#' class='YMaps-button-caption'>  <input type='text' name='object_address' value='"+object_address+"' id='search_nearest_input' style='border:1px solid green;' size='22'/></form></i><i class='YMaps-button-c YMaps-button-r'><i></i></i></div>"); //          (   )      this.map = map; this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Size(0, 40)); //  ,    . // CSS-,     this.container.css({ position: "absolute", zIndex: YMaps.ZIndex.CONTROL, width: "280px", }); this.position.apply(this.container); this.container.appendTo(this.map.getContainer()); } //      this.onRemoveFromMap = function () { //      ,    . }; } 

एक ट्रिगर जिसके द्वारा फ़ॉर्म सबमिट करने के बजाय हम दूरी की खोज और गणना का कार्य शुरू करेंगे।

 YMaps.jQuery('#find_nearest_form').submit(function () { showAddress(YMaps.jQuery("#search_nearest_input").val()); return false; }); 

अब हम मूल maps.yandex.ru से "सूचना" तत्व का एक संस्करण बनाएंगे
यह पूरी तरह से यहाँ कैसे वर्णित है http://api.yandex.ru/maps/articles/tasks/service.xml#how-to-use-create-information-tool

हमें इस स्थान पर जियोकोडिंग की आवश्यकता नहीं है, इसलिए हम कम कर देंगे

 function InformationControl() { var geoResult, clickPlace, listener, map; //        this.onAddToMap = function (parentMap) { map = parentMap; map.addCursor(YMaps.Cursor.HELP); //      listener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) { //    var clickPoint = mEvent.getGeoPoint(); //    (     ) if (geoResult) { map.removeOverlay(geoResult); result = null; } //    -   if (clickPlace) { map.removeOverlay(clickPlace); clickPlace = null; } //       clickPlace = new YMaps.Placemark(clickPoint); clickPlace.description = clickPoint.toString(); map.addOverlay(clickPlace); //     (  ) geotrack(clickPoint, clickPlace); }, this); } //        this.onRemoveFromMap = function () { map.removeCursor(YMaps.Cursor.HELP); //    ,     if (geoResult) {map.removeOverlay(geoResult); } //  if (punchline) {map.removeOverlay(punchline); } if (clickPlace) {map.removeOverlay(clickPlace); } //      listener.cleanup(); map = geoResult = clickPlace = listener = null; } } 

स्टेज 4

हुर्रे, हमारे पास सभी बटन हैं - चलो दूरी निर्धारित करने के लिए मुख्य कार्य लिखना शुरू करते हैं।

 function geotrack(clickPoint, clickPlace) { //    -   if (punchline) { map.removeOverlay(punchline); } nearest = 100000000000; //   .     . nearest_point = new YMaps.GeoPoint(0, 0); //    for (var i = 0; i < polylines.length; i++) //          -  ,      { if (nearest > polylines[i].getClosestPoint(clickPoint)['point'].distance(clickPoint)) { nearest = polylines[i].getClosestPoint(clickPoint)['point'].distance(clickPoint); nearest_point = polylines[i].getClosestPoint(clickPoint)['point']; } } clickPlace.name = "   : " + YMaps.humanDistance(nearest); clickPlace.description = ""; punchline = new YMaps.Polyline([clickPoint, nearest_point], { style: { lineStyle: { strokeColor: "ffffffff", strokeWidth: 2 } }, hashint: 1 }); punchline.name = "      : " + YMaps.humanDistance(nearest); map.addOverlay(punchline); return clickPlace.name; } 

स्टेज 5

आइए पते पर निर्देशांक की खोज करें।
फिर से एक उदाहरण Yandex http://api.yandex.ru/maps/jsapi/examples/geoc.html.html

 function showAddress(value) { //     map.removeOverlay(geoResult); //   . strictBounds : true -       (moscowBounds) var geocoder = new YMaps.Geocoder(value, { results: 1, boundedBy: moscowBounds, strictBounds : true }); //       YMaps.Events.observe(geocoder, geocoder.Events.Load, function () { //    ,      //         if (this.length()) { geoResult = this.get(0); //,    -   map.addOverlay(geoResult); name = geotrack(geoResult['_point'], geoResult); //  geoResult['text'] = '<b>' + geoResult['text'] + '.<br> ' + name + '</b>'; map.panTo(geoResult['_point'], { flying: 1 }); //     } else { alert("  "); //TODO:   -   } }); //     YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) { alert(" : " + error); //TODO:   -   }) } 

खैर, यह हमारे लिए यह जांचने के लिए रहता है कि क्या GET में कुछ आया है (साइट की अवधारणा के अनुसार, इसे वहां से आना चाहिए) और अगर ऐसा किया है, तो अनुरोध का उपयोग उस पते के रूप में करें जिसकी हम तलाश कर रहे हैं।

 var get = location.search; if(get != '') { object_address = decodeURI(get.split('?object_address=')[1]); if(object_address==" ") {object_address=""; } else {YMaps.jQuery('#find_nearest_form').submit(); } } else { object_address=''; } 

---

पूरे स्रोत कोड को उदाहरण में लिंक का उपयोग करके देखा जा सकता है।
मुझे टिप्पणी करने में खुशी होगी।

* अद्यतन * अंत में मुझे पता चला कि पदों को कैसे संपादित किया जाए, इसलिए जैसा कि मैं सब कुछ ठीक करना चाहता था, मैंने सब कुछ जोड़ा।
सभी ने मदद करने के लिए बहुत धन्यवाद।

---

तरीकों और वस्तुओं पर जानकारी:
api.yandex.ru/maps/jsapi/doc/ref/reference/map.xml
api.yandex.ru/maps/jsapi/doc/ref/reference/geopoint.xml
api.yandex.ru/maps/jsapi/doc/ref/reference/polyline.xml