Skip to content

Commit d502fe2

Browse files
Junior2RanJunior2Ran
authored
Merge pull request #233 from 4869z/mapv-ol-pr
Mapv ol pr
2 parents da19d40 + 70627dd commit d502fe2

2 files changed

Lines changed: 127 additions & 6 deletions

File tree

‎examples/openlayers/ol-point-icon-projection.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>ol-point-colorpleth</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
9+
<style>
10+
html,
11+
body,
12+
#map {
13+
height: 100%;
14+
padding: 0;
15+
margin: 0;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div id="map"></div>
22+
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
var map = new ol.Map({
26+
target: 'map',
27+
layers: [
28+
new ol.layer.Tile({
29+
layerName: 'baseLayer',
30+
preload: 4,
31+
source: new ol.source.OSM({
32+
url: 'http://{a-e}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
33+
})
34+
})
35+
],
36+
loadTilesWhileAnimating: true,
37+
pixelRatio: 1,
38+
view: new ol.View({
39+
// projection: 'EPSG:4326',
40+
// center: [-102.17609405517578, 34.41583177128595],
41+
projection: 'EPSG:3857',
42+
center: ol.proj.transform([-102.17609405517578, 34.41583177128595], 'EPSG:4326',
43+
"EPSG:3857"),
44+
zoom: 5
45+
})
46+
});
47+
48+
var randomCount = 300;
49+
var data = [];
50+
51+
var img = new Image();
52+
img.src = '../images/flag.png';
53+
54+
img.onload = function () {
55+
// 构造数据
56+
while (randomCount--) {
57+
data.push({
58+
geometry: {
59+
type: 'Point',
60+
// coordinates: ol.proj.transform([-125.8 + Math.random() * 50, 30.3 + Math.random() * 20],
61+
// 'EPSG:4326',
62+
// "EPSG:3857")
63+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
64+
},
65+
deg: 360 * Math.random(),
66+
icon: img
67+
});
68+
}
69+
70+
var dataSet = new mapv.DataSet(data);
71+
72+
var baseSize = {
73+
width: 24,
74+
height: 30
75+
};
76+
77+
78+
var options = {
79+
draw: 'icon',
80+
// projection是dataSet中数据的投影类型 可以与map.view中的类型不同 会自动转换 但对性能有一定的影响 所以尽量让数据与map的类型一致
81+
// projection: 'EPSG:3857',
82+
projection: 'EPSG:4326',
83+
width: baseSize.width,
84+
height: baseSize.height,
85+
methods: {
86+
click: function (event) {
87+
console.log(event)
88+
},
89+
mousemove: function (event) {
90+
if (event) {
91+
mapvLayer.setDefaultCursor('pointer', event)
92+
} else {
93+
mapvLayer.setDefaultCursor('default', event)
94+
}
95+
}
96+
}
97+
};
98+
var mapvLayer = new mapv.OpenlayersLayer(map, dataSet, options);
99+
}
100+
</script>
101+
</body>
102+
103+
</html>

‎src/map/openlayers-map/Layer.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ class Layer extends BaseLayer {
9797
const context = canvas.getContext(this.context);
9898
const animationOptions = this.options.animation;
9999
const _projection = this.options.hasOwnProperty('projection') ? this.options.projection : 'EPSG:4326';
100+
const mapViewProjection = this.$Map.getView().getProjection().getCode();
100101
if (this.isEnabledTime()) {
101102
if (time === undefined) {
102103
clear(context);
@@ -120,11 +121,14 @@ class Layer extends BaseLayer {
120121
} else {
121122
context.clear(context.COLOR_BUFFER_BIT);
122123
}
123-
const dataGetOptions = {
124-
transferCoordinate: function(coordinate) {
125-
return map.getPixelFromCoordinate(ol.proj.transform(coordinate, _projection, 'EPSG:4326'));
126-
}
127-
};
124+
const dataGetOptions = {}
125+
dataGetOptions.transferCoordinate = ((_projection === mapViewProjection) ? function (coordinate) {
126+
// 当数据与map的投影一致时不再进行投影转换
127+
return map.getPixelFromCoordinate(coordinate);
128+
} : function (coordinate) {
129+
// 数据与Map投影不一致时 将数据投影转换为 Map的投影
130+
return map.getPixelFromCoordinate(ol.proj.transform(coordinate, _projection, mapViewProjection));
131+
});
128132

129133
if (time !== undefined) {
130134
dataGetOptions.filter = function(item) {
@@ -175,7 +179,7 @@ class Layer extends BaseLayer {
175179
extent: extent,
176180
source: new ol.source.ImageCanvas({
177181
canvasFunction: this.canvasFunction.bind(this),
178-
projection: (this.options.hasOwnProperty('projection') ? this.options.projection : 'EPSG:4326'),
182+
projection: this.$Map.getView().getProjection().getCode(), // 图层投影与Map保持一致
179183
ratio: (this.options.hasOwnProperty('ratio') ? this.options.ratio : 1)
180184
})
181185
});
@@ -329,6 +333,20 @@ class Layer extends BaseLayer {
329333
this.previousCursor_ = undefined
330334
}
331335
}
336+
337+
/**
338+
* 显示图层
339+
*/
340+
show() {
341+
this.$Map.addLayer(this.layer_);
342+
}
343+
344+
/**
345+
* 隐藏图层
346+
*/
347+
hide() {
348+
this.$Map.removeLayer(this.layer_);
349+
}
332350
}
333351

334352
export default Layer

0 commit comments

Comments
 (0)