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