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

1、图层置顶 置底

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

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

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 = thisconst 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 = thisconst 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 + '