526互联

地图中构建折线-MultiPolyline

发布时间 2023-03-24 16:46:38作者: 中亿丰数字科技

最终效果展示
image.png

1. 定义中心坐标及折线路线点位，还有一些变量

let center = new TMap.LatLng(31.425260711331195, 120.62946926729728);
// 长三角智能建造观摩路线
let list = [
  [31.42604432119626, 120.62918471363571],
  [31.42592750179248, 120.62914163628693],
  [31.425841387274307, 120.62944570813443],
  [31.425702160429754, 120.62938863346972],
  [31.425655753681998, 120.6295598833359],
  [31.425718012910984, 120.62958564051655],
  [31.42565961962883, 120.62980709763042],
  [31.42562338439891, 120.62979548813439],
  [31.425572149667694, 120.62998502887433],
  [31.42549591357571, 120.62995812426482],
  [31.425577488193156, 120.6296469348224],
  [31.42539593836639, 120.62958616002902],
  [31.425310433830568, 120.62991884142832],
  [31.425378623881905, 120.62994263314556],
  [31.42530252600263, 120.63021463913697],
  [31.425217465001797, 120.63018699366216],
  [31.425273830768454, 120.62996670535722],
  [31.424780559884972, 120.62978413601036],
  [31.424839358175472, 120.62956949787122],
  [31.42469438545215, 120.62951932703413],
  [31.42478281730778, 120.62921409738897],
  [31.42481374362959, 120.62922397905118],
  [31.424743089413287, 120.62947262511602],
  [31.424771174180243, 120.62948297623348],
  [31.42476444528754, 120.62950710751113],
  [31.424619170428215, 120.62945276064966],
  [31.424848059953952, 120.62862470578295],
  [31.425958762526687, 120.62902080977688],
  [31.4259458537954, 120.62907054890854],
  [31.4260643484025, 120.62911832378813],
];
let lineMarkerList = {};
let polylineArr = {};
let dashPolylineArr = {};
let map = null;
let allPathArr = [];

2. 初始化地图

  map = new TMap.Map("container", {
    center: center, //设置中心点
    zoom: 18, //设置地图缩放比例
  });

3. 创建 MultiPolyline

a. 显示箭头的路线

function initPolyline() {
  polylineArr = new TMap.MultiPolyline({
    map: map,
    id: `polyline-layer1`,
    styles: {
      style: new TMap.PolylineStyle({
        color: "#ea5442", // 线填充色
        borderWidth: 1,
        width: 6, // 折线宽度
        borderColor: "#d12921", // 边线颜色
        lineCap: "square",
        showArrow: true, // 是否沿线方向展示箭头
        arrowOptions: {
          width: 8,
          height: 5,
          space: 80,
        },
        lineCap: "butt", // 线端头方式
      }),
    },
    geometries: [
      {
        // 第1条线
        id: "pl_1", // 折线唯一标识，删除时使用
        styleId: "style", // 绑定样式名
        paths: allPathArr,
      },
    ],
  });
}

b. 显示虚线的路线

function initDashline() {
  dashPolylineArr = new TMap.MultiPolyline({
    map: map,
    id: `polyline-layer-dash1`,
    styles: {
      style: new TMap.PolylineStyle({
        color: "#CCCCCC", // 线填充色
        borderWidth: 0,
        width: 1, // 折线宽度
        dashArray: [10, 10],
        borderColor: "#d12921", // 边线颜色
        lineCap: "butt", // 线端头方式
      }),
    },
    geometries: [
      {
        // 第1条线
        id: "pl_1", // 折线唯一标识，删除时使用
        styleId: "style", // 绑定样式名
        paths: allPathArr,
      },
    ],
  });
}

4. 创建开头结束的图标

function lnitLineMarker() {
  let obj = {};
  // console.log(item,index)
  let startItem = allPathArr[0];

  let lastItem = allPathArr[allPathArr.length - 1];
  obj.startMarker = new TMap.MultiMarker({
    map: map,
    styles: {
      // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 34, // 点标记样式宽度（像素）
        height: 34, // 点标记样式高度（像素）
        src: "https://ts1.cn.mm.bing.net/th/id/R-C.6a3a0edaf8ff6e78c70670ed115a09d9?rik=WIrSFlIZrzI%2fxQ&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_124172.png&ehk=xfwhsee%2bGGVoAPdWIQyDPRqadSlvWZvgY5Ldjl2Cjow%3d&risl=&pid=ImgRaw&r=0", // 图片路径
        // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 10, y: 30 },
      }),
    },
    geometries: [
      {
        id: 0, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: `myStyle`, // 指定样式id
        position: startItem, // 点标记坐标位置
        properties: {
          // 自定义属性
          title: "marker1",
        },
      },
    ],
  });
  obj.endMarker = new TMap.MultiMarker({
    map: map,
    styles: {
      // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 34, // 点标记样式宽度（像素）
        height: 34, // 点标记样式高度（像素）
        src: "https://ts1.cn.mm.bing.net/th/id/R-C.4ee083e4fa740691d96351488fc75f06?rik=viHAll4AUWqMOQ&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f16%2f83%2frUpSaMyEr7.jpg&ehk=GOv7w%2fhYhVCf4kS4jrLWMbrI9L6NddhtN1GFsrGYz7Q%3d&risl=&pid=ImgRaw&r=0", // 图片路径
        // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 10, y: 30 },
      }),
    },
    geometries: [
      {
        id: 1, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: `myStyle`, // 指定样式id
        position: lastItem, // 点标记坐标位置
        properties: {
          // 自定义属性
          title: "marker1",
        },
      },
    ],
  });
  lineMarkerList = obj;
}

5. 初始化路线图

init();

function init() {
  // map = new TMap.Map("container", {
  //   center: center, //设置中心点
  //   zoom: 18, //设置地图缩放比例
  // });
  allPathArr = list.map((item) => {
    return new TMap.LatLng(item[0], item[1]);
  });

  initPolyline();
  initDashline();
  lnitLineMarker();
}

6. 完整实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>简单折线</title>
  </head>
  <script
    charset="utf-8"
    src="https://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
  ></script>

  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      let center = new TMap.LatLng(31.425260711331195, 120.62946926729728);
      // 长三角智能建造观摩路线
      let list = [
        [31.42604432119626, 120.62918471363571],
        [31.42592750179248, 120.62914163628693],
        [31.425841387274307, 120.62944570813443],
        [31.425702160429754, 120.62938863346972],
        [31.425655753681998, 120.6295598833359],
        [31.425718012910984, 120.62958564051655],
        [31.42565961962883, 120.62980709763042],
        [31.42562338439891, 120.62979548813439],
        [31.425572149667694, 120.62998502887433],
        [31.42549591357571, 120.62995812426482],
        [31.425577488193156, 120.6296469348224],
        [31.42539593836639, 120.62958616002902],
        [31.425310433830568, 120.62991884142832],
        [31.425378623881905, 120.62994263314556],
        [31.42530252600263, 120.63021463913697],
        [31.425217465001797, 120.63018699366216],
        [31.425273830768454, 120.62996670535722],
        [31.424780559884972, 120.62978413601036],
        [31.424839358175472, 120.62956949787122],
        [31.42469438545215, 120.62951932703413],
        [31.42478281730778, 120.62921409738897],
        [31.42481374362959, 120.62922397905118],
        [31.424743089413287, 120.62947262511602],
        [31.424771174180243, 120.62948297623348],
        [31.42476444528754, 120.62950710751113],
        [31.424619170428215, 120.62945276064966],
        [31.424848059953952, 120.62862470578295],
        [31.425958762526687, 120.62902080977688],
        [31.4259458537954, 120.62907054890854],
        [31.4260643484025, 120.62911832378813],
      ];

      let lineMarkerList = {};
      let polylineArr = {};
      let dashPolylineArr = {};
      let map = null;
      let allPathArr = [];

      // 初始化路线图
      init();

      function init() {
        map = new TMap.Map("container", {
          center: center, //设置中心点
          zoom: 18, //设置地图缩放比例
        });
        allPathArr = list.map((item) => {
          return new TMap.LatLng(item[0], item[1]);
        });

        initPolyline();
        initDashline();
        lnitLineMarker();
      }

      // 显示箭头的路线
      function initPolyline() {
        polylineArr = new TMap.MultiPolyline({
          map: map,
          id: `polyline-layer1`,
          styles: {
            style: new TMap.PolylineStyle({
              color: "#ea5442", // 线填充色
              borderWidth: 1,
              width: 6, // 折线宽度
              borderColor: "#d12921", // 边线颜色
              lineCap: "square",
              showArrow: true, // 是否沿线方向展示箭头
              arrowOptions: {
                width: 8,
                height: 5,
                space: 80,
              },
              lineCap: "butt", // 线端头方式
            }),
          },
          geometries: [
            {
              // 第1条线
              id: "pl_1", // 折线唯一标识，删除时使用
              styleId: "style", // 绑定样式名
              paths: allPathArr,
            },
          ],
        });
      }

      // 显示虚线的路线
      function initDashline() {
        dashPolylineArr = new TMap.MultiPolyline({
          map: map,
          id: `polyline-layer-dash1`,
          styles: {
            style: new TMap.PolylineStyle({
              color: "#CCCCCC", // 线填充色
              borderWidth: 0,
              width: 1, // 折线宽度
              dashArray: [10, 10],
              borderColor: "#d12921", // 边线颜色
              lineCap: "butt", // 线端头方式
            }),
          },
          geometries: [
            {
              // 第1条线
              id: "pl_1", // 折线唯一标识，删除时使用
              styleId: "style", // 绑定样式名
              paths: allPathArr,
            },
          ],
        });
      }

      // 路线的开头结束显示图标
      function lnitLineMarker() {
        let obj = {};
        // console.log(item,index)
        let startItem = allPathArr[0];

        let lastItem = allPathArr[allPathArr.length - 1];
        obj.startMarker = new TMap.MultiMarker({
          map: map,
          styles: {
            // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            myStyle: new TMap.MarkerStyle({
              width: 34, // 点标记样式宽度（像素）
              height: 34, // 点标记样式高度（像素）
              src: "https://ts1.cn.mm.bing.net/th/id/R-C.6a3a0edaf8ff6e78c70670ed115a09d9?rik=WIrSFlIZrzI%2fxQ&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_124172.png&ehk=xfwhsee%2bGGVoAPdWIQyDPRqadSlvWZvgY5Ldjl2Cjow%3d&risl=&pid=ImgRaw&r=0", // 图片路径
              // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
              anchor: { x: 10, y: 30 },
            }),
          },
          geometries: [
            {
              id: 0, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              styleId: `myStyle`, // 指定样式id
              position: startItem, // 点标记坐标位置
              properties: {
                // 自定义属性
                title: "marker1",
              },
            },
          ],
        });
        obj.endMarker = new TMap.MultiMarker({
          map: map,
          styles: {
            // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            myStyle: new TMap.MarkerStyle({
              width: 34, // 点标记样式宽度（像素）
              height: 34, // 点标记样式高度（像素）
              src: "https://ts1.cn.mm.bing.net/th/id/R-C.4ee083e4fa740691d96351488fc75f06?rik=viHAll4AUWqMOQ&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f16%2f83%2frUpSaMyEr7.jpg&ehk=GOv7w%2fhYhVCf4kS4jrLWMbrI9L6NddhtN1GFsrGYz7Q%3d&risl=&pid=ImgRaw&r=0", // 图片路径
              // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
              anchor: { x: 10, y: 30 },
            }),
          },
          geometries: [
            {
              id: 1, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              styleId: `myStyle`, // 指定样式id
              position: lastItem, // 点标记坐标位置
              properties: {
                // 自定义属性
                title: "marker1",
              },
            },
          ],
        });
        lineMarkerList = obj;
      }
    </script>
  </body>
</html>

参考链接

作者：白马不是马