SuperMap for MapboxGL 实现自定义图标点位及多点位聚合

已于 2023-03-10 16:14:09 修改
阅读量1.6k 收藏 2
点赞数
文章标签： 前端 mapBoxGL Powered by 金山文档
于 2023-03-10 09:45:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueye_wu/article/details/129436009
版权

实现效果如图：

代码如下：

<template>
    <div class="screen-container">
        <div class="map-container">
            <div class="rlt_btn">
                <el-button class="btn" type="primary" @click="createclusterLayer('icon_1', 1)">添加点位1</el-button>
                <el-button class="btn" type="primary" @click="createclusterLayer('icon_2', 2)">添加点位2</el-button>
            </div>
            <!-- 超图及echart组件 -->
            <sm-web-map v-if="flag" @load="mapLoad" @click="mapClick" :loading="!flag" :map-options="options">
                <sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
            </sm-web-map>
            <!-- 桩位信息浮窗 -->
            <div :style="{ left: pointPosition.x + 160 + 'px', top: (pointPosition.y <= 200 ? 100 : pointPosition.y - 200) + 'px' }"
                v-if="pointVisible" class="point-info">
                <div class="pile-point-item" style="height:150px;">
                    <h2 class="pile-name">桩号：{{ pointPosition.data.stake_no }}</h2>
                    <p class="road-section">路段：{{ pointPosition.data.highway_service_name }}</p>
                    <div class="detail">
                        <p class="lnglat">X经度：{{ pointPosition.data.lng }}</p>
                        <p class="lnglat">Y纬度：{{ pointPosition.data.lat }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>
import { HomeApi } from '@/services/Home'
import '@supermap/iclient-mapboxgl';
import { DatasourceService, GetFeaturesByGeometryParameters } from '@supermap/iclient-mapboxgl';
import { gantry, blockList } from '@/assets/json/gantry'
import * as turf from '@turf/turf'
import icon_1 from '@/assets/ali.png'
const icon_2 = 'https://cdn.bootcdn.net/ajax/libs/leaflet/1.0.0/images/marker-icon.png'
export default {
    data() {
        return {
            options: {
            },
            echartsOptions: {
            },
            flag: false,
            visible: false,
            // 超图实例
            supermapInstance: {},
            prefix: 'http://localhost:8090/',
            nearestList: [],
            symbolSize: 8,
            pointVisible: false,
            // 点位位置信息
            pointPosition: {
                x: 0,
                y: 0,
                data: {}
            },
            pos: {
                x: 0,
                y: 0
            },
            // echart实例
            echartInstance: {},
            heatMapLayer: {},
            clusterLayer: null,//聚合图层
        };
    },
    watch: {

    },
    props: {

    },
    computed: {

    },
    created() {

    },
    async mounted() {
        await this.render()

    },
    methods: {
        // 创建聚合图层
        createclusterLayer(iconName, index) {
            let e = this.supermapInstance;
            if (e.map.getSource(`poidata-${index}`)) {
                this.removeclusterLayer(index)
            }
            let iconMap = {
                'icon_1': icon_1,
                'icon_2': icon_2
            }
            const icon = iconMap[iconName]
            var geojson = {
                "type": "FeatureCollection",
                "features": []
            };
            // 后端接口返回点坐标数据
            geojson.features = [{
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [120.02225397864616 + index * 0.1, 30.2407888431817 + index * 0.1]
                },
                properties: {
                    title: '点一',
                    id: 1,
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [119.978604 + index * 0.1, 30.23495 + index * 0.1]
                },
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [119.94344968972486 + index * 0.1, 30.253317832596277 + index * 0.1]
                },
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [119.91344968972486 + index * 0.1, 30.273317832596277 + index * 0.1]
                },
            }
            ]
            // 创建聚合图层
            e.map.addSource(`poidata-${index}`, {
                type: 'geojson',
                data: geojson,
                cluster: true,
                //最大的聚合级别，超过级别不进行聚合
                clusterMaxZoom: 12,
                //聚合的半径，单位是像素 
                clusterRadius: 80,
                //最小聚合的点数量
                clusterMinPoints: 2

            });
            e.map.loadImage(icon, function (error, image) {
                if (error) throw error;
                e.map.addImage(`custom-icon-${index}`, image);
                e.map.addLayer({
                    id: `clusters-${index}`,
                    type: "circle",// 第一个图层为circle类型，无需显示图标，目的是根据点位大小创建圆形图层，以供点击聚合点位缩放事件
                    source: `poidata-${index}`,
                    filter: ["has", "point_count"],
                    paint: {
                        "circle-color": [
                            "step",
                            ["get", "point_count"],
                            "rgba(0,0,0,0)",
                            100,
                            "rgba(0,0,0,0)",
                            750,
                            "rgba(0,0,0,0)",
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "point_count"],
                            20,
                            100,
                            30,
                            750,
                            40
                        ]
                    }
                });
                e.map.addLayer({
                    id: `cluster-count-${index}`,
                    type: "symbol",
                    source: `poidata-${index}`,
                    filter: ["has", "point_count"],
                    layout: {
                        "text-field": "{point_count_abbreviated}",
                        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                        "text-size": 16,
                        // "text-offset": [2, 2], 
                        'icon-image': `custom-icon-${index}`,
                        'icon-size': 0.8,
                    },
                    paint: {
                        "text-color": "#fff",
                        "text-translate": [16, -16],
                        "text-halo-color": "#1753aa", // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
                        "text-halo-width": 16, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
                        // "text-halo-blur": 0, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
                    }
                });
                e.map.addLayer({
                    id: `unclustered-point-${index}`,
                    type: "symbol",
                    source: `poidata-${index}`,
                    filter: ["!", ["has", "point_count"]],
                    layout: {
                        'icon-image': `custom-icon-${index}`,
                        'icon-size': 0.8,
                    }
                });
                // 监听聚合图层点击事件
                // 聚合点点击事件
                e.map.on('click', `clusters-${index}`, function (el) {
                    console.log(el)
                    var features = e.map.queryRenderedFeatures(el.point, {
                        layers: [`clusters-${index}`]
                    });
                    var clusterId = features[0].properties.cluster_id;
                    e.map.getSource(`poidata-${index}`).getClusterExpansionZoom(clusterId, function (
                        err, zoom) {
                        if (err)
                            return;
                        e.map.flyTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                    });
                });
                // 散点点击事件
                e.map.on('click', `unclustered-point-${index}`, function (el) {
                    var features = e.map.queryRenderedFeatures(el.point, {
                        layers: [`unclustered-point-${index}`]
                    });
                    console.log(features, '散点点击事件')
                });
                e.map.on('mouseenter', `clusters-${index}`, function () {
                    e.map.getCanvas().style.cursor = 'pointer';
                });
                e.map.on('mouseleave', `clusters-${index}`, function () {
                    e.map.getCanvas().style.cursor = '';
                });
            });


        },
        // 清除聚合图层
        removeclusterLayer(index) {
            let e = this.supermapInstance;
            if (e.map.getSource(`poidata-${index}`)) {
                e.map.removeImage(`custom-icon-${index}`)
                e.map.removeLayer(`clusters-${index}`)
                e.map.removeLayer(`cluster-count-${index}`)
                e.map.removeLayer(`unclustered-point-${index}`)
                e.map.removeSource(`poidata-${index}`)
            }
        },
        mapClick(e) {
            this.render()
        },
        render() {
            this.flag = false
            this.echartsOptions = {
                GLMap: {
                    roam: true
                },
                coordinateSystem: 'GLMap',
                animation: false,
                series: []
            }
            let baseUrl = this.prefix + '/iserver/services/map-hhymap0822/rest/maps/hhy@hhymap'
            this.options = {
                container: 'map', // 地图容器 id
                style: {
                    'version': 8,
                    // glyphs为字体文件地址，必填，不然聚合缩放时聚合点位数量字体无法显示
                    "glyphs": "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/tileFeature/sdffonts/{fontstack}/{range}.pbf",
                    'sources': {
                        'raster-tiles': {
                            'type': 'raster',
                            'tiles': [
                                `${baseUrl}/zxyTileImage.gif?z={z}&x={x}&y={y}&transparent=true`

                            ],
                            'tileSize': 256
                        },
                        baseLayer_img: {
                            type: 'raster',
                            tiles: [
                                // process.env.BASE_IMG_API
                                `${baseUrl}/zxyTileImage.gif?z={z}&x={x}&y={y}&transparent=true`
                            ],
                            tileSize: 256
                        },
                        baseLayer_vec: {
                            type: 'raster',
                            tiles: [
                                // process.env.BASE_VEC_API
                                `${baseUrl}/zxyTileImage.gif?z={z}&x={x}&y={y}&transparent=true`
                            ],
                            tileSize: 256
                        },
                        labelLayer_img: {
                            type: 'raster',
                            tiles: [
                                // process.env.LABEL_IMG_API
                                `${baseUrl}/zxyTileImage.gif?z={z}&x={x}&y={y}&transparent=true`
                            ],
                            tileSize: 256
                        },
                        labelLayer_vec: {
                            type: 'raster',
                            tiles: [
                                // process.env.LABEL_VEC_API
                                `${baseUrl}/zxyTileImage.gif?z={z}&x={x}&y={y}&transparent=true`
                            ],
                            tileSize: 256
                        }
                    },
                    'layers': [
                        {
                            id: 'baseLayer_img',
                            type: 'raster',
                            source: 'baseLayer_img',
                            minzoom: 0,
                            maxzoom: 12
                        },
                        {
                            id: 'baseLayer_vec',
                            type: 'raster',
                            source: 'baseLayer_vec',
                            minzoom: 12,
                            maxzoom: 18
                        },
                        {
                            id: 'labelLayer_img',
                            type: 'raster',
                            source: 'labelLayer_img',
                            minzoom: 0,
                            maxzoom: 12
                        },
                        {
                            id: 'labelLayer_vec',
                            type: 'raster',
                            source: 'labelLayer_vec',
                            minzoom: 12,
                            maxzoom: 18
                        }
                    ]
                },
                center: [120.02225397864616, 30.2407888431817], // 地图中心点
                zoom: 10, // 地图初始缩放级别

                minZoom: 8,
                echartsOptions: this.echartsOptions

            }
            this.flag = true
        },
        getData() {

        }
    },

};
</script>
阁下何不同风起？
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
[vue2项目]vue2+supermap[mapboxgl]+天地图之地图的初始化
weixin_61972561的博客
06-01 446
[vue2项目]vue2+supermap[mapboxgl]+天地图之地图的初始化
【超图】SuperMap iClient3D for Cesium点聚合更改图标样式
冰美式当作酒
11-03 955
我们还需要上面的数字。当然，如果不需要的话也可以直接替换。这样我们就需要查接口是否能带数字替换了。然而PinBuilder却接口表示“我没有”。
记录使用超图的mapboxgl以及地图api
最新发布
zuiHouHui16Sui的博客
12-30 649
2)由于项目需求,需要进行创建多个海量点图层,mapboxgl是基于webgl封装的,达到一定量的图层的时候就会报WARNING: Too many active WebGL contexts. Oldest context will be lost.看了官网没有像高德那样有marker的hide和show方法,popup也没有高德infowindow的open和close方法.只能去获取dom节点,设置style的隐藏和现实,有点烦.vue3包括包文件的引入也会报ts错误,需要自己去定义,太恶心了。
mapBox地图第一个案例和聚合图标自定义
lyxkgc的博客
11-22 573
mapbox加载第一个案例，聚合图层自定义，点位使用图片点，单点自定义。
mapbox 实现点线面的绘制
weixin_50379372的博客
06-07 1745
mapbox
SuperMap iClient for MapboxGL数据加载与更新
qq_29109799的博客
12-03 483
    经常有客户咨询，说SuperMap iClient只有对点数据集的修改 & 添加，对于面数据的操作不清楚改如何去做，下面我就以iClient for MapboxGL 和其Draw控件来实现面数据加载与编辑的功能。     效果截图     实现面数据加载与编辑思路：       1. 数据查询;  &
mapbox-gl-geocoder:使用Mapbox Geocoding API的mapbox-gl-js的Geocoder控件
05-02
Mapbox GL Geocoder 使用地址解析器控件。 对于没有图形用户界面JavaScript地理编码器，请参见 。 用法 如果您支持较旧的浏览器，则需要使用polyfill。 我们建议使用 。 与模块捆绑器一起使用 npm install --save ...
SuperMap iMobile for iOS显示点图标
12-15
SuperMap iMobile支持自定义图标，可以是简单的图形，也可以是复杂的图片，通过这些图标，用户可以快速识别和理解地图上的信息。 1. **添加图层与数据**：在SuperMap iMobile中，我们需要首先加载地图图层，并将...
SuperMap iMolile 8C for Android自定义绘制面对象并实时显示绘制面面积
12-15
在面对象绘制时，通常会遇到添加某个有意义的坐标点为节点，但是接口 action 又不能满足，我们可以自定义绘制，本范例演示，绘制对象时可以手刺点，也可以传入 gps 坐标点为面的节点，并能实时展现绘制对象的面积
SuperMap iclient for ios实现sql查询及结果展示
12-14
以上就是使用SuperMap iClient for iOS实现SQL查询及结果展示的基本流程。实际开发中，可能需要结合具体需求进行优化和调整，确保查询性能和用户体验。通过熟练掌握这些知识点，你将能够构建出功能强大、交互友好的...
SuperMap iMobile for Android 自定义地图动作
12-15
自定义View类，实现其手势监听，绘制多边形和矩形。将自定义的View添加到MapView中，与地图叠加显示。最后，从自定义View中取得所绘制图形的点串，构造GeoRegion，实现空间查询，查询结果在图层选择集中显示。
SuperMap GIS基础产品WebGIS FAQ集锦（2）
SuperMap技术控
05-06 1151
【解决方法】可以将要素图层指定到创建的panes对象中，然后通过改变panes的.zIndex来控制pannes的高度参考https://leafletjs.com/examples/map-panes。
使用SuperMap iClient组件库实现引入地图以及地图标点
m0_56023096的博客
08-28 550
转载SuperMap iClient产品从10i版本开始增加了组件库，组件库在架构设计上采用 MVVM 模式（Model-View-ViewModel），同时可以兼容多种框架，例如 Vue、React、Angular 以及原生 H5 开发。使用 SuperMap iClient 组件库，可像搭积木一样快速的创建自定义的WebGIS 应用。组件库开箱即用，一键切换主题等功能极大的便利了开发。下面以Vue2和天地图作为代码演示。
Mapbox实现自定义经纬网及标注
YuWebGIS
08-30 1802
在Mapbox地图中，添加经纬网与经纬网坐标标注，并随着地图缩放自适应经纬网网格大小。
SuperMap iClient 9D for MapboxGL地图风格浅析
SuperMap技术控
09-15 5990
作者：dominating 前言 随着SuperMap iServer 9D的发布，iServer增加了许多的新功能，其中之一就是地图服务模块，矢量切片（tileFeature）资源增加了支持 mvt的表述。mvt矢量切片格式是mapbox标准的矢量切片，而我们的SuperMap iClient 9D 加入了MapboxGL框架，所以我们就可以通过SuperMap iClient 9D来
mapbox-聚类点图层
LUFFY_HAT的专栏
08-16 4514
前端技术选型 mapbox gl.js+react+dva 1.构建mapview 并在mapbox onload 事件里面进行聚类点图层初始化 import React from 'react'; import styles from './MapView.css'; import mapboxgl from 'mapbox-gl'; import ClusterPointLayer...
开源地图mapbox自定义
gongminghbsz的博客
07-13 1万+
mapbox作为一款开源的地图，涵盖地图相关的很多方面，关于mapbox的各种溢美之词，网上有很多就不一一介绍了。很多人使用地图都是使用的百度/高德之类的sdk。高德和百度之类，基本无法实现常见的gis应用，无法自定义数据/服务器。而arcgis很强大，但是贵啊！！！动辄20万的价格，还真不是一般企业能随意负担的起。     自己开发地图，投入还真不是一般大，曾经在某公司从事过导航地图的相关开发
边做边爱（1）——mapbox做分析图
热门推荐
w9331292830y的博客
03-31 2万+
  1.打开mapboxs，并注册账户。链接为 www.mapbox.com，并打开mapboxs studio 2.创建一种风格。选择一种风格为底，规划师建议以官方的11种风格为底，根据需要适当调整。 3.适当调节风格配置底图。mapboxs基于openstreetmap矢量图，包含poi点、道路线、土地利用面等点线面图层（英文好重要）以及标注，可以像GIS一样改变各类图层的显...
mapbox gl 点编辑
05-25
Mapbox GL支持点编辑功能，可以让用户在地图上编辑点的位置和样式。实现点编辑需要以下步骤： 1. 创建一个Mapbox GL地图，并添加一个点图层。 2. 使用Mapbox GL的点编辑库（mapbox-gl-draw）来创建一个编辑控制器。 3. 将编辑控制器添加到地图上，并配置它的行为和样式。 4. 处理编辑事件，以便在编辑时更新点的位置和样式。 下面是一个简单的示例代码，演示如何实现点编辑： ```javascript // 创建地图 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-73.935242, 40.730610], zoom: 12 }); // 添加点图层 map.on('load', function() { map.addSource('points', { type: 'geojson', data: { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [-73.935242, 40.730610] }, properties: { name: 'Some point' } }] } }); map.addLayer({ id: 'points-layer', type: 'circle', source: 'points', paint: { 'circle-radius': 10, 'circle-color': '#3388ff' } }); }); // 创建点编辑控制器 var drawControl = new MapboxDraw({ displayControlsDefault: false, controls: { point: true, trash: true } }); // 添加点编辑控制器 map.addControl(drawControl); // 处理编辑事件 map.on('draw.update', function(e) { var features = e.features; // 更新点的位置和样式 map.getSource('points').setData({ type: 'FeatureCollection', features: features }); }); ``` 在这个示例中，我们创建了一个地图，添加了一个点图层，并在图层上显示一个点。然后，我们创建了一个点编辑控制器，并将它添加到地图上。最后，我们处理了编辑事件，并在编辑时更新了点的位置和样式。 你可以根据自己的需求进一步定制点编辑的行为和样式。更多关于Mapbox GL的点编辑功能的详细信息可以在Mapbox GL的官方文档中找到。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阁下何不同风起？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值