mapbox添加自定义图片绑定点击事件，弹窗为自定义组件

一、首先构建根据后端返回的数据构建geojson格式的数据，点位的geojson数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [117.1625,36.7074]},"properties": {"proIndex": 0}},{"type": "Feature","geometry": {"type": "Point","coordinates": [117.1701,36.6923]},"properties": {"proIndex": 1}},{"type": "Feature","geometry": {"type": "Point","coordinates": [117.17,36.6927]},"properties": {"proIndex": 2}},{"type": "Feature","geometry": {"type": "Point","coordinates": [117.1701,36.6916]},"properties": {"proIndex": 3}},{"type": "Feature","geometry": {"type": "Point","coordinates": [117.1445,36.6852]},"properties": {"proIndex": 4}}]
}

二、如果需要设置自定义图片作为点位，则要调用loadImage方法加载图片。

map.loadImage(imageUrl, function (error, image) {if (error) throw error;if (!map.hasImage('custom-marker')) {   map.addImage('custom-marker', image);}map.addSource('geojson-source', {type: 'geojson',data: pointGeojsonData});map.addLayer({id: 'custom-marker-layer',type: 'symbol',source: 'geojson-source',layout: {'icon-image': 'custom-marker','icon-size': 0.1}});map.on('click', 'custom-marker-layer', function (e) {// console.log(e.features,'eeeeeeeeeeeeeeeeeeeee')// var features = map.queryRenderedFeatures(e.lnglat, { layers: ['custom-marker-layer'] });// if (!features.length) return;var feature = e.features[0];console.log(feature, 'feature')// 创建一个新的弹窗let p = Vue.extend(TestPopup);let vm = new p({propsData: {obj:feature.properties}})vm.$mount();var popup = new mapboxgl.Popup({offset: [0, -15],// closeButton: false,// closeOnClick: false})popup.setLngLat(feature.geometry.coordinates)popup.setDOMContent(vm.$el).addTo(map)})});

1. map.loadImage(imageUrl, function (error, image) { ... });
   • 这行代码使用map.loadImage方法异步加载一个图像。imageUrl是图像的URL。加载完成后，回调函数会被调用，参数error如果有值表示加载出错，image是加载成功的图像对象。
2. if (error) throw error;
   • 如果加载图像时出错，抛出错误。
3. if (!map.hasImage('custom-marker')) { map.addImage('custom-marker', image); }
   • 检查地图上是否已经存在一个名为custom-marker的图像。如果不存在，则使用map.addImage方法添加这个图像。
4. map.addSource('geojson-source', { type: 'geojson', data: pointGeojsonData });
   • 向地图添加一个GeoJSON数据源。geojson-source是数据源的ID，type: 'geojson'指定了数据源的类型，data: pointGeojsonData是包含GeoJSON数据的变量。
5. map.addLayer({ ... });
   • 在地图上添加一个图层。这个图层使用之前添加的GeoJSON数据源，并将自定义图标custom-marker作为图层的图标。图层的ID是custom-marker-layer，类型是symbol，它指定了图标的尺寸等布局属性。
6. map.on('click', 'custom-marker-layer', function (e) { ... });
   • 为custom-marker-layer图层添加一个点击事件监听器。当用户点击这个图层上的点时，会触发回调函数。
7. var feature = e.features[0];
   • 从事件对象e中获取被点击的特征（feature）。e.features是一个数组，包含所有在点击位置被渲染的特征。这里只取第一个特征。
8. console.log(feature, 'feature')
   • 在控制台打印被点击的特征。
9. 接下来的几行代码使用Vue.js创建一个新的组件实例，并将其内容设置为Mapbox弹窗的内容。
   • let p = Vue.extend(TestPopup); 使用Vue的extend方法创建一个TestPopup组件的构造器。
   • let vm = new p({ propsData: { obj: feature.properties } }); 创建一个新的Vue实例，将点击的特征的属性作为props传递给TestPopup组件。
   • vm.$mount(); 手动挂载Vue实例。
10. var popup = new mapboxgl.Popup({ ... });
    • 创建一个新的Mapbox弹窗实例，并设置一些选项，如偏移量和是否显示关闭按钮。
11. popup.setLngLat(feature.geometry.coordinates)
    • 设置弹窗的位置为被点击特征的地理坐标。
12. popup.setDOMContent(vm.$el).addTo(map)
    • 将Vue实例的DOM元素设置为弹窗的内容，并将弹窗添加到地图上

三、在App.vue中设置取消mapbox默认的弹窗样式

.mapboxgl-popup-tip {display: none;
}
.mapboxgl-popup-content {padding:0;
}

四、弹窗组件通过props接收传过来的属性的值。

组件成功弹窗！