Skip to content

Commit 5a46652

Browse files
tangqinGisertangqinGiser
committed
新增专题图基类显示隐藏功能，mapboxgl端对接iclient热力图。
1 parent 907a4a9 commit 5a46652

File tree

12 files changed

+4134
-1331
lines changed

12 files changed

+4134
-1331
lines changed

‎build/deps.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1070,6 +1070,17 @@ deps = {
10701070
"description": "数据可视化效果扩展",
10711071
"description_en": "data visualization extension",
10721072

1073+
"HeatMap": {
1074+
"name": "HeatMap",
1075+
"src": [
1076+
"./src/mapboxgl/overlay/HeatMapLayer.js",
1077+
],
1078+
"modules": [{
1079+
"name": "mapboxgl.supermap.HeatMapLayer",
1080+
"des": "热力图图层",
1081+
"des_en": "HeatMap layer"
1082+
}]
1083+
},
10731084
"Mapv": {
10741085
"name": "Mapv",
10751086
"src": [

‎dist/iclient9-mapboxgl.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/iclient9-mapboxgl.js

Lines changed: 3106 additions & 1318 deletions
Large diffs are not rendered by default.

‎dist/iclient9-mapboxgl.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/mapboxgl/config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,16 @@ var exampleConfig = {
292292
name: "可视化",
293293
name_en: "visualization",
294294
content: {
295+
"heat": {
296+
name: "热力图",
297+
name_en: "heat map",
298+
content: [{
299+
name: "随机点热点图",
300+
name_en: "random points",
301+
thumbnail: "mb_heatMapLayer.png",
302+
fileName: "heatMapLayer"
303+
}]
304+
},
295305
"VectorTileLayer": {
296306
name: "矢量瓦片",
297307
name_en: "vector tile",

‎examples/mapboxgl/heatmapLayer.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>热点图</title>
6+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
7+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
8+
<style type="text/css">
9+
body {
10+
margin: 0;
11+
overflow: hidden;
12+
background: #fff;
13+
width: 100%;
14+
height: 100%
15+
}
16+
17+
#map {
18+
position: absolute;
19+
width: 100%;
20+
height: 100%;
21+
border: 1px solid #3473b7;
22+
}
23+
24+
#toolbar {
25+
position: absolute;
26+
top: 50px;
27+
right: 10px;
28+
width: 300px;
29+
text-align: center;
30+
z-index: 100;
31+
border-radius: 4px;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div id="toolbar" class="panel panel-primary">
37+
<div class='panel-heading'>
38+
<h5 class='panel-title text-center' data-i18n="resources.text_heatMapLayer">热点图</h5></div>
39+
<div class='panel-body content'>
40+
<div class='panel'>
41+
<div class='input-group'>
42+
<span class='input-group-addon' data-i18n="resources.text_countsDraw">热点数量：</span>
43+
<input type='text' class='form-control' id='heatNums' value='200'/>
44+
</div>
45+
</div>
46+
<div class='panel'>
47+
<div class='input-group'>
48+
<span class='input-group-addon' data-i18n="resources.text_radius">热点半径：</span>
49+
<input class='form-control' style='width: 50px' value='50' id='heatradius'/>
50+
<select class='form-control' style='width:auto' id='radiusUnit'>
51+
<option value='px'>px</option>
52+
<option value='degree'>degree</option>
53+
</select>
54+
</div>
55+
</div>
56+
<input type="button" class="btn btn-default" value="开始绘制"
57+
onclick="createHeatPoints()"/>&nbsp; &nbsp;
58+
<input type="button" class="btn btn-default" value="清除"
59+
onclick="clearHeatPoints()"/>
60+
</div>
61+
</div>
62+
<div id="map"></div>
63+
<script type="text/javascript">
64+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
65+
var map, heatMapLayer,
66+
url = host + "/iserver/services/map-world/rest/maps/World";
67+
var attribution = "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span> with <span>© <a href='https://www.mapbox.com' target='_blank'>MapBox</a></span>";
68+
69+
var map = new mapboxgl.Map({
70+
container: 'map',
71+
style: {
72+
"version": 8,
73+
"sources": {
74+
"raster-tiles": {
75+
"attribution": attribution,
76+
"type": "raster",
77+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
78+
"tileSize": 256,
79+
},
80+
},
81+
"layers": [{
82+
"id": "simple-tiles",
83+
"type": "raster",
84+
"source": "raster-tiles",
85+
"minzoom": 0,
86+
"maxzoom": 9
87+
}]
88+
},
89+
center: [0, 0],
90+
zoom: 1
91+
});
92+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
93+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
94+
95+
heatMapLayer = new mapboxgl.supermap.HeatMapLayer(
96+
"heatMap",
97+
{
98+
"map": map,
99+
"id": "heatmap",
100+
"radius": 45,
101+
// 设置图层透明度：（参数方式）
102+
// "opacity": 0.5,
103+
"featureWeight": "value",
104+
"featureRadius": "geoRadius"
105+
}
106+
);
107+
108+
function createHeatPoints() {
109+
clearHeatPoints();
110+
var heatPoints = [];
111+
var num = parseInt(document.getElementById('heatNums').value);
112+
var radius = parseInt(document.getElementById('heatradius').value);
113+
var unit = document.getElementById("radiusUnit").value,
114+
useGeoRadius = false;
115+
if ("degree" == unit) {
116+
//使用热力半径单位使用地理单位
117+
heatMapLayer.useGeoUnit = true;
118+
useGeoRadius = true;
119+
}else {
120+
//使用热力半径单位不使用地理单位
121+
heatMapLayer.useGeoUnit = false;
122+
}
123+
heatMapLayer.radius = radius;
124+
125+
var features = [];
126+
127+
for (var i = 0; i < num; i++) {
128+
129+
features[i] =
130+
{
131+
"type": "feature",
132+
"geometry": {
133+
"type": "Point",
134+
"coordinates": [
135+
Math.random() * 360 - 180,
136+
Math.random() * 160 - 80]
137+
},
138+
"properties": {
139+
"value": Math.random() * 9,
140+
"geoRadius": useGeoRadius ? radius : null
141+
}
142+
};
143+
}
144+
145+
var heatPoints = {
146+
"type": "FeatureCollection",
147+
"features": features
148+
};
149+
150+
heatMapLayer.addFeatures(heatPoints);
151+
// 设置图层透明度：（函数方式）
152+
// heatMapLayer.setOpacity(0.5);
153+
map.addLayer(heatMapLayer);
154+
}
155+
156+
function clearHeatPoints() {
157+
if (map.getLayer("heatmap")) {
158+
map.removeLayer("heatmap");
159+
}
160+
}
161+
</script>
162+
</body>
163+
</html>

‎examples/mapboxgl/img/mb_heatMapLayer.png

33.1 KB
Loading

‎src/mapboxgl/core/Base.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
* 定义命名空间
44
*/
55
import mapboxgl from 'mapbox-gl';
6+
import '../core/MapExtend';
67

78
mapboxgl.supermap = mapboxgl.supermap || {};

‎src/mapboxgl/core/MapExtend.js

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import mapboxgl from 'mapbox-gl';
2+
import '../core/Base';
3+
4+
/**
5+
* @function mapboxgl.supermap.MapExtend
6+
* @description 扩展了mapboxgl.Map对图层相关的操作
7+
* @private
8+
*/
9+
export var MapExtend = function () {
10+
11+
mapboxgl.Map.prototype.overlayLayersManager = {};
12+
13+
mapboxgl.Map.prototype.addLayer = function (layer, before) {
14+
if (layer.source) {
15+
this.style.addLayer(layer, before);
16+
this._update(true);
17+
return this;
18+
}
19+
if (this.overlayLayersManager[layer.id] || this.style._layers[layer.id]) {
20+
this.fire('error', {error: new Error('A layer with this id already exists.')});
21+
return;
22+
}
23+
addLayer(layer);
24+
this.overlayLayersManager[layer.id] = layer;
25+
return this;
26+
};
27+
mapboxgl.Map.prototype.getLayer = function (id) {
28+
if (this.overlayLayersManager[id]) {
29+
return this.overlayLayersManager[id];
30+
}
31+
return this.style.getLayer(id);
32+
};
33+
34+
mapboxgl.Map.prototype.moveLayer = function (id, beforeId) {
35+
if (this.overlayLayersManager[id]) {
36+
moveLayer(id, beforeId);
37+
return this;
38+
}
39+
if (this.style._layers[id]) {
40+
this.style.moveLayer(id, beforeId);
41+
this._update(true);
42+
return this;
43+
}
44+
};
45+
46+
mapboxgl.Map.prototype.removeLayer = function (id) {
47+
if (this.overlayLayersManager[id]) {
48+
removeLayer(this.overlayLayersManager[id]);
49+
delete this.overlayLayersManager[id];
50+
return this;
51+
}
52+
this.style.removeLayer(id);
53+
this._update(true);
54+
return this;
55+
};
56+
57+
//目前扩展的overlayer，只支持 显示或隐藏图层操作
58+
mapboxgl.Map.prototype.setLayoutProperty = function (layerID, name, value) {
59+
if (this.overlayLayersManager[layerID]) {
60+
if (name === "visibility") {
61+
if (value === "block") {
62+
value = true;
63+
} else {
64+
value = false;
65+
}
66+
setVisibility(this.overlayLayersManager[layerID], value);
67+
}
68+
return this;
69+
}
70+
this.style.setLayoutProperty(layerID, name, value);
71+
this._update(true);
72+
return this;
73+
};
74+
75+
function addLayer(layer) {
76+
layer.addToMap();
77+
}
78+
79+
/**
80+
* @function mapboxgl.supermap.MapExtend.prototype.removeFromMap
81+
* @description 移除事件
82+
*/
83+
function removeLayer(layer) {
84+
layer.removeFromMap();
85+
}
86+
87+
/**
88+
* @function mapboxgl.supermap.MapExtend.prototype.setVisibility
89+
* @description 设置图层可见性，设置图层的隐藏，显示，重绘的相应的可见标记。
90+
* @param visibility - {string} 是否显示图层（当前地图的resolution在最大最小resolution之间）。
91+
*/
92+
function setVisibility(layer, visibility) {
93+
layer.setVisibility(visibility);
94+
}
95+
96+
/**
97+
* @function mapboxgl.supermap.MapExtend.prototype.moveTo
98+
* @description 将图层移动到某个图层之前。
99+
* @param layerID - {string} 待插入的图层ID。
100+
* @param beforeLayerID - {boolean} 是否将本图层插入到图层id为layerID的图层之前(默认为true，如果为false则将本图层插入到图层id为layerID的图层之后)。
101+
*/
102+
function moveLayer(layerID, beforeLayerID) {
103+
var layer = document.getElementById(layerID);
104+
// var beforeLayer;
105+
if (beforeLayerID) {
106+
var beforeLayer = document.getElementById(beforeLayerID);
107+
if(!beforeLayer){
108+
mapboxgl.Evented.prototype.fire("error", {error: new Error(`Layer with id "${beforeLayerID}" does not exist on this document.`)});
109+
}
110+
}
111+
if (layer && beforeLayer) {
112+
beforeLayer.parentNode.insertBefore(layer, beforeLayer);
113+
} else {
114+
//当没有传入beforeLayerID ，则默认将图层移动到最上面
115+
layer.parentNode.appendChild(layer);
116+
}
117+
}
118+
119+
}();

‎src/mapboxgl/overlay/GraphThemeLayer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export class Graph extends Theme {
4444
/**
4545
* @function mapboxgl.supermap.GraphThemeLayer.prototype.addFeatures
4646
* @description 向专题图图层中添加数据, 支持的feature类型为:iServer返回的feature json对象。
47-
* @param features - {Object} 待填加得要素
47+
* @param features - {Array<mapboxgl.supermap.ThemeFeature>} 待添加的要素
4848
*/
4949
addFeatures(features) {
5050
//数组

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