ORS ile portalınız için özel bir web appbuilder widget nasıl oluşturulur – dijital coğrafya

Son yıllarda sık sık ArcGIS portal / Enterprise ile çalıştım ve özel bir web uygulaması için Web AppBuilder’da kullanabileceğim widget’ları yazma fikrine aşık oldum. Ne yazık ki bu hala sadece kendi ArcGIS bağlantı noktası web appbuilder ve arcGIs çevrimiçi değil mümkündür. Ama belki bu değişecek gelecek. Bu yüzden lütfen beni takip edin, openstreetmap yönlendirmesini sunmak için özel bir widget oluşturur. Ors ArcGIS Web Uygulamalarında. ORS’yi bir şekilde kâr etmeye odaklanmadığı için kullandım.

Önkoşullar

Pekin’deki Esri R&D ekibinden örnek bir widget ile başlayalım. Bu, Web AppBuilder (WAB) Dev Edition ile birlikte gelir. Gerek Bunu bir sunucuya yükleyin ve çalıştırın Örneğimi takip etmek istiyorsanız. Her şeyi yerine getirirseniz, SampleWidgets klasöründen “Demo” widget’ını ana widget klasörüne “Widgets” a kopyalayın:

Bu örnek için, sadece klasörü değil, “Demo” adlarını da Orsdemo adlandırma ile iyi bir şekilde yeniden adlandırdım. Bu nedenle kontrol etmelisin manifest.json çeviri ile ilgili NLS klasörlerinin yanı sıra:

Her şeyi yerine getirdikten sonra, bir uygulama oluşturun, ORS demo widget’ı ekleyin ve kaydedin. Uygulamada widget ile çalışacağız ve yeniden kodlayacağız. Widget’ın yeni bir sürümü ile her birim testi için bir uygulamayı yeniden oluşturmanız gerekmediğinden bu daha uygundur. Widget’ı klasörde bulacaksınız ./server/apps/#nr/widgets

Bir widget için klasör/dosya yapısı

Ana bileşenler:

• config.json – uygulamayı wab’a kaydettiğimizde doldurulur
• widget.js – widget’ın kendisi için tüm js kodunu tutan
• widget.html – uygulamada görünen html öğesi
• set/sett.html – bu widget ile yeni bir uygulama oluşturursanız ayar iletişim kutusu
• set/sett.js – Ayar iletişim kutusunun içinde kullanacağımız JS eylemleri

Demo widget’ımızdaki showvertexFeatureaction’ı fark etmiş olabilirsiniz. Bu temel örnek için bunu ele almayacağız!

Yönlendirme için Kullanıcı iletişim kutusunu ayarlama

Herhangi yönlendirme Uygulama, bir kullanıcının başlangıçta ve istenen rotanın son konumunu koymasını ister. Bu bir şekilde seyahat modu, seyahat süresi vb.

Yukarıda açıklandığı gibi, bir kullanıcının bir girdi yapmasına ve ORS ile rota hesaplamasını tetiklemesine izin vermek için widget.html dosyasını değiştirmemiz gerekecektir:

OR’lerle girişi coğrafi olarak kodlamak

ORS yönlendirmesi için bir girdi olarak çalışmak için adres satırını coğrafi kodlayacağız, böylece verilen adresi coğrafi kodlamak için bir işlev oluştururuz. Pprior Haritayı, başlangıç ​​ve durma için koordinatları ve üç grafik kaplamaları için hazırlayacağız. Bu nedenle, gereksinim ifadesini geliştirmemiz gerekecek. widget.js. Adres noktaları için farklı modüllere, rota sembolü ve düğme/ metin kutuları ile etkileşime ihtiyacımız var:

define(['dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dijit/form/Button', //creating the dijit button
'dojo/on',  //handling events
'dojo/keys', //listen for 'ENTER' press
'dojo/parser', //constructing the button
'dijit/registry', // accessing the text inputs
'dojo/request/xhr', //making a CORS call / AJAX post
'esri/geometry/Point', //storing point geometry
'esri/symbols/SimpleMarkerSymbol', //show proper markers
'esri/symbols/SimpleLineSymbol', //show proper line
'esri/geometry/Polyline', //storing line geometry
'esri/graphic', //for constructing a graphic
'esri/layers/GraphicsLayer', //to store the graphic as a separate layer
'dojo/domReady!'],
function(declare, BaseWidget, _WidgetsInTemplateMixin, Button, on, keys, parser, registry, xhr,
Point, SimpleMarkerSymbol, SimpleLineSymbol, Polyline, Graphic, GraphicsLayer) {
 return declare([BaseWidget, _WidgetsInTemplateMixin], {

Amaç şudur: Bir adres dizesi eklediğimizde, coğrafi kodlu adres haritada ve A ve B arasındaki son yolda görünmelidir. Bu nedenle, A ve B’nin koordinatlarını saklamak için üç grafik katman ve bir dizi kullanacağız:

coordinates = [0,1];
glS = new GraphicsLayer({id:"START"});
glE = new GraphicsLayer({id:"END"});
route = new GraphicsLayer({id:"ROUTE"});
this.map.addLayer(glS);
this.map.addLayer(glE);
this.map.addLayer(route);

Bu nedenle, bir kullanıcı başlangıç ​​veya durdurma adresinde yazdıysa iki işlev çalıştırırız. İlk işlev ORS API’sını çağırır ve geokoordinatları (validateAdd) alır. Bu yapıldıktan sonra, ikinci bir işlevi arayacağız ve başlangıç/stop grafik katmanını temizleyeceğiz ve yeni bir nokta ekleyeceğiz (Addpoint):

var validateAdd = function(id){
  xhr("https://api.openrouteservice.org/geocode/search",{
    query: {
      api_key: apiKey,
      text: dojo.byId(id).value,
      ze: 1
    },
    handleAs: "json"
    }).then(function(data){
      try {
        dojo.byId(id).value = data["features"][0]["properties"]["label"];
        if (id == "StartPoint"){
          this.coordinates[0] = data["features"][0]["geometry"]["coordinates"];
          addPoint(data["features"][0]["geometry"]["coordinates"], "start");
        } else {
          this.coordinates[1] = data["features"][0]["geometry"]["coordinates"];
          addPoint(data["features"][0]["geometry"]["coordinates"], "end");
        }
      } catch (e) {
        alert("no address for "+ dojo.byId(id).value + " found!");
        button.setDisabled(true);
        if (id == "StartPoint"){
            this.coordinates[0] = 0;
          } else {
            this.coordinates[1] = 1;
          }
      }
    }, function(err){
      alert("calling the API failed: 
" + err);
    })
}

. eklenti İşlev geometriyi ve tanımlanmış bir işaretleyici sembolünü oluşturur ve grafik katmanına noktayı ekler. Bir rota bulma girişini değiştirdikçe, katmanları da temizleyeceğiz:

var addPoint = function(coords, type){
  var p = new Point(coords[0], coords[1]);
  this.map.getLayer('ROUTE').clear();
  if (type == "start"){
    this.map.getLayer('START').clear();
    var s = new SimpleMarkerSymbol().setSize(10).setColor("green");
    var g = new Graphic(p, s);
    this.coordinates[0] = p;
    glS.add(g);
  } else {
    this.map.getLayer('END').clear();
    var s = new SimpleMarkerSymbol().setSize(10).setColor("red");
    var g = new Graphic(p, s);
    this.coordinates[1] = p;
    glE.add(g);
  }
  button = registry.byId("RouteButton");
  if (this.coordinates[0] == 0 || this.coordinates[1] == 1){
    button.setDisabled(true);
  } else {
    button.setDisabled(false);
  }
}

Şimdi işlevlere sahip olduğumuz için kendimize sormamız gerekiyor: bu işlevler ne zaman çağrılacak. İki anwser:

• Bir kullanıcı bir adres girdikten sonra başka bir giriş seçer
• Bir kullanıcı girişi bir adresi “doldurmak” için basar

Her iki kullanım durumunda da uygun bir olay işlememiz var:

startIn = registry.byId('StartPoint');
startIn.on('blur', function(){
  validateAdd('StartPoint');
})
startIn.on('keypress', function(event) {
  if (event.keyCode == keys.ENTER) {
    validateAdd('StartPoint');
  }
});
stopIn = registry.byId('StopPoint');
stopIn.on('blur', function(){
  validateAdd('StopPoint');
})
stopIn.on('keypress', function(event) {
  if (event.keyCode == keys.ENTER) {
    validateAdd('StopPoint');
  }
});

Yönlendirme işlevleri

Güzergah bulgumuzu çalıştırmak için düğme, ayrı ayrı oluşturacağımız ve rota bulma işlevine bağlayacağımız için güzel bir dijit büyüsü kullanılarak oluşturulur:

myButton = new Button({
  label: "Get Route!",
  disabled: true,
  onClick: function(){
    getRoute();
  }
}, "RouteButton").startup();

Ve rota bulma işlevi, validateadd Fonksiyon ama farklı bir API uç noktasıyla:

var getRoute = function(){
  xhr('https://api.openrouteservice.org/v2/directions/driving-car',{
    query: {
      api_key: apiKey,
      start: this.coordinates[0].x.toString() + ',' + this.coordinates[0].y.toString(),
      end: this.coordinates[1].x.toString() + ',' + this.coordinates[1].y.toString()
    },
    handleAs: 'json'
  }).then(function(data){
    this.map.getLayer('ROUTE').clear();
    var polyline = new Polyline();
    polyline.addPath(data['features'][0]['geometry']['coordinates']);
    var symbol = new SimpleLineSymbol().setWidth(2).setColor('blue');
    var polylineGraphic = new Graphic(polyline, symbol);
    route.add(polylineGraphic);
  })
}

Özel ORS API anahtarıyla çalışmasını sağlamak

Değişken apikey görmüş olabilirsiniz. Widget kullanıcılarının kendi API anahtarlarını kullanmasına izin vereceğimiz için anahtarı uygulamanın ayarlarından okumamız gerekiyor. Önce ayarı değiştireceğiz.html ve API anahtarı girişini başlatacağız

  ${nls.apiKey}
  

Gördüğünüz gibi, gösterilen dizeler için de çok dil desteğimiz var. Bu yüzden temel NLS dosyasını değiştireceğiz (set/nls/strings.js) ilave olarak

define({
  root: ({
    apiKey: ""
  })
});

Ancak elbette, kullanıcı widget ayarına API anahtarını yazacak ve bu da widget.js’de kullanılmalıdır. Bu nedenle, sağlanan API anahtarını kaydediyoruz/iptal ediyoruz. set.js

define([
  'dojo/_base/declare',
  'jimu/BaseWidgetSetting'
],
function(declare, BaseWidgetSetting) {

  return declare([BaseWidgetSetting], {
    baseClass: 'jimu-widget-demo-setting',

    postCreate: function(){
      //the config object is passed in
      this.setConfig(this.config);
    },

    setConfig: function(config){
      this.textNode.value = config.apiKey;
    },

    getConfig: function(){
      //WAB will get config object through this method
      return {
        apiKey: this.textNode.value
      };
    }
  });
});

Şimdi, sağlanan API anahtarına erişiyoruz. widget.js “Başlangıç” yönteminin en üstünde:

apiKey = this.config.apiKey;

Biraz güzel stil

Şu anda kullanıcı girişleri biraz garip görünüyor, bu yüzden standart bir AGOL girişine uygun olmak için bazı CSS ekliyorum. Stil CSS/Style.css Görünüşe göre:

.jimu-widget-demo div:first-child{
  color: green;
}
.jimu-widget-demo div:nth-of-type(2) {
  color: red;
}
.jimu-widget-demo input{
margin-left: 10px;
width: 200px;
line-height: 30px;
border-color:  #d9dde0;
padding: 1px 10px;
}

Ve bu şimdi uygulamada çok daha iyi görünüyor:

Aynı giriş stilini/css/style.css ayarına uyguluyorum ve şimdi giriş de çok daha iyi görünüyor:

Widget’ı deneyin kendin (API kredileri mevcut olduğu sürece) veya zımpara.