Skip to content

Commit ae463eb

Browse files
songyumengsongyumeng
committed
【API】ol MapboxStyle支持选择要素 修复ol mapv热力图在放到浏览器显示比例时偏移的bug
1 parent 4b2ef3d commit ae463eb

File tree

7 files changed

+1254
-863
lines changed

7 files changed

+1254
-863
lines changed

‎dist/iclient9-openlayers.js‎

Lines changed: 1058 additions & 835 deletions
Large diffs are not rendered by default.

‎dist/iclient9-openlayers.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/openlayers/mvtvectorlayer_mbstyle_beijing.html‎

Lines changed: 101 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,64 @@
2626
margin: 0;
2727
margin-right: 10px;
2828
}
29+
30+
.ol-popup {
31+
position: absolute;
32+
background-color: white;
33+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
34+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
35+
padding: 15px;
36+
border-radius: 10px;
37+
border: 1px solid #cccccc;
38+
bottom: 12px;
39+
left: -50px;
40+
min-width: 280px;
41+
}
42+
43+
.ol-popup:after,
44+
.ol-popup:before {
45+
top: 100%;
46+
border: solid transparent;
47+
content: " ";
48+
height: 0;
49+
width: 0;
50+
position: absolute;
51+
pointer-events: none;
52+
}
53+
54+
.ol-popup:after {
55+
border-top-color: white;
56+
border-width: 10px;
57+
left: 48px;
58+
margin-left: -10px;
59+
}
60+
61+
.ol-popup:before {
62+
border-top-color: #cccccc;
63+
border-width: 11px;
64+
left: 48px;
65+
margin-left: -11px;
66+
}
67+
68+
.ol-popup-closer {
69+
text-decoration: none;
70+
position: absolute;
71+
top: 2px;
72+
right: 8px;
73+
}
74+
75+
.ol-popup-closer:after {
76+
content: "✖";
77+
}
2978
</style>
3079
</head>
3180

3281
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
3382
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
83+
<div id="popup" class="ol-popup">
84+
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
85+
<div id="popup-content"></div>
86+
</div>
3487
<div id='menu' class="mapboxgl-ctrl">
3588
<input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'>
3689
<label for='basic' data-i18n="resources.text_vectorDefaultStyle"></label>
@@ -51,8 +104,36 @@
51104
<script type="text/javascript" src="http://iclient.supermap.io/web/libs/openlayers/plugins/ol-mapbox-style/2.11.2/olms.js"></script>
52105
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
53106
<script type="text/javascript">
54-
console.log(olms);
55-
var url = (window.isLocal ? window.server : "http://54.223.164.155:8090") + "/iserver/services/map-beijing/rest/maps/beijingMap";
107+
var url = (window.isLocal ? window.server : "http://54.223.164.155:8090") +
108+
"/iserver/services/map-beijing/rest/maps/beijingMap";
109+
/**
110+
* Elements that make up the popup.
111+
*/
112+
var container = document.getElementById('popup');
113+
var content = document.getElementById('popup-content');
114+
var closer = document.getElementById('popup-closer');
115+
/**
116+
* Create an overlay to anchor the popup to the map.
117+
*/
118+
var overlay = new ol.Overlay({
119+
element: container,
120+
autoPan: true,
121+
autoPanAnimation: {
122+
duration: 250
123+
}
124+
});
125+
126+
127+
/**
128+
* Add a click handler to hide the popup.
129+
* @return {boolean} Don't follow the href.
130+
*/
131+
closer.onclick = function () {
132+
overlay.setPosition(undefined);
133+
closer.blur();
134+
return false;
135+
};
136+
56137
var stylesJson = {
57138
'basic': "beijing.json",
58139
'dark': "beijingDark.json",
@@ -61,9 +142,10 @@
61142
'osm': "beijingOSM.json",
62143
'positron': "beijingPositron.json"
63144
}
64-
var vectorLayer,currentStyleID,styles = {};
145+
var vectorLayer, currentStyleID, styles = {};
65146
var map = new ol.Map({
66147
target: 'map',
148+
overlays: [overlay],
67149
controls: ol.control.defaults({
68150
attributionOptions: {
69151
collapsed: false
@@ -76,7 +158,21 @@
76158
zoom: 11
77159
})
78160
});
161+
var targetStyle;
79162
switchStyle(null, 'basic');
163+
map.on('click', function (e) {
164+
var features = map.getFeaturesAtPixel(e.pixel);
165+
if (features) {
166+
var coordinate = e.coordinate;
167+
content.innerHTML = "Layer: " + features[0].get('layer') + "<br />" +
168+
(features[0].get('NAME') ? "Name: " + features[0].get('NAME') + "<br />" : "") +
169+
(features[0].get('道路名称') ? "道路名称: " + features[0].get('道路名称') + "<br />" : "");
170+
overlay.setPosition(coordinate);
171+
targetStyle.setSelectedId(features[0].getId(), features[0].get('layer'));
172+
vectorLayer.changed();
173+
}
174+
175+
});
80176
var layerList = document.getElementById('menu');
81177
var inputs = layerList.getElementsByTagName('input');
82178

@@ -95,15 +191,15 @@
95191
}
96192
if (styles[styleID]) {
97193
options.style = styles[styleID];
98-
var targetStyle = new ol.supermap.MapboxStyles(options);
194+
targetStyle = new ol.supermap.MapboxStyles(options);
99195
targetStyle.on('styleLoaded', function () {
100196
styleLoaded(styleID, this);
101197
});
102198
} else {
103199
$.get('../data/styles/' + stylesJson[styleID], function (json) {
104200
styles[styleID] = json;
105201
options.style = styles[styleID];
106-
var targetStyle = new ol.supermap.MapboxStyles(options);
202+
targetStyle = new ol.supermap.MapboxStyles(options);
107203
targetStyle.on('styleloaded', function () {
108204
styleLoaded(styleID, this);
109205
});

‎src/openlayers/overlay/Mapv.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import ol from 'openlayers';
2-
import {MapvLayer} from './mapv/MapvLayer';
3-
import {Util} from '../core/Util';
2+
import {
3+
MapvLayer
4+
} from './mapv/MapvLayer';
5+
import {
6+
Util
7+
} from '../core/Util';
48

59
/**
610
* @class ol.source.Mapv
@@ -29,15 +33,15 @@ export class Mapv extends ol.source.ImageCanvas {
2933
this.mapvOptions = opt_options.mapvOptions;
3034

3135
function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) { // eslint-disable-line no-unused-vars
32-
var mapWidth = size[0] * pixelRatio;
33-
var mapHeight = size[1] * pixelRatio;
34-
var width = this.map.getSize()[0] * pixelRatio;
35-
var height = this.map.getSize()[1] * pixelRatio;
36+
var mapWidth = size[0] / pixelRatio;
37+
var mapHeight = size[1] / pixelRatio;
38+
var width = this.map.getSize()[0];
39+
var height = this.map.getSize()[1];
3640
if (!this.layer) {
3741
this.layer = new MapvLayer(this.map, this.dataSet, this.mapvOptions, mapWidth, mapHeight, this);
3842
}
3943
this.layer.pixelRatio = pixelRatio;
40-
this.layer.offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
44+
this.layer.offset = [(mapWidth - width) / 2 , (mapHeight - height) / 2 ];
4145
if (!this.rotate) {
4246
this.rotate = this.map.getView().getRotation();
4347
} else {
@@ -56,11 +60,11 @@ export class Mapv extends ol.source.ImageCanvas {
5660
}
5761
var canvas2 = this.context.canvas;
5862
this.context.clearRect(0, 0, canvas2.width, canvas2.height);
59-
canvas2.width = mapWidth;
60-
canvas2.height = mapHeight;
61-
canvas2.style.width = mapWidth + "px";
62-
canvas2.style.height = mapHeight + "px";
63-
this.context.drawImage(canvas, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth, mapHeight);
63+
canvas2.width = size[0];
64+
canvas2.height = size[0];
65+
canvas2.style.width = size[0] + "px";
66+
canvas2.style.height = size[0] + "px";
67+
this.context.drawImage(canvas, 0, 0, size[0], size[0], 0, 0, size[0], size[0]);
6468
if (this.resolution !== resolution || JSON.stringify(this.extent) !== JSON.stringify(extent)) {
6569
this.resolution = resolution;
6670
this.extent = extent;

‎src/openlayers/overlay/mapv/MapvCanvasLayer.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export class MapvCanvasLayer {
3838
if (me.context == '2d') {
3939
canvas.getContext(me.context).scale(devicePixelRatio, devicePixelRatio);
4040
}
41-
canvas.style.width = canvas.width + "px";
42-
canvas.style.height = canvas.height + "px";
41+
canvas.style.width = me.width + "px";
42+
canvas.style.height = me.height + "px";
4343
}
4444

4545
/**
@@ -57,12 +57,10 @@ export class MapvCanvasLayer {
5757
* @description 调整地图大小
5858
*/
5959
resize(mapWidth, mapHeight) {
60-
this.canvas.width = mapWidth;
61-
this.canvas.height = mapHeight;
6260
var global$2 = typeof window === 'undefined' ? {} : window;
6361
var devicePixelRatio = this.devicePixelRatio = global$2.devicePixelRatio;
64-
this.canvas.width = parseInt(this.width) * devicePixelRatio;
65-
this.canvas.height = parseInt(this.height) * devicePixelRatio;
62+
this.canvas.width = mapWidth * devicePixelRatio;
63+
this.canvas.height = mapHeight * devicePixelRatio;
6664
if (this.context == '2d') {
6765
this.canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio);
6866
}

‎src/openlayers/overlay/mapv/MapvLayer.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export class MapvLayer extends BaiduMapLayer {
5454
map.on('movestart', this.moveStartEvent.bind(this));
5555
map.on('moveend', this.moveEndEvent.bind(this));
5656
map.getView().on('change:center', this.zoomEvent.bind(this));
57+
map.getView().on('change:size', this.sizeEvent.bind(this));
5758
map.on('pointerdrag', this.dragEvent.bind(this));
5859
this.bindEvent();
5960
}
@@ -109,6 +110,14 @@ export class MapvLayer extends BaiduMapLayer {
109110
zoomEvent() {
110111
this.clear(this.getContext());
111112
}
113+
/**
114+
* @function MapvLayer.prototype.zoomEvent
115+
* @description 缩放事件
116+
*/
117+
sizeEvent() {
118+
this.canvasLayer.resize();
119+
}
120+
112121

113122
/**
114123
* @function MapvLayer.prototype.moveStartEvent
@@ -281,7 +290,7 @@ export class MapvLayer extends BaiduMapLayer {
281290
var x = (coordinate[0] - self._mapCenter[0]) / self._reselutions,
282291
y = (self._mapCenter[1] - coordinate[1]) / self._reselutions;
283292
var scaledP = [x + self._mapCenterPx[0], y + self._mapCenterPx[1]];
284-
scaledP = scale(scaledP, self._mapCenterPx, self.pixelRatio);
293+
scaledP = scale(scaledP, self._mapCenterPx,1);
285294
/*//有旋转量的时候处理旋转
286295
if (self._rotation !== 0) {
287296
var rotatedP = rotate(scaledP, self._rotation, self._mapCenterPx);

‎src/openlayers/overlay/vectortile/MapboxStyles.js‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import ol from 'openlayers';
2-
import {FetchRequest, CommonUtil} from "@supermap/iclient-common";
3-
import {olExtends} from './olExtends'
2+
import {
3+
FetchRequest,
4+
CommonUtil
5+
} from "@supermap/iclient-common";
6+
import {
7+
olExtends
8+
} from './olExtends'
49

510

611
/**
@@ -55,6 +60,30 @@ export class MapboxStyles extends ol.Observable {
5560
this.url = options.url ? options.url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true' : "";
5661
this.resolutions = options.resolutions;
5762
this.style = options.style;
63+
this.selectedStyle = options.selectedStyle || function () {
64+
return new ol.style.Style({
65+
fill: new ol.style.Fill({
66+
color: 'rgba(255, 0, 0, 1)'
67+
}),
68+
stroke: new ol.style.Stroke({
69+
color: 'rgba(255, 0, 0, 1)',
70+
width: 10
71+
}),
72+
text: new ol.style.Text({
73+
font: 'normal 400 11.19px "Microsoft YaHei"',
74+
placement: 'point',
75+
fill: new ol.style.Fill({
76+
color: 'blue'
77+
})
78+
}),
79+
image: new ol.style.Circle({
80+
radius: 5,
81+
fill: new ol.style.Fill({
82+
color: 'blue'
83+
})
84+
})
85+
})
86+
}
5887
this.layersBySourceLayer = {};
5988
olExtends(this.map);
6089
if (this.style) {
@@ -94,6 +123,12 @@ export class MapboxStyles extends ol.Observable {
94123
this.layersBySourceLayer[sourceLayer] = layers;
95124
return layers;
96125
}
126+
setSelectedId(selectedId, sourceLayer) {
127+
this.selectedObject = {
128+
selectedId: selectedId,
129+
sourceLayer: sourceLayer
130+
};
131+
}
97132
updateStyles(layerStyles) {
98133
if (Object.prototype.toString.call(layerStyles) !== '[object Array]') {
99134
layerStyles = [layerStyles];
@@ -146,11 +181,37 @@ export class MapboxStyles extends ol.Observable {
146181
if (this.map) {
147182
window.olms.applyBackground(this.map, mbStyle);
148183
}
149-
this.featureStyleFuntion = window.olms.stylefunction({
184+
this.featureStyleFuntion = this._getStyleFunction(mbStyle, spriteData, spriteImageUrl)
185+
}
186+
_getStyleFunction(mbStyle, spriteData, spriteImageUrl) {
187+
var fun = window.olms.stylefunction({
150188
setStyle: function () {},
151189
set: function () {},
152190
changed: function () {}
153191
}, mbStyle, this.source, this.resolutions, spriteData, spriteImageUrl);
192+
return (feature, resolution) => {
193+
const style = fun(feature, resolution);
194+
if (this.selectedObject && this.selectedObject.selectedId === feature.getId() && this.selectedObject.sourceLayer === feature.get('layer')) {
195+
const styleIndex = style && style[0] ? style[0].getZIndex() : 99999;
196+
let selectStyles = this.selectedStyle(feature, resolution);
197+
if (!Array.isArray(selectStyles)) {
198+
selectStyles = [selectStyles];
199+
}
200+
for (const selectStyle of selectStyles) {
201+
if (feature.getGeometry().getType() === 'Point' && style[0].getText() && selectStyle.getText()) {
202+
selectStyle.setFill(null);
203+
selectStyle.setStroke(null);
204+
selectStyle.setImage();
205+
selectStyle.getText().setText(style[0].getText().getText());
206+
}
207+
selectStyle.setZIndex(styleIndex);
208+
}
209+
return selectStyles;
210+
211+
}
212+
return style;
213+
}
214+
154215
}
155216
_withPath(url, path) {
156217
if (path && url.indexOf('http') != 0) {

0 commit comments

Comments
 (0)