Skip to content

Commit 5a46652

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

12 files changed

Lines changed: 4134 additions & 1331 deletions

File tree

‎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)