maptalks地图控制器、限制拖动区域、marker标记、导出示例

╰+哭是因爲堅強的太久メ 2022-09-12 08:58 621阅读 0赞

// 地图控制器
    <template lang="pug">
        .main
            #map.container
            .pane(@click="save") 导出
    </template>
    <script>
    import "maptalks/dist/maptalks.css";
    import * as maptalks from "maptalks";
    export default { 
      data() { 
        return { 
          map: "",
        };
      },
      mounted() { 
        this.map = new maptalks.Map("map", { 
          center: [120.20377025390627, 30.19386063195693], //中心坐标位置
          zoom: 14,
          pitch: 45, //倾斜角度
          attribution: true,
          zoomControl: true, // 添加缩放等级控制器
          scaleControl: true, // 显示地图标尺
          overviewControl: true, // add overview control
          baseLayer: new maptalks.TileLayer("base", { 
            urlTemplate:
              "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
            subdomains: ["a", "b", "c", "d"],
            attribution:
              '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>',
          }),
          layers: [new maptalks.VectorLayer("v")],
        });
        // this.map.setMinZoom(14).setMaxZoom(14); //限制缩放等级
        // 地图事件
        this.map.on("click", function(param) { 
          console.log(param);
        });
        // 限制地图区域
        var extent = this.map.getExtent();
    
        // set map's max extent to map's extent at zoom 14
        this.map.setMaxExtent(extent);
        this.map.setZoom(this.map.getZoom() - 2, {  animation: false });
        this.map.getLayer("v").addGeometry(
          new maptalks.Polygon(extent.toArray(), { 
            symbol: {  polygonOpacity: 0, lineWidth: 5 },
          })
        );
    
        // 添加marker标记
        const point = new maptalks.Marker(
          [120.20954236770632, 30.179986886441302],
          { 
            visible: true,
            editable: true,
            cursor: "pointer",
            shadowBlur: 0,
            shadowColor: "#fff",
            draggable: true, //是否可拖拽
            dragShadow: false, // 拖拽是否显示阴影
            drawOnAxis: null, // force dragging stick on a axis, can be: x, y
            symbol: { 
              textFaceName: "sans-serif",	//字体
              textName: "MapTalks",	//文字
              textFill: "#34495e",	//文字颜色
              textHorizontalAlignment: "right",
              textSize: 20,	//文字大小
            },
          }
        );
        new maptalks.VectorLayer("vector", point).addTo(this.map);
    
        // 线条
        const line = new maptalks.LineString(
        	//线条区域
          [
            [120.20954236770632, 30.179986886441302],
            [120.25992446770632, 30.179988886441302],
          ],
          { 
            arrowStyle: null, // arrow-style : now we only have classic
            arrowPlacement: "vertex-last", // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
            visible: true,
            editable: true,
            cursor: null,
            shadowBlur: 0,
            shadowColor: "black",
            draggable: false,
            dragShadow: false, // display a shadow during dragging
            drawOnAxis: null, // force dragging stick on a axis, can be: x, y
            symbol: { 
              lineColor: "#1bbc9b",
              lineWidth: 3,
            },
          }
        );
        new maptalks.VectorLayer("vector1", line).addTo(this.map);
    
        // 多边形
      },
      methods: { 
        // 地图导出图片
        save() { 
          var data = this.map.toDataURL({ 
            mimeType: "image/jpeg", // or 'image/png'
            save: true, // to pop a save dialog
            fileName: "map1", // file name
          });
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    .main { 
      position: relative;
      .pane { 
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 5px 10px;
        color: #fff;
        cursor: pointer;
        background: rgba($color: #000000, $alpha: 0.6);
      }
    }
    .main,
    .container { 
      width: 100%;
      height: 100%;
    }
    </style>