Skip to content

Commit 527e34b

Browse files
songyumengsongyumeng
committed
【examples】增加poi标签高亮例子
1 parent 7af7e5f commit 527e34b

File tree

5 files changed

+155
-0
lines changed

5 files changed

+155
-0
lines changed

‎examples/locales/en-US/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,7 @@ window.examplesResources = {
495495
"title_mvtVectorLayer_restdata": "iServer REST Data TileFeature",
496496
"title_mvtVectorLayer": "iServer MVT VectorTile",
497497
"title_mvtVectorLayer4326": "iServer MVT VectorTile (WGS84)",
498+
"title_mvtVectorLayer_poi_highlight": "MVT POI Highlight",
498499
"title_mvtVectorLayer_mapboxStyle": "Style Switch",
499500
"title_mvtVectorLayer_mapboxStyle_4326": "OSM Style(MVT WGS84)",
500501
"title_mvtVectorLayer_mapboxStyle_lineStyle": "LineStyle Edit",

‎examples/locales/zh-CN/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,7 @@ window.examplesResources = {
436436
"title_mvtVectorLayer_vectortilerest": "iServer 矢量瓦片服务",
437437
"title_mvtVectorLayer_restdata": "iServer 数据服务矢量瓦片",
438438
"title_mvtVectorLayer4326": "iServer MVT矢量瓦片(WGS84)",
439+
"title_mvtVectorLayer_poi_highlight": "POI 标签高亮",
439440
"title_mvtVectorLayer_mapboxStyle": "OSM风格(MVT WGS84)",
440441
"title_mvtVectorLayer_mapboxStyle_4326": "风格动态切换",
441442
"title_mvtVectorLayer_mapboxStyle_lineStyle": "线样式编辑",

‎examples/mapboxgl/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,14 @@ var exampleConfig = {
566566
localIgnore: true,
567567
thumbnail: "mvtVectorTile_restdata.png",
568568
fileName: "mvtVectorTile_restdata"
569+
},
570+
{
571+
name: "POI 标签高亮",
572+
name_en: "POI Label Highlight",
573+
version: "10.1.3",
574+
localIgnore: true,
575+
thumbnail: "mvt_poi_highlight.png",
576+
fileName: "mvtVectorTile_poi_highlight"
569577
}
570578
]
571579
},

‎examples/mapboxgl/img/mvt_poi_highlight.png

57.8 KB
Loading

‎examples/mapboxgl/mvtVectorTile_poi_highlight.html

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title data-i18n="resources.title_mvtVectorLayer_poi_highlight"></title>
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
#map {
14+
position: absolute;
15+
top: 0;
16+
bottom: 0;
17+
width: 100%;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div id="map"></div>
23+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
24+
<script
25+
type="text/javascript"
26+
include="mapbox-gl-enhance"
27+
src="../../dist/mapboxgl/include-mapboxgl.js"
28+
></script>
29+
<script type="text/javascript">
30+
$.get(
31+
'https://iserver.supermap.io/iserver/services/map-mvt-California/rest/maps/California/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
32+
function (style) {
33+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
34+
style.layers[0].paint['background-color'] = 'rgba(168,209,221,0)';
35+
map = new mapboxgl.Map({
36+
container: 'map',
37+
renderWorldCopies: false,
38+
isConstrain: true,
39+
style: style,
40+
center: [-122.2543440112645, 38.236059513982674],
41+
zoom: 12,
42+
minZoom:12,
43+
maxZoom:12,
44+
crs: mapboxgl.CRS.EPSG4326
45+
});
46+
map.on('load', function () {
47+
map.loadImage('../img/poi-bg.png', function (error, image) {
48+
if (error) throw error;
49+
if (!map.hasImage('poi-bg')) {
50+
map.addImage('poi-bg', image, {
51+
stretchX: [[14, 190]],
52+
stretchY: [[14, 90]],
53+
content: [14, 14, 190, 90],
54+
pixelRatio: 1
55+
});
56+
}
57+
});
58+
map.addLayer(
59+
{
60+
id: 'simple-tiles',
61+
type: 'raster',
62+
source: {
63+
type: 'raster',
64+
tiles: [host + '/iserver/services/map-world/rest/maps/World'],
65+
rasterSource: 'iserver',
66+
tileSize: 256
67+
},
68+
minzoom: 0,
69+
maxzoom: 22
70+
},
71+
'background'
72+
);
73+
// 可以高亮的图层
74+
var highlightLayers = [
75+
'Peak_P@California#3',
76+
'Reservoir_R@California#6',
77+
'Town_P@California#4',
78+
'City_P@California#7',
79+
'NatureReserve_R@California#11'
80+
];
81+
// 为每个图层增加对应的高亮图层
82+
highlightLayers.forEach(function (layerId) {
83+
var layerStyle = map.getStyle().layers.filter(function (layer) {
84+
return layer.id === layerId;
85+
})[0];
86+
if (layerStyle.type === 'symbol') {
87+
// 高亮图层叠加在原始图层上，原始图层需要允许压盖
88+
map.setLayoutProperty(layerId, 'text-allow-overlap', true);
89+
map.setLayoutProperty(layerId, 'icon-allow-overlap', true);
90+
layerStyle.id = layerId + '-highlighted';
91+
layerStyle.layout['icon-image'] = 'poi-bg';
92+
layerStyle.layout['icon-allow-overlap'] = true;
93+
layerStyle.layout['icon-text-fit'] = 'both';
94+
layerStyle.paint['text-color'] = 'rgba(0,0,0,0)';
95+
layerStyle.paint['text-halo-color'] = 'rgba(0,0,0,0)';
96+
// 根据feature state控制高亮效果是否显示（透明度）
97+
layerStyle.paint['icon-opacity'] = [
98+
'case',
99+
['boolean', ['feature-state', 'hover'], false],
100+
1,
101+
0
102+
];
103+
map.addLayer(layerStyle);
104+
}
105+
});
106+
var hoveredFeature;
107+
// 鼠标hover事件改变feature state
108+
map.on('mousemove', function (e) {
109+
var bbox = [
110+
[e.point.x - 5, e.point.y - 5],
111+
[e.point.x + 5, e.point.y + 5]
112+
];
113+
var features = map.queryRenderedFeatures(bbox, {
114+
layers: highlightLayers
115+
});
116+
if (hoveredFeature) {
117+
map.setFeatureState(
118+
{
119+
source: hoveredFeature.source,
120+
sourceLayer: hoveredFeature.sourceLayer,
121+
id: hoveredFeature.id
122+
},
123+
{ hover: false }
124+
);
125+
hoveredFeature = null;
126+
}
127+
if (features.length > 0) {
128+
var feature = features[0];
129+
hoveredFeature = feature;
130+
map.setFeatureState(
131+
{
132+
source: hoveredFeature.source,
133+
sourceLayer: hoveredFeature.sourceLayer,
134+
id: hoveredFeature.id
135+
},
136+
{ hover: true }
137+
);
138+
}
139+
});
140+
});
141+
}
142+
);
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy