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

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

1、图层置顶 置底

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

2、清空所有图层

//所有图层的idlet 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();
        }
    });},

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;},

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);},

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            );
        }
    }

6、放大缩小等工具

// 工具栏实例化new maptalks.control.Toolbar({
    items: [
        {
            // 显示名称
            item: '放大',
            // 点击时间
            click: () => {
                map.setZoom(_t.zoom += 1)
            }
        }
    ]}).addTo(map);

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

// 部分源码var options$s = {
  'height': 28,
  'vertical': false,
  'position': 'top-right',
  'reverseMenu': false,
  'items': {}};

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

/**
* 增加缩放工具
* @param map
*/addZoomTool(map) {
    new maptalks.control.Zoom({
        // 工具位置
        position: 'top-left',
        // 是否是以线段条方式展示
        slider: false,
        // 是否显示缩放级别文本框
        zoomLevel: true
    }).addTo(map);},

也可以自定义创建：

 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);

效果-自带工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)},

效果-地图面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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  : '<br style="color:#f00">中心点：' + g.properties.center + ' </br>行政区划：' + g.properties.adcode + ' </br>父级行政区划：' + g.properties.parent.adcode + '</div>'
                  })
                  // 鼠标交互事件监听
                  g.on('mouseenter', function (e) {
                      e.target.updateSymbol({
                          polygonFill: '#f00'
                      });
                  }).on('mouseout', function (e) {
                      e.target.updateSymbol({
                          polygonFill: 'rgb(135,196,240)'
                      });
                  }).on('click', function (e) {
                      e.target.openInfoWindow(e.coordinate)
                  })
              })
          }
          layer.addGeometry(geometry)
      },

效果-在鼠标点击位置显示了弹框

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

基础的操作现在有了，比较常用，如果你还需要右键菜单

8、右键菜单

 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: '<br style="color:#f00">中心点：' + g.properties.center + ' </br>行政区划：' + g.properties.adcode + ' </br>父级行政区划：' + g.properties.parent.adcode + '</div>'
                    })
                    // 设置右键菜单
                    g.setMenu({
                        width: 160,
                        custom: false,
                        items: [
                            { item: '菜单一', click: function() { alert('Query Clicked!'); return false } },
                            '-',
                            { item: '菜单二', click: function() { alert('Edit Clicked!') } },
                            { item: '菜单三', click: function() { alert('About Clicked!') } }
                        ]
                    })
                    // 鼠标交互事件监听
                    g.on('mouseenter', function(e) {
                        e.target.updateSymbol({
                            polygonFill: '#f00'
                        })
                    }).on('mouseout', function(e) {
                        e.target.updateSymbol({
                            polygonFill: 'rgb(135,196,240)'
                        })
                    }).on('click', function(e) {
                        e.target.openInfoWindow(e.coordinate)
                    })
                })
            }
            layer.addGeometry(geometry)
        },

这里的菜单有一个返回值，如果返回false，菜单就不会关闭。

效果-右键菜单

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

9、绘制mark

绘制mark没有Polygon 那么复杂，它只要一个坐标点就行，然后在指定坐标出绘制一个图标，

它有一个addTo方法，可以添加到任何一个图层

drawMark(centerPointList, layer) {
            if (!centerPointList) {
                console.log('无区域中心点数据')
                return
            }
            const info = { content: '', width: 150, minHeight: 100 }
            const result = []
            // 这里 d 的数据格式是数组，如：[-0.113049, 51.498568]
            centerPointList.forEach(d => {
                if (!d.info) {
                    d.info = info                }
                // 设有高度、高亮的mark
                const mark = new maptalks.Marker(d.center, {
                    // 设置了这个属性，会替换默认的图标
                    // symbol: {
                        // markerFile: 'foo.png',
                        // textName: d.name
                    // },
                    properties: {
                        // 高度设置
                        altitude: 50
                    }
                }).addTo(layer)
                mark.setInfoWindow({
                    title: d.name,
                    content: '<div>' + d.adcode + '</div>',
                    // autoPan: true,
                    width: d.info.width,
                    minHeight: d.info.minHeight,
                    // 'custom': false,
                    // 点击打开和关闭
                    // autoOpenOn: 'click',
                    // autoCloseOn: 'click'
                })

                // 没有高度的mark
                // new maptalks.Marker(d).updateSymbol({
                //   markerOpacity: 0.5,
                //   markerFill: '#bbb'
                // }).addTo(layer)

                mark.setZIndex(1000)
                result.push(mark)
            })
            return result        },

这里的centerPointList是geoJson里的properties属性；

绘制三维图形注意点

其中关键点是，要绘制三维的mark，需要设置图层layer启用高度绘制如下：

layer.setOptions({
        // 启用高度绘制
        enableAltitude: true,
        altitudeProperty: 'altitude',
        // 绘制高度线
        drawAltitude: {
         // 这里是绘制高度线的宽度，可以理解为Z，那么要透明，这里设置为0
          lineWidth: 1,
          lineColor: '#000'
        }
      })

10、锁定视角

当启用锁定后，我们所观看到的视图，只会是我们设定好的区域，这块区域默认是地图初始化时设定的center。

 lockView() {
     const extent = this.map.getExtent()
     this.map.setMaxExtent(extent)
 },

绘制三维图形注意点

其中关键点是，要绘制三维的mark，需要设置图层layer启用高度绘制如下：

layer.setOptions({
        // 启用高度绘制
        enableAltitude: true,
        altitudeProperty: 'altitude',
        // 绘制高度线
        drawAltitude: {
         // 这里是绘制高度线的宽度，可以理解为Z，那么要透明，这里设置为0
          lineWidth: 1,
          lineColor: '#000'
        }
      })

10、锁定视角

当启用锁定后，我们所观看到的视图，只会是我们设定好的区域，这块区域默认是地图初始化时设定的center。

 lockView() {
     const extent = this.map.getExtent()
     this.map.setMaxExtent(extent)
 },