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)