Skip to content

Commit e2d31e9

Browse files
songyumengsongyumeng
committed
对接iportal样式
1 parent 25d7b6a commit e2d31e9

File tree

10 files changed

+7406
-6912
lines changed

10 files changed

+7406
-6912
lines changed

‎dist/iclient9-leaflet.js‎

Lines changed: 2626 additions & 2521 deletions
Large diffs are not rendered by default.

‎dist/iclient9-openlayers.js‎

Lines changed: 4509 additions & 4377 deletions
Large diffs are not rendered by default.

‎examples/leaflet/onlineWebmap.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
</head>
88
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
99
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
10-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
10+
<script type="text/javascript" src="../../node_modules/leaflet/dist/leaflet-src.js"></script>
1111
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
1212

1313
<script>
14-
L.supermap.webmap(75);
14+
L.supermap.webmap(128);
1515
</script>
1616
</body>
1717
</html>

‎examples/openlayers/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ var exampleConfig = {
268268
"ol_map": {
269269
name: "地图",
270270
content: [{
271-
name: "我的大学路线图",
271+
name: "2014当了一回背包客",
272272
thumbnail: "ol_onlineWebMap.png",
273273
fileName: "onlineWebMap"
274274
}]

‎examples/openlayers/mapboxVectorLayer.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@
1616
layers: [
1717
new ol.layer.VectorTile({
1818
source: new ol.source.VectorTile({
19-
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
20-
'© <a href="https://www.openstreetmap.org/copyright">' +
21-
'OpenStreetMap contributors</a>',
2219
format: new ol.format.MVT(),
2320
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
2421
tilePixelRatio: 16,

‎examples/openlayers/onlineWebMap.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>online服务底图</title>
5+
<title>2014当了一回背包客</title>
66
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
77
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
88
</head>
@@ -16,7 +16,7 @@
1616
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
1717
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
1818
<script type="text/javascript">
19-
new ol.supermap.WebMap(849).addEventListener(ol.supermap.WebMap.EventType.WEBMAPLOADEND, function (e) {
19+
new ol.supermap.WebMap(128).addEventListener(ol.supermap.WebMap.EventType.WEBMAPLOADEND, function (e) {
2020
var map = e.map;
2121
var popup = new ol.Overlay({
2222
element: document.getElementById('popup')

‎src/leaflet/mapping/WebMap.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var L = require("leaflet");
33
var Util = require('../core/Util');
44
var Request = require('../../common/util/Request');
55
var SuperMap = require('../../common/SuperMap');
6+
var CartoCSSToLeaflet = require('../overlay/carto/CartoCSSToLeaflet');
67
var WebMap = L.LayerGroup.extend({
78
options: {
89
map: 'map',
@@ -261,9 +262,20 @@ var WebMap = L.LayerGroup.extend({
261262
var ll = crs.unproject(L.point(coords[0], coords[1]));
262263
return new L.LatLng(ll.lat, ll.lng, coords[2]);
263264
};
265+
264266
var layer = L.geoJSON(L.Util.toGeoJSON(layerInfo.markers), {
265-
coordsToLatLng: coordsToLatLng, style: style,
266-
opacity: opacity
267+
pointToLayer: function (geojson, latlng) {
268+
var m = new L.Marker(latlng);
269+
m.setStyle = function (style) {
270+
if(style){
271+
m.setIcon(style);
272+
}
273+
}
274+
return m;
275+
},
276+
coordsToLatLng: coordsToLatLng, style: function (geoJsonFeature) {
277+
return CartoCSSToLeaflet.getStyleFromiPortalMarker(geoJsonFeature.properties.icon);
278+
},
267279
});
268280
if (this.options.featureLayerPopupEnable) {
269281
layer.bindPopup(this.options.featureLayerPopup || this.defaultFeatureLayerPopup)
@@ -284,10 +296,23 @@ var WebMap = L.LayerGroup.extend({
284296
return new L.LatLng(ll.lat, ll.lng, coords[2]);
285297
};
286298
if (!layerInfo.url) {
299+
var me = this;
287300
var layer = L.geoJSON(L.Util.toGeoJSON(layerInfo.features), {
288-
coordsToLatLng: coordsToLatLng, style: style,
289-
opacity: opacity
290-
});
301+
pointToLayer: function (geojson, latlng) {
302+
var m = new L.Marker(latlng);
303+
m.setStyle = function (style) {
304+
if(style){
305+
m.setIcon(style);
306+
}
307+
}
308+
return m;
309+
},
310+
coordsToLatLng: coordsToLatLng, style: function (geoJsonFeature) {
311+
return CartoCSSToLeaflet.getStyleFromiPortalStyle(style ? style : {}, geoJsonFeature.geometry.type, geoJsonFeature.properties.style);
312+
},
313+
opacity: opacity
314+
})
315+
;
291316
if (this.options.featureLayerPopupEnable) {
292317
layer.bindPopup(this.options.featureLayerPopup || this.defaultFeatureLayerPopup)
293318
}
@@ -310,7 +335,19 @@ var WebMap = L.LayerGroup.extend({
310335
});
311336
L.supermap.getFeaturesService(url).getFeaturesBySQL(sqlParam).on("complete", function (serviceResult) {
312337
var layer = L.geoJSON(serviceResult.result, {
313-
coordsToLatLng: coordsToLatLng, style: style,
338+
pointToLayer: function (geojson, latlng) {
339+
var m = new L.Marker(latlng);
340+
m.setStyle = function (style) {
341+
if(style){
342+
m.setIcon(style);
343+
}
344+
}
345+
return m;
346+
},
347+
coordsToLatLng: coordsToLatLng,
348+
style: function (geoJsonFeature) {
349+
return CartoCSSToLeaflet.getStyleFromiPortalStyle(style ? style : {}, geoJsonFeature.geometry.type, geoJsonFeature.properties.style);
350+
},
314351
opacity: opacity
315352
});
316353
if (this.options.featureLayerPopupEnable) {

‎src/leaflet/overlay/carto/CartoCSSToLeaflet.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,98 @@ L.supermap.CartoCSSToLeaflet = {
7070
}
7171
return style;
7272
},
73+
getStyleFromiPortalMarker: function (icon) {
74+
if (icon.indexOf("./") == 0) {
75+
return null;
76+
}
77+
//兼容iportal示例的问题
78+
if (icon.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
79+
icon=icon.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
80+
}
81+
return L.icon({
82+
iconUrl: icon,
83+
iconSize: L.point(48, 43),
84+
iconAnchor: L.point(24, 43),
85+
popupAnchor: L.point(0, -43)
86+
});
87+
},
88+
getStyleFromiPortalStyle: function (iPortalStyle, type, fStyle) {
89+
var featureStyle = fStyle ? JSON.parse(fStyle) : null;
90+
var style = {};
91+
if (type === 'Point' || type === 'MultiPoint') {
92+
var pointStyle = featureStyle || iPortalStyle.pointStyle;
93+
if (pointStyle.externalGraphic) {
94+
if (pointStyle.externalGraphic.indexOf("./") == 0) {
95+
return null;
96+
}
97+
//兼容iportal示例的问题
98+
if (pointStyle.externalGraphic.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
99+
pointStyle.externalGraphic=pointStyle.externalGraphic.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
100+
}
101+
return L.icon({
102+
iconUrl: pointStyle.externalGraphic,
103+
iconSize: L.point(pointStyle.graphicWidth, pointStyle.graphicHeight),
104+
iconAnchor: L.point(-pointStyle.graphicXOffset, -pointStyle.graphicYOffset),
105+
popupAnchor: L.point(0, -pointStyle.graphicHeight)
106+
});
73107

108+
}
109+
style.radius = pointStyle.pointRadius;
110+
style.color = pointStyle.strokeColor;
111+
style.opacity = pointStyle.strokeOpacity;
112+
style.lineCap = pointStyle.strokeLineCap;
113+
style.weight = pointStyle.strokeWidth;
114+
style.fillColor = pointStyle.fillColor;
115+
style.fillOpacity = pointStyle.fillOpacity;
116+
style.dashArray = this.dashStyle(pointStyle, 1);
117+
return style;
118+
}
119+
if (type === 'LineString' || type === 'MultiLineString' || type === 'Box') {
120+
var lineStyle = featureStyle || iPortalStyle.lineStyle;
121+
style.color = lineStyle.strokeColor;
122+
style.opacity = lineStyle.strokeOpacity;
123+
style.fillOpacity = lineStyle.fillOpacity;
124+
style.lineCap = lineStyle.strokeLineCap;
125+
style.weight = lineStyle.strokeWidth;
126+
style.dashArray = this.dashStyle(lineStyle, 1);
127+
return style;
128+
}
129+
if (type === 'Polygon' || type === 'MultiPolygon') {
130+
var polygonStyle = featureStyle || iPortalStyle.polygonStyle;
131+
style.color = polygonStyle.strokeColor;
132+
style.opacity = polygonStyle.strokeOpacity;
133+
style.lineCap = polygonStyle.strokeLineCap;
134+
style.weight = polygonStyle.strokeWidth;
135+
style.fillColor = polygonStyle.fillColor;
136+
style.fillOpacity = polygonStyle.fillOpacity;
137+
style.dashArray = this.dashStyle(polygonStyle, 1);
138+
return style;
139+
}
140+
},
141+
dashStyle: function (style, widthFactor) {
142+
if (!style)return [];
143+
var w = style.strokeWidth * widthFactor;
144+
var str = style.strokeDashstyle;
145+
switch (str) {
146+
case 'solid':
147+
return [];
148+
case 'dot':
149+
return [1, 4 * w];
150+
case 'dash':
151+
return [4 * w, 4 * w];
152+
case 'dashdot':
153+
return [4 * w, 4 * w, 1, 4 * w];
154+
case 'longdash':
155+
return [8 * w, 4 * w];
156+
case 'longdashdot':
157+
return [8 * w, 4 * w, 1, 4 * w];
158+
default:
159+
if (!str)return [];
160+
if (SuperMap.Util.isArray(str))return str;
161+
str = SuperMap.String.trim(str).replace(/\s+/g, ",");
162+
return str.replace(/\[|\]/gi, "").split(",");
163+
}
164+
},
74165
getValidStyleFromCarto: function (zoom, scale, shader, feature, fromServer) {
75166
if (!shader) {
76167
return null;

‎src/openlayers/core/StyleUtils.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,128 @@ ol.supermap.StyleUtils = {
340340
});
341341
}
342342
},
343+
dashStyle: function (style, widthFactor) {
344+
if (!style)return [];
345+
var w = style.strokeWidth * widthFactor;
346+
var str = style.strokeDashstyle;
347+
switch (str) {
348+
case 'solid':
349+
return [];
350+
case 'dot':
351+
return [1, 4 * w];
352+
case 'dash':
353+
return [4 * w, 4 * w];
354+
case 'dashdot':
355+
return [4 * w, 4 * w, 1, 4 * w];
356+
case 'longdash':
357+
return [8 * w, 4 * w];
358+
case 'longdashdot':
359+
return [8 * w, 4 * w, 1, 4 * w];
360+
default:
361+
if (!str)return [];
362+
if (SuperMap.Util.isArray(str))return str;
363+
str = SuperMap.String.trim(str).replace(/\s+/g, ",");
364+
return str.replace(/\[|\]/gi, "").split(",");
365+
}
366+
},
367+
getStyleFromiPortalMarker: function (icon) {
368+
if (icon.indexOf("./") == 0) {
369+
return null;
370+
}
371+
//兼容iportal示例的问题
372+
if (icon.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
373+
icon=icon.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
374+
}
375+
return new ol.style.Style({
376+
image: new ol.style.Icon({
377+
src: icon,
378+
opacity: 1,
379+
size: [48, 43],
380+
anchor: [0.5, 1]
381+
})
382+
});
383+
},
384+
getStyleFromiPortalStyle: function (iPortalStyle, type, fStyle) {
385+
var featureStyle = fStyle ? JSON.parse(fStyle) : null;
386+
var me = this;
387+
if (type === 'Point' || type === 'MultiPoint') {
388+
var pointStyle = featureStyle || iPortalStyle.pointStyle;
389+
if (pointStyle.externalGraphic) {
390+
if (pointStyle.externalGraphic.indexOf("./") == 0) {
391+
return null;
392+
}
393+
//兼容iportal示例的问题
394+
if (pointStyle.externalGraphic.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
395+
pointStyle.externalGraphic=pointStyle.externalGraphic.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
396+
}
397+
return new ol.style.Style({
398+
image: new ol.style.Icon({
399+
src: pointStyle.externalGraphic,
400+
opacity: pointStyle.graphicOpacity,
401+
size: [pointStyle.graphicWidth, pointStyle.graphicHeight],
402+
//anchor: [-pointStyle.graphicXOffset / pointStyle.graphicWidth, -pointStyle.graphicYOffset / pointStyle.graphicHeight]
403+
})
404+
});
405+
}
406+
return new ol.style.Style({
407+
image: new ol.style.Circle({
408+
fill: new ol.style.Fill({
409+
color: me.hexToRgba(pointStyle.fillColor, pointStyle.fillOpacity)
410+
}),
411+
stroke: new ol.style.Stroke({
412+
color: me.hexToRgba(pointStyle.strokeColor, pointStyle.strokeOpacity),
413+
lineCap: pointStyle.strokeLineCap,
414+
lineDash: this.dashStyle(pointStyle, 1),
415+
width: pointStyle.strokeWidth
416+
}),
417+
radius: pointStyle.pointRadius
418+
})
419+
});
420+
}
421+
if (type === 'LineString' || type === 'MultiLineString' || type === 'Box') {
422+
var lineStyle = featureStyle || iPortalStyle.lineStyle;
423+
return new ol.style.Style({
424+
stroke: new ol.style.Stroke({
425+
color: me.hexToRgba(lineStyle.strokeColor, lineStyle.strokeOpacity),
426+
lineCap: lineStyle.strokeLineCap,
427+
lineDash: this.dashStyle(lineStyle, 1),
428+
width: lineStyle.strokeWidth
429+
})
430+
});
431+
}
432+
if (type === 'Polygon' || type === 'MultiPolygon') {
433+
var polygonStyle = featureStyle || iPortalStyle.polygonStyle;
434+
return new ol.style.Style({
435+
fill: new ol.style.Fill({
436+
color: me.hexToRgba(polygonStyle.fillColor, polygonStyle.fillOpacity)
437+
}),
438+
stroke: new ol.style.Stroke({
439+
color: me.hexToRgba(polygonStyle.strokeColor, polygonStyle.strokeOpacity),
440+
lineCap: polygonStyle.strokeLineCap,
441+
lineDash: this.dashStyle(polygonStyle, 1),
442+
width: polygonStyle.strokeWidth
443+
})
444+
});
445+
}
446+
},
447+
448+
hexToRgba: function (hex, opacity) {
449+
var color = [], rgba = [];
450+
hex = hex.replace(/#/, "");
451+
if (hex.length == 3) {
452+
var tmp = [];
453+
for (var i = 0; i < 3; i++) {
454+
tmp.push(hex.charAt(i) + hex.charAt(i));
455+
}
456+
hex = tmp.join("");
457+
}
458+
for (var i = 0; i < 6; i += 2) {
459+
color[i] = "0x" + hex.substr(i, 2);
460+
rgba.push(parseInt(Number(color[i])));
461+
}
462+
rgba.push(opacity);
463+
return "rgba(" + rgba.join(",") + ")";
464+
},
343465

344466
getDefaultStyle: function (type) {
345467
var style = style || {};

‎src/openlayers/mapping/WebMap.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ require('../core/Base');
22
var ol = require('openlayers');
33
var Request = require('../../common/util/Request');
44
var SuperMap = require('../../common/SuperMap');
5+
var StyleUtils = require('../core/StyleUtils');
56
ol.supermap.WebMap = function (id, options) {
67
ol.Observable.call(this);
78
this.id = id;
@@ -269,6 +270,9 @@ ol.supermap.WebMap.prototype.createMarkersLayer = function (layerInfo) {
269270
marker, point, size, offset, icon, that = this;
270271
//todo offset
271272
var layer = new ol.layer.Vector({
273+
style: function (feature) {
274+
return StyleUtils.getStyleFromiPortalMarker(feature.getProperties().icon);
275+
},
272276
source: new ol.source.Vector({
273277
features: (new ol.format.GeoJSON()).readFeatures(ol.supermap.Util.toGeoJSON(layerInfo.markers)),
274278
wrapX: false
@@ -288,6 +292,9 @@ ol.supermap.WebMap.prototype.createVectorLayer = function (layerInfo) {
288292
//todo readonly = layerInfo.readonly;
289293
if (!layerInfo.url) {
290294
var layer = new ol.layer.Vector({
295+
style: function (feature) {
296+
return StyleUtils.getStyleFromiPortalStyle(style, feature.getGeometry().getType(), feature.getProperties().style);
297+
},
291298
source: new ol.source.Vector({
292299
features: (new ol.format.GeoJSON()).readFeatures(ol.supermap.Util.toGeoJSON(layerInfo.features)),
293300
wrapX: false
@@ -313,6 +320,9 @@ ol.supermap.WebMap.prototype.createVectorLayer = function (layerInfo) {
313320
});
314321
new ol.supermap.GetFeaturesService(url).getFeaturesBySQL(sqlParam).on("complete", function (serviceResult) {
315322
var layer = new ol.layer.Vector({
323+
style: function (feature) {
324+
return StyleUtils.getStyleFromiPortalStyle(style, feature.getGeometry().getType(), feature.getProperties().style);
325+
},
316326
source: new ol.source.Vector({
317327
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result),
318328
wrapX: false

0 commit comments

Comments
 (0)