mapbox实现点选要素

成果图

核心代码

核心逻辑就是指定一个唯一的高亮要素对象,全图监听点击事件,通过queryRenderedFeatures鼠标点拿到要素的id,然后将要素的状态改为选中,这样选中的要素的样式就会改为我们设置好的选中的样式,记住这个高亮对象,每次高亮的时候,将上一次的高亮要素的状态设置回未选中。

javascript 复制代码
     //设置唯一高亮
     if (self.highLight.id !== null) {
       self.map.setFeatureState(
         { source: self.highLight.source, id: self.highLight.id },
         { select: false }
       );
     }
     self.highLight = {
       id:features[0].id,
       source:features[0].source
     };
     self.map.setFeatureState(
       { source: features[0].source, id: features[0].id },
       { select: true }
     );
javascript 复制代码
//示例点线面样式
export const POINT_STYLE = {
    paint:{
        'circle-color': [
            'case',
            ['boolean', ['feature-state', 'select'], false],
            'rgb(0,255,255)',
            'orange'
        ],
    },
    layout: {
        visibility: 'visible',
    },
}
export const LINE_STYLE = {
    paint:{
        'line-color': [
            'case',
            ['boolean', ['feature-state', 'select'], false],
            'rgb(0,255,255)',
            '#ffffff'
        ],
        'line-width': [
            'case',
            ['boolean', ['feature-state', 'select'], false],
            8,
            2
        ],
    },
    layout: {
        visibility: 'visible',
    },
}
export const FILL_STYLE = {
    paint:{
        'fill-color': [
            'case',
            ['boolean', ['feature-state', 'select'], false],
            'rgb(0,255,255)',
             'orange'
        ],
        'fill-antialias': true,
        'fill-outline-color': "#ffffff",
        'fill-opacity': 0.5
    },
    layout: {
        visibility: 'visible',
    },
}
相关推荐
小孙姐14 分钟前
3——VUE侦听器和计算属性
前端·javascript·vue.js
Dragon Wu32 分钟前
Taro React小程序开发框架 总结
前端·react.js·前端框架·taro
Z_W_H_43 分钟前
【ArcGISPro】使用AI提取要素-土地分类(sentinel2)
arcgis·arcgispro
nbsaas-boot1 小时前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa1 小时前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚7 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志7 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪8 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js