mapbox初使用

MapBox地图使用方式

1. 申请账号https://www.mapbox.com/
2. 选择自己开发的环境
3. Select a method for installing Mapbox GL JS 选择下载方式
4. 申请accessToken
5. 自定义地图样式
6. 初次化地图

 mapboxgl.accessToken =
        "your accesstoken";
      var map = new mapboxgl.Map({
        container: "map", // container id 绑定的组件的id
        style: "your style", //地图样式，可以使用官网预定义的样式,也可以自定义
        center: [this.lag, this.lat], // 初始坐标系，这个是南京建邺附近
        zoom: 3, // starting zoom 地图初始的拉伸比例
        pitch: 0, //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        antialias: true, //抗锯齿，通过false关闭提升性能
      });

点线联合

map.on("load", () => {
       
        // 虚线
        map.addSource("lines-dash", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  color: "#EBCE2D", // red
                },
                geometry: {
                  type: "LineString",
                  coordinates: this.expectedTimelines,
                },
              },
            ],
          },
        });

        map.addLayer({
          id: "lines-dash",
          type: "line",
          source: "lines-dash",
          paint: {
            "line-width": 3,
            "line-color": ["get", "color"],
            "line-dasharray": [2, 4],
          },
        });

         // 实线
        map.addSource("lines", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  color: "#1E8EFF", // red
                },
                geometry: {
                  type: "LineString",
                  coordinates: this.timelines,
                },
              },
            ],
          },
        });

        map.addLayer({
          id: "lines",
          type: "line",
          source: "lines",
          paint: {
            "line-width": 3,
            "line-color": ["get", "color"],
          },
        });


        //轨迹点
        map.loadImage(
          require("@/static/imgs/icon_point.png"),
          (error, image) => {
            if (error) throw error;

            // Add the image to the map style.
            map.addImage("blackpoint", image);

            // Add a data source containing one point feature.
            map.addSource("point", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: this.pointArray,
              },
            });

            // Add a layer to use the image to represent the data.
            map.addLayer({
              id: "points",
              type: "symbol",
              source: "point", // reference the data source
              layout: {
                "icon-image": "blackpoint", // reference the image
                "icon-size": 1,
              },
            });
          }
        );

        //当前货物点
        map.loadImage(
          require("@/static/imgs/icon_pos_now.png"),
          (error, image) => {
            if (error) throw error;

            // Add the image to the map style.
            map.addImage("goodpoint", image);

            // Add a data source containing one point feature.
            map.addSource("goodpoint", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: this.goodsPoint,
              },
            });

            // Add a layer to use the image to represent the data.
            map.addLayer({
              id: "goodpoint",
              type: "symbol",
              source: "goodpoint", // reference the data source
              layout: {
                "icon-image": "goodpoint", // reference the image
                "icon-size": 1,
              },
            });
          }
        );

        //开始的运货点
        map.loadImage(
          require("@/static/imgs/icon_bubble.png"),
          (error, image) => {
            if (error) throw error;
            map.addImage("custom-marker", image);
            // Add a GeoJSON source with 2 points
            map.addSource("start-points", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: this.startPoint,
              },
            });

            // Add a symbol layer
            map.addLayer({
              id: "start-points",
              type: "symbol",
              source: "start-points",
              layout: {
                "icon-image": "custom-marker",
                // get the title name from the source's "title" property
                "text-field": ["get", "title"],
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, -1],
                "text-anchor": "top",
                "text-max-width": 5,
              },
              paint: {
                "text-color": "#fff",
                "text-opacity": 1
              },
            });
          }
        );
      });