AWS 地图的使用

对卦卦上心

已于 2023-05-15 14:45:31 修改

阅读量1k

点赞数 1

文章标签： aws javascript 前端地图

于 2023-05-06 15:22:25 首次发布

本文链接：https://blog.csdn.net/liu0218/article/details/130528204

版权

文章目录

AWS 地图的使用

AWS 地图的使用

在Amazon Location 控制台中，点击“地图“，然后点击”创建地图“，在创建地图的页面中输入地图名称和地图说明，然后再选择地图的样式，然后同意Amazon Location Service 的条款与条件，然后点击创建地图。

一、显示地图

推荐使用MapLibre GL JS，但是仍然需要配合Amazon Location Service进行使用。

（1）在HTML页面的使用，我们首先就是要创建一个包含地图容器的HTML页面：

创建一个id为map的div标签

<div id='map'></div>

tip:需要给这个盒子高为100vh的样式

height:100vh;

（2）引入MapLibre GL JS及其关联的 CSS，引入mazonaws的sdk，引入AWS Amplify核心库，例：

<!-- CSS样式引入 -->
<link
  href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css"
  rel="stylesheet"
/>


<!-- js引入 -->
<script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script>
<script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
<script>
  // 在此处编写页面中需要的js代码
</script>

（3）在JS中配置地图

① 输入地图资源的名称和标识符。

// 身份池ID
const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd";
// 地图资源名称
const mapName = "ExampleMap";

标识符ID就是身份池ID，在"Cognito"中点击"联合身份"，然后在里面在点击示例代码，就可以在其中获取到身份池ID

② 使用您在身份验证中创建的未经身份验证的身份池实例化凭证提供商。

AWS.config.region = identityPoolId.split(":")[0];

const credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: identityPoolId,
});

（4）签名

MapLibre GL JS 地图实例包含一个transformRequest选项，您可以使用该选项在请求发出之前对其进行拦截和修改。

要使用签名版本 4 使用从 Amazon Cognito 获得的证书签署AWS请求，请输入以下函数。

// use Signer from @aws-amplify/core
const { Signer } = window.aws_amplify_core;
 
/**
 * Sign requests made by MapLibre GL JS using AWS SigV4.
 */
function transformRequest(url, resourceType) {
  if (resourceType === "Style" && !url.includes("://")) {
    // resolve to an AWS URL
    url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
  }
 
  if (url.includes("amazonaws.com")) {
    // only sign AWS requests (with the signature as part of the query string)
    return {
      url: Signer.signUrl(url, {
        access_key: credentials.accessKeyId,
        secret_key: credentials.secretAccessKey,
        session_token: credentials.sessionToken,
      }),
    };
  }
 
  // don't sign
  return { url };
}

（5）初始化地图

要在加载页面后显示地图，必须初始化地图。您可以调整初始地图位置、添加其他控件和叠加数据。

async function initializeMap() {
  // load credentials and set them up to refresh
  await credentials.getPromise();
 
  // Initialize the map
  const map = new maplibregl.Map({
    container: "map",
    center: [-123.1187, 49.2819], // initial map centerpoint
    zoom: 10, // initial map zoom
    style: mapName,
    transformRequest,
  });
 
  map.addControl(new maplibregl.NavigationControl(), "top-left");
}
 
initializeMap();

（6）完整代码

<!-- index.html -->
<html>
  <head>
    <link
      href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
      }
 
      #map {
        height: 100vh;
      }
    </style>
  </head>
 
  <body>
    <!-- map container -->
    <div id="map" />
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script>
    <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
    <script>
      //从@aws-amplify/core中引入Signer签名方法
      const { Signer } = window.aws_amplify_core;
 
      // configuration
      const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd"; // 身份
      const mapName = "ExampleMap"; // 地图资源名称
      AWS.config.region = identityPoolId.split(":")[0];
 
      // instantiate a Cognito-backed credential provider
      const credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: identityPoolId,
      });
 
      /**
       * Sign requests made by MapLibre GL JS using AWS SigV4.
       */
      function transformRequest(url, resourceType) {
        if (resourceType === "Style" && !url.includes("://")) {
          // resolve to an AWS URL
          url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
        }
 
        if (url.includes("amazonaws.com")) {
          // 签名
          return {
            url: Signer.signUrl(url, {
              access_key: credentials.accessKeyId,
              secret_key: credentials.secretAccessKey,
              session_token: credentials.sessionToken,
            }),
          };
        }
 
        // don't sign
        return { url };
      }
const locationa = new AWS.Location({
			credentials,
			region: AWS.config.region
		});
      /**
       * 初始化地图
       */
      async function initializeMap() {0
        // load credentials and set them up to refresh
        await credentials.getPromise();
 
        // Initialize the map
        const map = new maplibregl.Map({
          container: "map",
          center: [123.1187, 49.2819], // 初始化地图的经纬度，可自行修改
          zoom: 10, // 初始化地图的层级
          style: mapName,
          transformRequest,
        });
 
        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }
 
      initializeMap();
    </script>
  </body>
</html>

二、位置搜索

先决条件

1、创建位置索引资源，设置好名称，说明是可选的，同意协议就可以创建。

2、对请求进行身份验证，要确保我们在初始化地图的身份池中的角色拥有位置搜索的权限，在IAM中给我们使用的角色要赋予对应的权限，例

"geo:SearchPlaceIndexForPosition" //地理编码权限
"geo:SearchPlaceIndexForText" //反向地理编码权限

1.通过地理名称获取对应经纬度的实现方法

API：searchPlaceIndexForText

// 查询的参数
let locationparms = {
	// "BiasPosition": [number],  //一个可选参数，指示对更接近指定位置的地方的偏好
	// "FilterBBox": [number], //现在边界
	// "FilterCountries": ["string"], //一个可选参数，用于通过仅返回指定国家/地区列表中的地点来限制搜索结果。
	// "Language": "en", //语言
	// "MaxResults": number, //可选参数。每个请求返回的最大结果数
	Text: locationNmae, // 要搜索的地理的名称
	IndexName: 'explore.place', // 位置索引资源的名称
}

locationa.searchPlaceIndexForText(locationparms, async (err, data) => {
	if (err) {
		console.log(err);
	} else {
		// console.log(JSON.stringify(data), '通过输入的文本查询位置');
	}
})

2.通过搜索经纬度获取位置名称的实现方法

API：searchPlaceIndexForPosition

let paramsa = {
	IndexName: placesName,
	Position: [arg.msg.lnt, arg.msg.lat], //经纬度，必须是数组形式 
	Language: "zh-CN",// 响应的语言
	MaxResults: "5"
};
locationa.searchPlaceIndexForPosition(paramsa, function(err, data) {
	if (err) {
		console.log(err)
	} else {
		console.log(data);	//通过经纬度查询返回的结果
		}
});

三、距离、时间及线路计算

先决条件

1、创建路由路线计算器资源，设置好名称和选择好数据提供商并且同意协议，点击创建路由计算器实现资源创建

2、对请求进行身份验证，要确保我们在初始化地图的身份池中的角色拥有位置搜索的权限，在IAM中给我们使用的角色要赋予对应的权限，例

"geo:CalculateRoute" //赋予角色位置计算的权限

实现方法

API：calculateRoute

var params = {
	"CalculatorName": "explore.route-calculator",
	"DeparturePosition": [
		Number(startPiot.startLng), Number(startPiot.startLat)
	], //起点经纬度
	"DestinationPosition": [
		Number(endPiot.endLng), Number(endPiot.endLat)
	], //终点经纬度
	"WaypointPositions": [],
	"TravelMode": "Car",  //出行方式，有Walking和Car两个选项
	"IncludeLegGeometry": true,
	"DistanceUnit": "Kilometers",
	"DepartNow": false,
	"CarModeOptions": {
		"AvoidFerries": false,
		"AvoidTolls": false
	}
};
// 路线计算
locationa.calculateRoute(params, async function(err, data) {
	if (err) {
		console.log(err);
	}
	else{
		console.log(data); //返回路线坐标 、 距离 、 所需时间
	}
})