mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>mapbox添加geojson图层实现高亮、属性查询、地图手势变化等功能</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head><body><div id="map"></div><script>const existLayersIds = [];// 图层高亮集合let layerHighlights = {};   // {layerId:{id,source},...}// 图层属性集合let layerProperties = {};   // {layerId:{layerName:'',key1:value1,key2:value2,...}}mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',center: [-96, 37.8],zoom: 3});// 添加 point geojson数据图层map.on('load', function () {const layerId = 'layer_geojson_id';const sourceId = 'source_geojson_id';map.addSource(sourceId, {type: 'geojson',data: {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Point','coordinates': [-77.03238901390978,38.913188059745586]},'properties': {'title': 'Mapbox DC'}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [-122.414, 37.776]},'properties': {'title': 'Mapbox SF'}}]},generateId: true});map.addLayer({'id': layerId,'source': sourceId,'name': 'dian','type': 'circle','paint': {'circle-radius': 10,"circle-color": ["case",["boolean", ["feature-state", "hover"], false],`rgb(${255},${0},${0})`,`rgb(${0},${255},${255})`],'circle-opacity': 1,'circle-stroke-width': 4,'circle-stroke-color': `rgb(${0},${0},${255})`,'circle-stroke-opacity': 1}});changeMapCursor();});// 实现属性查询及高亮map.on('click', function (e) {// 属性集合清空layerProperties = {};console.log('object', e);const bbox = [[e.point.x - 5, e.point.y - 5],[e.point.x + 5, e.point.y + 5]];const existLayers = map.getStyle().layers;existLayers.forEach(existLayer => {const existLayerId = existLayer.id;if (existLayerId.includes('layer_geojson')) {existLayersIds.push(existLayer.id);}});let renderFeatures = map.queryRenderedFeatures(bbox, { layers: existLayersIds });renderFeatures.forEach(renderFeature => {console.log('renderFeature', renderFeature);const { id, layer, source, properties } = renderFeature;// 属性数据存储layerProperties[layer.id] = properties;for (let i in layerHighlights) {// 取消上次高亮if (i === layer.id) {const { id, source } = layerHighlights[i];map.setFeatureState({ source, id },{ hover: false });}}// 添加新的高亮map.setFeatureState({ source, id },{ hover: true });// 更新图层高亮集合layerHighlights[layer.id] = { id, source };});const contents = [];for (let i in layerProperties) {const properties = layerProperties[i];for (let p in properties) {const content = `<p><span>${p}</span>：<span>${properties[p]}</span></p>`contents.push(content);}}const propertiesContent = `<h2>标题</h2>${contents.join('')}`;// 属性展示if (Object.keys(layerProperties).length > 0) {new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(propertiesContent).addTo(map);}});// 改变地图手势function changeMapCursor() {const layers = map.getStyle().layers;layers.forEach(layer => {const layerId = layer.id;if (layerId.includes('layer_geojson')) {map.on('mousemove', layerId, function () {map.getCanvas().style.cursor = 'pointer';});map.on('mouseleave', layerId, function (e) {map.getCanvas().style.cursor = '';});}});}</script></body></html>

mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能相关推荐

openlayers 2 高亮显示元素以及通过属性查询高亮某一元素
本文参考官网例子,略作修改,直接上代码: 1.实现hover和click高亮显示 var map, controls;OpenLayers.Feature.Vector.style['default' ...
control层alert弹出框乱码_【ArcGIS for JS】动态图层的属性查询（11）
在真实需求中,我们不仅仅是将shp在地图中显示那么简单,我们往往要查询该图层的属性信息,我们在前面代码的基础上添加上属性查询. 1.1方法1(通过click直接获取) 1.1.1代码实现给要素图层添 ...
「Arcgis的」空间查询和属性查询
「Arcgis的」空间查询和属性查询概述目录「Arcgis的」空间查询和属性查询概述流程 FindTask QueryTask IdentifyTask 在ArcGIS API中查询功能是非 ...
ArcGIS api for JavaScript 之空间、属性查询
有一段时间又没有发表博客记录学习经过了,有点懈怠啊,学习之路还要坚持才行呢. 话不多说,进入今天的正题:arcgis的空间和属性查询 arcgis js api 有三种常见的查询:QueryTask. ...
OL实现属性查询的功能
属性查询是很平常的一个功能,在这里实现的查询功能还是结合WFS服务的filter完成,用到的filter是new ol.format.filter.equalTo('name', value),fil ...
AE开发基础实验二（空间查询之按属性查询）
通过空间数据查询快速实现空间数据选择.查询与统计是GIS数据操作的基本功能,同时也是对特定数据子集进行应用和空间分析的基础.按属性查询是根据属性条件,对某个要素图层查询满足条件的地理要素.本次实 ...
mapbox 添加geoserver发布的wms服务及wms服务属性查询
<!DOCTYPE html> <html><head><meta charset='utf-8' /><title>mapbox 添加 g ...
【MAPBOX基础功能】09、mapbox绘制线图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
Cesium添加geojson数据及WMS在线图层服务
地图初始化及geojson数据 html部分 <div id="GlobeView"></div>css #GlobeView{position: abso ...

mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能

mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能相关推荐

最新文章

热门文章