maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角

maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角

1、图层置顶 置底

 layer.show().bringToFront();
 layerDynamic.bringToBack();
1
2

2、清空所有图层

//所有图层的id
let layerList: [
        "qyfb0",
        "qyfb1",
        "fxdfb0",
        "fxdfb1",
        "fxdfb2",
        "fxdfb3",
        "yhdfb1",
        "yhdfb0",
        "yjllfb1",
        "yjllfb2",
        "yjllfb3",
        "yjllfb_fire"
      ]
HideAllLayer() {
    let that = this;
    that.layerList.forEach(item => {
        let layer = this.map.getLayer(item);
        if (layer) {
            if (layer.isVisible()) {
                layer.hide();
            }
            layer.hide();
        }
    });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、添加图层并显示

//添加图层并显示
AddLayer(id) {
    let layer = this.map.getLayer(id);
    if (layer) {
        if (layer.isVisible()) {
            return layer;
        }
        layer.show();
        // this.showLabels(layer);
    } else {
        layer = new maptalks.VectorLayer(id).addTo(this.map);
    }
    return layer;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、添加标注

//添加标注
AddMarker(id, data, location, withEvent, hasDetail, layer, icon) {
    let that = this;
    const markerFile = !icon ? "common.png" : icon;
    const marker = new maptalks.Marker(location, {
        id: data.OBJECTID,
        symbol: {
            markerWidth: {
                stops: [
                    [12, 25],
                    [13, 25],
                    [14, 30],
                    [15, 30],
                    [17, 35],
                    [18, 40],
                    [19, 40]
                ]
            },
            markerHeight: {
                stops: [
                    [12, 25],
                    [13, 25],
                    [14, 30],
                    [15, 30],
                    [17, 35],
                    [18, 40],
                    [19, 40]
                ]
            },
            markerFile: require(`../../../../static/safeProduct/map/${markerFile}`)
        },
        properties: data
    });
    // console.log(withEvent, "withEvent");
    if (withEvent) {
        marker.on("click mouseover mouseout", function(e) {
            if (e.type == "mouseover") {
                MapEngine.setInfoWindow(
                    e.target,
                    null,
                    id,
                    false,
                    null,
                    null,
                    null,
                    true
                );
            } else if (e.type == "mouseout") {
                e.target.closeInfoWindow();
            } else if (e.type == "click") {
                that.currentSItem = e.target.getProperties();
                //点击放大
                // that.showModel = true;
                that.paramsList.CamList = that.currentSItem.indexCode;
                // that.OpenPlayer(that.currentSItem);
                that.play();
            }
        });
    }
    layer.addGeometry(marker);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

5、切换底图

// 地图切换
mapChange(item) {
    // console.log(config.MapServiceUrl)
    // debugger;
    if (item == "2.5D") {
        MapEngine.setBaseMap(
            "yx_map",
            config.MapServiceUrl.tileLayerUrl.yxMapUrl
        );
        MapEngine.addTileLayer2(
            "hdzj_map",
            config.MapServiceUrl.tileLayerUrl.LG25DAnnotationUrl
        );
        MapEngine.addTileLayer2(
            "hd_map",
            config.MapServiceUrl.tileLayerUrl.D25MapUrl
        );
    } else {
        MapEngine.removelayer("hd_map");
        MapEngine.removelayer("hdzj_map");
        if (item == "矢量") {
            MapEngine.setBaseMap(
                "vec_map",
                config.MapServiceUrl.tileLayerUrl.LGMapUrl
            );
        } else if (item == "影像") {
            MapEngine.setBaseMap(
                "img_map",
                config.MapServiceUrl.tileLayerUrl.yxMapUrl
            );
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

6、放大缩小等工具

// 工具栏实例化
new maptalks.control.Toolbar({
    items: [
        {
            // 显示名称
            item: '放大',
            // 点击时间
            click: () => {
                map.setZoom(_t.zoom += 1)
            }
        }
    ]
}).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13

罗列了items里的属性，它其实共有4个属性：position、vertical、reverseMenu、items，在源码里它是有默认配置的，比如下面这个：

// 部分源码
var options$s = {
  'height': 28,
  'vertical': false,
  'position': 'top-right',
  'reverseMenu': false,
  'items': {}
};
1
2
3
4
5
6
7
8

缩放工具它有提供现成的组件：

/**
* 增加缩放工具
* @param map
*/
addZoomTool(map) {
    new maptalks.control.Zoom({
        // 工具位置
        position: 'top-left',
        // 是否是以线段条方式展示
        slider: false,
        // 是否显示缩放级别文本框
        zoomLevel: true
    }).addTo(map);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

也可以自定义创建：

 new maptalks.control.Toolbar({
        items: [
          {
            item: '放大',
            click: () => {
              map.setZoom(_t.zoom += 1)
            }
          },
          {
            item: '缩小',
            click: () => {
              map.setZoom(_t.zoom -= 1)
            }
          },
          {
            item: '旋转',
            click: () => {
              map.setBearing(_t.bearing -= 50)
            }
          },
          {
            item: '重置',
            click: () => {
              _t.mapDataReset(map)
            }
          },
          {
            item: '锁定',
            click: (t) => {
              if (t.target.item === '锁定') {
                map.setOptions({
                  // 可拖动
                  draggable: false,
                  // 平移
                  dragPan: false,
                  // 旋转
                  dragRotate: false,
                  // 间距
                  dragPitch: false,
                  // 滚动缩放
                  scrollWheelZoom: false,
                  // 点击 缩放
                  touchZoom: false,
                  // 双击缩放
                  doubleClickZoom: false
                })
                t.target.item = '取消锁定'
              } else {
                map.setOptions({
                  // 可拖动
                  draggable: true,
                  // 平移
                  dragPan: true,
                  // 旋转
                  dragRotate: true,
                  // 间距
                  dragPitch: true,
                  // 滚动缩放
                  scrollWheelZoom: true,
                  // 点击 缩放
                  touchZoom: true,
                  // 双击缩放
                  doubleClickZoom: true
                })
                t.target.item = '锁定'
              }
            }
          }
        ]
      }).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

效果-自带工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-icLNhEjN-1669995652824)(C:\Users\86186\Desktop\csdn\GIS工具maptalks开发手册\image\自带工具.png)]

它有2个概念：Geometry Polygon，polygon继承Geometry，两个可以看做一个东西；并且，绘制面需要VectorLayer图层上进行绘制。

画面的原理是，两点定义一条直线，多个点连成多条线，近大远小，远看就是曲线，那么面就是连接了开始和结束的点，使之闭环，加上颜色就是一个面。

好，下载可以找一个数据来测试一下：地图选择器 (aliyun.com)

上面下载一个geojson的数据，名称随便，这里就说一下怎么用它的方法：

首先要清楚怎么添加几何面，使用layer.addGeometry(geometry)，addGeometry支持单个，也支持数组，那么就是说，我们可以传入的参数可以是：Polygon、MultiPolygon、Geometry、MultiGeometry，或者他们数组。

const geoJson = require( '@/mock/xiamen.json')


  /**
    * 根据geojson画区域面
    * @param geoJson geoJson数据
    * @param layer 需要话的图层
    */
drawAreaPolygon(geoJson, layer) {
    const _t = this
    const geometry = maptalks.GeoJSON.toGeometry(geoJson)
    if (geometry) {
        geometry.forEach(g => {
            g.setSymbol({
                // 线色
                lineColor: '#34495e',
                // 线宽
                lineWidth: 1,
                // 填充色
                polygonFill: 'rgb(135,196,240)',
                // 不透明度
                polygonOpacity: 0.2
            })
        })
    }
    layer.addGeometry(geometry)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果-地图面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpGGdGpO-1669995652827)(C:\Users\86186\Desktop\csdn\GIS工具maptalks开发手册\image\地图面.png)]

7、面的交互（事件监听）

画出了面，但是只能看，而且没有任何交互，用户体验非常非常的，现在我们来加一下事件，实现鼠标移动、点击等的交互。

Geometry Polygon 提供了监听事件on和js的一样，下面以geoJson创建的面为例：

 drawAreaPolygon(geoJson, layer) {
        const _t = this
        const geometry = maptalks.GeoJSON.toGeometry(geoJson)
          if (geometry) {
              geometry.forEach(g => {
                  g.setSymbol({
                      // 线色
                      lineColor: '#34495e',
                      // 线宽
                      lineWidth: 1,
                      // 填充色
                      polygonFill: 'rgb(135,196,240)',
                      // 不透明度
                      polygonOpacity: 0.2
                  })
                  // 设置信息框
                  g.setInfoWindow({
                      title    : g.properties.name,
                      content  : '
中心点：' + g.properties.center + ' 
行政区划：' + g.properties.adcode + ' 
父级行政区划：' + g.properties.parent.adcode + '

 drawAreaPolygon(geoJson, layer) {
            const _t = this
            const geometry = maptalks.GeoJSON.toGeometry(geoJson)
            if (geometry) {
                geometry.forEach(g => {
                    g.setSymbol({
                        // 线色
                        lineColor: '#34495e',
                        // 线宽
                        lineWidth: 1,
                        // 填充色
                        polygonFill: 'rgb(135,196,240)',
                        // 不透明度
                        polygonOpacity: 0.2
                    })
                    // 设置信息框
                    g.setInfoWindow({
                        title: g.properties.name,
                        content: '
中心点：' + g.properties.center + ' 
行政区划：' + g.properties.adcode + ' 
父级行政区划：' + g.properties.parent.adcode + '