1.JSONP原理

1.1.动态脚本注入

说明：通过创建 <script> 标签绕过浏览器同源策略

 1.2.回调约定

说明：服务端返回 函数名(JSON数据) 格式的JS代码

 1.3.自动执行

说明：浏览器加载脚本后立即触发前端预定义的回调函数（现代开发建议优先使用 CORS 替代）

2.测试接口

说明：apifox测试接口，响应成功。

3.安装依赖 

npm i jsonp

 

4.代码实现

说明：组件案例

<script setup>
import jsonp from "jsonp";  // 导入jsonp库用于跨域请求
import {onMounted} from "vue";  // 导入Vue生命周期钩子

// 最短路径分析函数
async function shortestPathAnalysis(baseUrl, pointArr){
  return new Promise((resolve, reject) => {
    // 请求参数配置
    const params = {
      hasLeastEdgeCount: false,  // 是否按最少弧段数查找
      parameter: JSON.stringify({  // 将分析参数转为JSON字符串
        resultSetting: {  // 结果返回设置
          returnEdgeFeatures: null,  // 不返回弧段属性
          returnEdgeGeometry: null,  // 不返回弧段几何信息
          returnEdgeIDs: null,  // 不返回弧段ID
          returnNodeFeatures: null,  // 不返回结点属性
          returnNodeGeometry: null,  // 不返回结点几何信息
          returnNodeIDs: null,  // 不返回结点ID
          returnPathGuides: null,  // 不返回路径引导信息
          returnRoutes: true  // 返回路径结果
        },
        weightFieldName: "length",  // 使用长度作为权重字段
        barrierEdgeIDs: null,  // 障碍弧段ID
        barrierNodeIDs: null,  // 障碍结点ID
        barrierPoints: null,  // 障碍点
        turnWeightField: null  // 转向权重字段
      }),
      nodes: JSON.stringify(pointArr),  // 将坐标点数组转为JSON字符串
      sectionCount: '1',  // 分段数
      sectionIndex: '0'  // 分段索引
    };

    // 将参数对象转换为查询字符串
    const queryString = Object.entries(params)
        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)  // 对每个值进行URL编码
        .join('&');  // 用&连接所有参数
    const url = `${baseUrl}?${queryString}`;  // 拼接完整URL
    // 发起JSONP请求
    jsonp(url, {
      param: 'callback',  // 回调参数名
      timeout: 100000  // 超时时间100秒
    }, (err, data) => {
      if (err) {
        reject(err);  // 错误时拒绝Promise
        return;
      }
      resolve(data);  // 成功时解析Promise
    });
  });
}

// 测试请求函数
const orderRequest = async () => {
  // 调用最短路径分析，传入服务地址和两个坐标点
  let result = await shortestPathAnalysis(
      "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun/path.jsonp",
      [
        {"x": 4494.7646522178, "y": -4672.6392297989},  // 起点坐标
        {"x": 4504.7354942047, "y": -4679.9418182963}  // 终点坐标
      ]
  )
}

// 组件挂载后自动执行测试请求
onMounted(() => {
  orderRequest()
})
</script>

<template>
  <!-- 空模板 -->
</template>

<style scoped>
/* 空样式 */
</style>

5.响应效果

 说明：响应成功