The connector data source calculates the actual distance between two longitude and latitude

1. Case Background

Use a custom connector to integrate data with AMAP, and then process the data returned by the connector through the connector data source. After entering the location name, it is converted to latitude and longitude (Geocoding). Then, the YIDA positioning component is used to obtain the longitude and latitude of the current location, and the two groups of longitude and latitude are calculated to obtain the distance between the two addresses. Applicable to employee check-in assessment, customer visit distance calculation, business trip verification reference and other scenarios.

2. Achieve results

此处为语雀视频卡片，点击链接查看：Screenrecording_20220308_145720.mp4

3. Implementation steps

3.1 Step 1: Create a custom connector

Create a custom connector and call AMAP development platformGeocodingInterface to enter an address in the form to obtain its longitude and latitude coordinates.

Procedure:

1. YIDA home page platform management> connector factory> create connector> select custom connector> name "AMAP obtains address longitude and latitude 」. (As shown in the following figure)

2. Enter basic connector information. For more information, seeYIDA basic information about custom connectors. (As shown in the following figure)

3. Configure connector security verification information. For more information, seeYIDA introduction to custom connector security verification configuration, this example uses the API key authentication method. (As shown in the following figure)

4. Define operator. For more information, seeYIDA custom connector configuration function operation definition. (As shown in the following figure)

5. Configure authentication, enter the name of the authentication template, select the created connector, and then enter the API key. (As shown in the following figure)

Instructions

• For more information about authentication templates, see:YIDA custom connector authentication configuration.
• For more information about how to obtain the API key of AMAP geocoding interface, see:AMAP open platform-get key.

3.2 Step 2: Create a form

The new approach is to create a common form and bind the custom connector data source created in step 1 to process and display data.

Procedure:

1. Design a form and add positioning components and text components. (As shown in the following figure)

2. Bind positioning componentsonChange()Event, which is used to convert data to longitude and latitude coordinates. (As shown in the following figure)

Note: the code in the preceding figure is as follows,Replace the unique identifier of the component involved during use!

export function onChange({ value }) {
  // textField_l0hkk5y1 为「当前经度」文本框唯一标识
  this.$("textField_l0hkk5y1").setValue(JSON.stringify(value.longitude));
  // textField_l0hkk5y2 为「当前纬度」文本框唯一标识
  this.$("textField_l0hkk5y2").setValue(JSON.stringify(value.latitude));
}

3. Create and configure a connector data source. For more information, see:YIDA connector data source. (As shown in the following figure)

4. Bind to the enter destination text boxonBlur()Event, and process the data returned by the connector data source within the event. (As shown in the following figure)

Note: the preceding code is as follows,Pay attention to the replacement of the unique identifier of the component during use!

export function onBlur() {
  // textField_l0gfhngc 为「输入查询地点」文本组件的唯一标识，作用是获取组件数据。
  let value = this.$("textField_l0gfhngc").getValue();
  //处理连接器数据源返回的数据，georegeo 为数据源名称。
  const dataSource = this.dataSourceMap["georegeo"];
  const fetchOption = dataSource["fetchOptions"];
  if (fetchOption) {
    const fetchInputs = fetchOption["data"]["inputs"];
    var inputsObj = JSON.parse(fetchInputs);
    inputsObj["Query"] = { address: value };
    return dataSource
      .load({
        inputs: JSON.stringify(inputsObj),
      })
      .then((content) => {
        // content 为连接器返回的JSON格式数据，要处理成对象格式。
        const res = JSON.parse(JSON.stringify(content));
        const data = res.geocodes;
        let geo = "";
        const loc = data.map((item) => {
          geo = item.location;
          return geo;
        });
        // item.location 数据格式为(经度,纬度)的坐标形式，需要进行数据截取后分别赋值给不同的组件
        const ind = geo.indexOf(",");
        const longitude = geo.slice(0, ind);
        const latitude = geo.slice(ind + 1);
        // textField_l0hjdbrg 为「目标经度」组件的唯一标识
        this.$("textField_l0hjdbrg").setValue(longitude);
        // textField_l0hjdbrh 为「目标纬度」组件的唯一标识
        this.$("textField_l0hjdbrh").setValue(latitude);
        // textField_l0hkk5y1 为「当前纬度」组件的唯一标识
        let lng1 = this.$("textField_l0hkk5y1").getValue();
        // textField_l0hkk5y2 为「当前纬度」组件的唯一标识
        let lat1 = this.$("textField_l0hkk5y2").getValue();
        var radLat1 = this.Rad(lat1);
        var radLat2 = this.Rad(latitude);
        var a = radLat1 - radLat2;
        var b = this.Rad(lng1) - this.Rad(longitude);
        var s =
          2 *
          Math.asin(
            Math.sqrt(
              Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) *
                  Math.cos(radLat2) *
                  Math.pow(Math.sin(b / 2), 2)
            )
          );
        s = s * 6378.137;
        s = Math.round(s * 10000) / 10000; /* 输出为公里 */
        this.$("numberField_l0hrdz6u").setValue(s);
      });
  } else {
    console.log("no fetchOption found");
  }
}

5. Add in Page JS panelRad()The processing function is used to convert longitude and latitude into the form of a function with moderate table division for easy calculation. (As shown in the following figure)

Note: The preceding code is as follows.

export function Rad(d) {
  return (d * Math.PI) / 180.0; /* 经纬度转换成三角函数中度分表形式。 */
}