diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index d6442d0..e99a556 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -710,6 +710,7 @@ }, //初始化地图 createMap() { + let _this = this; loadModules([ "dojo/parser", "dojo/ready", @@ -738,7 +739,7 @@ "dijit/layout/BorderContainer", "dijit/layout/ContentPane", - + "dojo/domReady!" ]) .then( @@ -769,18 +770,111 @@ let map = new Map("previewOfSiteStatusMaps", { center: [100, 35], zoom: 5, - logo:false, - slider:false + logo: false, + slider: false }); let Main_Map = new ArcGISTiledMapServiceLayer( "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" ); map.addLayer(Main_Map); - map.on("zoom-end", function() { + /* map.on("zoom-end", function() { console.log(map.getLevel()); }); map.on("click", function(e) { console.log(e); + }); */ + map.on("load", function() { + _this.$http + .post(_this.nozzle.listStationBase, { + data: {} + }) + .then(response => { + if (response.data.code === 200) { + console.log(response); + let photoInfo = {}; + let wgs = new SpatialReference({ + wkid: 4326 + }); + photoInfo.data = arrayUtils.map( + response.data.data, + function(p) { + /* if(p.lon!=null){ + console.log(1); + } */ + let latlng = new Point( + parseFloat(p.lon), + parseFloat(p.lat), + wgs + ); + let webMercator = webMercatorUtils.geographicToWebMercator( + latlng + ); + let attributes = { + stName: p.stName + }; + return { + x: webMercator.x, + y: webMercator.y, + attributes: attributes + }; + } + ); + let popupTemplate = new PopupTemplate({ + title: "", + fieldInfos: [ + { + fieldName: "stName", + "label": "名称：", + visible: true + } + ] + }); + let clusterLayer = new ClusterLayer({ + data: photoInfo.data, + distance: 100, + id: "clusters", + labelColor: "#fff", + labelOffset: 10, + resolution: map.extent.getWidth() / map.width, + singleColor: "#888", + singleTemplate: popupTemplate + }); + let defaultSym = new SimpleMarkerSymbol().setSize(4); + let renderer = new ClassBreaksRenderer( + defaultSym, + "clusterCount" + ); + + let picBaseUrl = + "https://static.arcgis.com/images/Symbols/Shapes/"; + let blue = new PictureMarkerSymbol( + picBaseUrl + "BluePin1LargeB.png", + 32, + 32 + ).setOffset(0, 15); + let green = new PictureMarkerSymbol( + picBaseUrl + "GreenPin1LargeB.png", + 64, + 64 + ).setOffset(0, 15); + let red = new PictureMarkerSymbol( + picBaseUrl + "RedPin1LargeB.png", + 72, + 72 + ).setOffset(0, 15); + renderer.addBreak(0, 2, blue); + renderer.addBreak(2, 200, green); + renderer.addBreak(200, 1001, red); + + clusterLayer.setRenderer(renderer); + map.addLayer(clusterLayer); + } else { + message(response); + } + }) + .catch(response => { + message(response); + }); }); } ) diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index d6442d0..e99a556 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -710,6 +710,7 @@ }, //初始化地图 createMap() { + let _this = this; loadModules([ "dojo/parser", "dojo/ready", @@ -738,7 +739,7 @@ "dijit/layout/BorderContainer", "dijit/layout/ContentPane", - + "dojo/domReady!" ]) .then( @@ -769,18 +770,111 @@ let map = new Map("previewOfSiteStatusMaps", { center: [100, 35], zoom: 5, - logo:false, - slider:false + logo: false, + slider: false }); let Main_Map = new ArcGISTiledMapServiceLayer( "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" ); map.addLayer(Main_Map); - map.on("zoom-end", function() { + /* map.on("zoom-end", function() { console.log(map.getLevel()); }); map.on("click", function(e) { console.log(e); + }); */ + map.on("load", function() { + _this.$http + .post(_this.nozzle.listStationBase, { + data: {} + }) + .then(response => { + if (response.data.code === 200) { + console.log(response); + let photoInfo = {}; + let wgs = new SpatialReference({ + wkid: 4326 + }); + photoInfo.data = arrayUtils.map( + response.data.data, + function(p) { + /* if(p.lon!=null){ + console.log(1); + } */ + let latlng = new Point( + parseFloat(p.lon), + parseFloat(p.lat), + wgs + ); + let webMercator = webMercatorUtils.geographicToWebMercator( + latlng + ); + let attributes = { + stName: p.stName + }; + return { + x: webMercator.x, + y: webMercator.y, + attributes: attributes + }; + } + ); + let popupTemplate = new PopupTemplate({ + title: "", + fieldInfos: [ + { + fieldName: "stName", + "label": "名称：", + visible: true + } + ] + }); + let clusterLayer = new ClusterLayer({ + data: photoInfo.data, + distance: 100, + id: "clusters", + labelColor: "#fff", + labelOffset: 10, + resolution: map.extent.getWidth() / map.width, + singleColor: "#888", + singleTemplate: popupTemplate + }); + let defaultSym = new SimpleMarkerSymbol().setSize(4); + let renderer = new ClassBreaksRenderer( + defaultSym, + "clusterCount" + ); + + let picBaseUrl = + "https://static.arcgis.com/images/Symbols/Shapes/"; + let blue = new PictureMarkerSymbol( + picBaseUrl + "BluePin1LargeB.png", + 32, + 32 + ).setOffset(0, 15); + let green = new PictureMarkerSymbol( + picBaseUrl + "GreenPin1LargeB.png", + 64, + 64 + ).setOffset(0, 15); + let red = new PictureMarkerSymbol( + picBaseUrl + "RedPin1LargeB.png", + 72, + 72 + ).setOffset(0, 15); + renderer.addBreak(0, 2, blue); + renderer.addBreak(2, 200, green); + renderer.addBreak(200, 1001, red); + + clusterLayer.setRenderer(renderer); + map.addLayer(clusterLayer); + } else { + message(response); + } + }) + .catch(response => { + message(response); + }); }); } ) diff --git a/src/util/project.js b/src/util/project.js index 6572106..8038fef 100644 --- a/src/util/project.js +++ b/src/util/project.js @@ -12,6 +12,7 @@ "platEquipmentGetEquipStatistics":"/plat/equipment/getEquipStatistics",//站点状况预览图-----获取平台拥有设备类型、数量统计 "sysPlatformGetSiteStateStatistics":"/sys/platform/getSiteStateStatistics",//站点状况预览图-----平台近七日站点状态统计 "warnLogGetWarnLogOfPlatform":"/warn/log/getWarnLogOfPlatform",//站点状况预览图-----查询该平台各站点各因子最新的报警数据 + "listStationBase":"sys/site/listStationBase",//所有站点 }; for (let item in nozzle) {