WINS服务在现代局域网中的核心价值与优化实践

以线要素为例在 Mapbox GL JS 中为线要素添加点击事件主要有两种常见方式分别适用于不同的场景直接监听地图的点击事件并判断是否点击到线或者为图层添加交互式事件。

方法一监听地图点击事件通用方式这种方式通过监听整个地图的 click 事件然后通过 queryRenderedFeatures 方法判断点击位置是否存在目标线要素适用性更广。

!doctype html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale

0 / title监听地图点击事件通用方式/title !-- 引入Mapbox核心库 -- link hrefhttps://api.mapbox.com/mapbox-gl-js/v

3.

0/mapbox-gl.css relstylesheet / script srchttps://api.mapbox.com/mapbox-gl-js/v

3.

0/mapbox-gl.js/script !-- 引入Draw插件 -- link relstylesheet hrefhttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v

1.

3/mapbox-gl-draw.css / script srchttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v

1.

3/mapbox-gl-draw.js/script script src./json/data.js/script style body { margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } /style /head body div idmap/div script // 初始化地图 mapboxgl.accessToken Access Token; const map new mapboxgl.Map({ container: map, style: mapbox://styles/mapbox/satellite-v9, projection: globe, center: [

1

4074,

3

9042], // 地图中心点北京 zoom: 19, }); // 地图加载完成后执行 map.on(load, () { //

添加线数据源 map.addSource(test-line, { type: geojson, data: { type: Feature, geometry: { type: LineString, coordinates: [ [

1

38,

3

91], // 起点坐标 [

1

42,

3

89] // 终点坐标 ] }, properties: { name: 测试线路, id: line-001 } } }); //

添加线图层 map.addLayer({ id: test-line-layer, type: line, source: test-line, paint: { line-color: #ff0000, // 线颜色 line-width: 8 // 线宽度宽度越大越容易点击到 } }); //

监听地图点击事件 map.on(click, (e) { // 查询点击位置的要素 const features map.queryRenderedFeatures(e.point, { layers: [test-line-layer] // 指定只查询目标线图层 }); // 如果点击到了线要素 if (features.length

{ const lineFeature features[0]; console.log(点击到了线要素, lineFeature); // 触发自定义操作 alert(你点击了【${lineFeature.properties.name}】ID${lineFeature.properties.id}); } }); // 可选添加鼠标悬停效果提升交互体验 map.on(mousemove, (e) { const features map.queryRenderedFeatures(e.point, { layers: [test-line-layer] }); // 鼠标悬停在线上时改变光标样式 map.getCanvas().style.cursor features.length 0 ? pointer : ; }); }); /script /body /html方法二为图层添加交互式事件更简洁Mapbox 支持直接为指定图层绑定 click 事件代码更简洁推荐优先使用。

!doctype html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale

0 / titleMapbox 生成可编辑高亮新线(保留所有状态)/title !-- 引入Mapbox核心库 -- link hrefhttps://api.mapbox.com/mapbox-gl-js/v

3.

0/mapbox-gl.css relstylesheet / script srchttps://api.mapbox.com/mapbox-gl-js/v

3.

0/mapbox-gl.js/script !-- 引入Draw插件 -- link relstylesheet hrefhttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v

1.

3/mapbox-gl-draw.css / script srchttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v

1.

3/mapbox-gl-draw.js/script script src./json/data.js/script style body { margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } .botton-container { position: fixed; top: 30px; right: 30px; z-index: 10; } .botton-container button { margin: 0 5px 10px 0; padding: 6px 12px; cursor: pointer; } /style /head body div idmap/div div classbotton-container button iddrawPoint绘制点/button button iddrawLine绘制线/button button iddrawPolygon绘制面/button button iddeleteFeature删除选中/button button idclearAll清空所有/button /div script console.log(data); console.log(data) // 初始化地图 mapboxgl.accessToken Access Token; const map new mapboxgl.Map({ container: map, style: mapbox://styles/mapbox/satellite-v9, projection: globe, center: [

1

38,

3

91], zoom: 19, }); // 初始化Draw插件 const draw new MapboxDraw({ displayControlDefault: true, controls: { point: true, line_string: true, polygon: true, trash: true, combine_features: true, uncombine_features: true, }, }); map.addControl(draw, top-left); // 地图加载完成后执行添加自定义图层、绑定按钮事件 map.on(load, () { // 添加线数据源和图层同上 map.addSource(test-line, { type: geojson, data: { type: Feature, geometry: { type: LineString, coordinates: [[

1

38,

3

91], [

1

42,

3

89]] }, properties: { name: 测试线路, id: line-001 } } }); map.addLayer({ id: test-line-layer, type: line, source: test-line, paint: { line-color: #ff0000, line-width: 8 } }); // 直接为线图层绑定点击事件核心代码 map.on(click, test-line-layer, (e) { const lineFeature e.features[0]; console.log(点击到线, lineFeature); alert(点击了线路${lineFeature.properties.name}); }); // 可选添加点击时的弹窗Popup map.on(click, test-line-layer, (e) { new mapboxgl.Popup() .setLngLat(e.lngLat) // 弹窗位置为点击位置 .setHTML(h3${e.features[0].properties.name}/h3pID${e.features[0].properties.id}/p) .addTo(map); }); // 鼠标悬停效果 map.on(mouseenter, test-line-layer, () { map.getCanvas().style.cursor pointer; }); map.on(mouseleave, test-line-layer, () { map.getCanvas().style.cursor ; }); }); /script /body /html方法三为不同线要素添加独立交互使用表达式// 添加包含多个线要素的图层 map.addSource(lines, { type: geojson, data: { type: FeatureCollection, features: [ { type: Feature, properties: { id: 1, type: road, clickable: true }, geometry: { ... } }, { type: Feature, properties: { id: 2, type: river, clickable: false }, geometry: { ... } } ] } }); // 使用图层过滤只让可点击的线响应事件 map.on(click, lines, (e) { const feature e.features[0]; if (feature.properties.clickable) { console.log(可点击的线被点击:, feature); } });重要提示线宽度确保线的宽度足够大方便点击建议至少

px图层顺序确保线图层在其他可点击图层之上性能优化如果线要素很多考虑使用 queryRenderedFeatures 的第二个参数限制搜索范围map.queryRenderedFeatures(e.point, { layers: [my-line-layer], filter: [, type, road] // 添加过滤器 });

三叶草gy1179-三叶草应用