第四章WebGIS开发——第5节-几何计算

GIS开发特训营

已于 2022-03-24 13:34:56 修改

阅读量395

点赞数

分类专栏： 3天学会WebGIS开发-从入门到精通文章标签： javascript html5 css 开发语言前端

于 2022-03-24 11:41:26 首次发布

本文链接：https://blog.csdn.net/gis_witch/article/details/123707022

版权

3天学会WebGIS开发-从入门到精通专栏收录该内容

17 篇文章 58 订阅

订阅专栏

有时, 我们需要计算两点之间的直线距离, 或者一个区域的实际面积，这个就是几何计算。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图参数</title>
    <!-- 一. 引入资源 -->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: '8e98f2628937efdfb72045f19b564185',
      }
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=6e84ad8efab17b016b72ff63aab13a85"
    ></script>
    <!-- 三. 设置地图样式 -->
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 二. 创建地图容器 -->
    <div id="container"></div>
    <!-- 四. 加载地图 -->
    <script>
      // 声明一个变量
      var map = new AMap.Map('container', {
        center: [114.3, 30.6], // 设置地图中心点的经纬度
        zoom: 12, // 地图的缩放比例(3~20)
      })
      // 1. 创建两个点(设置可以拖动)
      var m1 = new AMap.Marker({
        map: map, // 将m1这个点添加到map地图中
        draggable: true, // 配置该点可以拖动
        position: new AMap.LngLat(114.255025, 30.621275),
      })
      var m2 = new AMap.Marker({
        map: map, // 将m1这个点添加到map地图中
        draggable: true, // 配置该点可以拖动
        position: new AMap.LngLat(114.334332, 30.579608),
      })
      // 让地图根据覆盖物调整地图显示区域
      map.setFitView()
      // 2. 准备一条线
      var line = new AMap.Polyline({
        strokeColor: '#80d8ff', // 描边的颜色
        isOutline: true, // 包含轮廓
        outerlineColor: 'white',
      })
      line.setMap(map)
      // 3. 准备文本
      var text = new AMap.Text({
        text: '',
        style: {
          'background-color': '#29b6f6',
          'border-color': '#e1f5fe',
          'font-size': '16px',
        },
      })
      text.setMap(map)
      // 4. 计算
      function compute() {
        // 得到m1和m2的经纬度
        var p1 = m1.getPosition()
        var p2 = m2.getPosition()

        // 希望text文本显示在这个经纬度的中间
        var textPos = p1.divideBy(2).add(p2.divideBy(2)) // (p1+p2)/2

        // 计算两个点之间的距离
        var distance = Math.round(p1.distance(p2))
        var path = [p1, p2]
        line.setPath(path) // 绘制线. 根据p1, p2起始点和终点的坐标

        text.setText('距离为: ' + distance + '米')
        text.setPosition(textPos)
      }
      compute()
      m1.on('dragging', compute)
      m2.on('dragging', compute)
    </script>
  </body>
</html>

戳我领取完整版课程试听：

领取免费GIS开发试听课程https://www.wjx.cn/vj/e68jhwR.aspx

GIS开发特训营

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第四章WebGIS开发——第5节-几何计算

有时, 我们需要计算两点之间的直线距离, 或者一个区域的实际面积.这个就是几何计算示例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=
复制链接

扫一扫