2. 程式人生 > 實用技巧 >基於SuperMap iClient JavaScript智慧環保GIS應用平臺 環保 資訊平臺 質檢 智慧城市

基於SuperMap iClient JavaScript智慧環保GIS應用平臺 環保 資訊平臺 質檢 智慧城市

阿新 • • 發佈：2020-07-27

　　環境GIS綜合應用系統以二三維GIS平臺和基礎地理資料為支撐，整合各類環保業務資料建立環境專題圖，以直觀、形象的方式展示環境和汙染源的空間分佈規律，實現GIS資料與環境資料的整合管理、查詢統計、空間分析、專題分析、輔助決策及綜合展示等功能，方便使用者及時準確的瞭解和掌握環境汙染變化現狀和趨勢，為環境管理、環境規劃、巨集觀決策提供技術支援。

　　該系統包括環境質量監測、汙染源監測、輔助決策、統計分析及一張圖管理五大功能模組，通過一張圖展示，實現環境水、環境空氣及汙染源監測監控直觀化;通過河流斷面快速溯源，實現汙染源企業定位精準化;通過水氣模擬分析，實現輔助決策智慧化;通過時空分析，實現環境與汙染源統計分析多維化;通過關聯企業一廠一檔資訊，實現汙染源企業全生命週期資訊檢視與管理。

部分原始碼，開源如下：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_overlayAnalyst"></title>
<style>
        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup" style='width:350px'>
<div class="panel panel-default">
<div class='panel-heading'>
<h3 class='panel-title' data-i18n="resources.text_overlayAnalyst"></h3>
</div>
<div class='panel-body'>
<div class='input-group'>
<span class='input-group-addon'><span data-i18n="resources.text_sourceDataset"></span><span data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>　</span>
<input id='datasetName' type='text' class='form-control' value='samples_processing_newyorkZone_R' /></div>
<p></p>
<div class='input-group'>
<span class='input-group-addon'><span data-i18n="resources.text_overlayDataset"></span><span data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span></span>
<input id='datasetOverlay' type='text' class='form-control' value='samples_processing_newyorkResidential_R' />
</div>
<p></p>
<div class='input-group'>
<span class='input-group-addon'><span data-i18n="resources.text_analystMode"></span><span data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span></span>
<select class='form-control' id='mode' name='mode'>
<option value='clip' selected data-i18n="resources.text_clip"></option>
<option value='intersect' data-i18n="resources.text_intersect"></option>
<option value='erase' data-i18n="resources.text_erase"></option>
<option value='union' data-i18n="resources.text_union"></option>
<option value='update' data-i18n="resources.text_update"></option>
<option value='identity' data-i18n="resources.text_identity"></option>
<option value='xor' data-i18n="resources.text_xor"></option>
</select>
</div>
<p></p>
<div class='input-group'>
<span class='input-group-addon' data-i18n="resources.text_retainedFieldSource"></span>
<input id='srcFields' type='text' class='form-control' value='LocationID' />
</div>
<p></p>
<div class='input-group' id='overlayField' style='display: none'>
<span class='input-group-addon' data-i18n="resources.text_retainedFieldOverlay"></span>
<input id='overlayFields' type='text' class='form-control' value='type' />
</div>
<p></p>
<div align='right'>
<input type='button' id='btn' class='btn btn-primary' data-i18n="[value]resources.text_analyst" />
</div>
</div>
</div>
</div>
<script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var layer,
            processingsUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
            mapURL = host + "/iserver/services/map-world/rest/maps/World",
            map = new ol.Map({
                target: 'map',
                controls: ol.control.defaults({
                        attributionOptions: {
                            collapsed: false
                        }
                    })
                    .extend([new ol.supermap.control.Logo()]),
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            });
        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: mapURL,
            }),
        }));

        var processingService = new ol.supermap.ProcessingService(processingsUrl, {
            withCredentials: window.isLocal
        });

        initForm();
        bindClick();

        function initForm() {
            $("#mode").change(function () {
                var mode = $(this).val();
                if (mode == "update" || mode == "clip" || mode == "erase") {
                    $("#overlayField").hide();
                } else {
                    $("#overlayField").show();
                }
            });
            var info = new ol.control.Control({
                element: popup
            });
            info.setMap(map);
            map.addControl(info);
        }

        function bindClick() {
            $('#btn').on('click', function () {
                if ($('#msg_container')[0]) {
                    $('#msg_container').remove();
                }
                widgets.loader.showLoader();
                if (map && layer) {
                    map.removeLayer(layer);
                }
                overlayGeoJobs();
            });
        }

        SuperMap.SecurityManager.registerToken(processingsUrl, window.exampleToken);

        function overlayGeoJobs() {
            var overlayGeoJobParameter = new SuperMap.OverlayGeoJobParameter({
                datasetName: $('#datasetName').val(),
                datasetOverlay: $('#datasetOverlay').val(),
                mode: $('#mode option:selected').attr('value'),
                srcFields: $('#srcFields').val(),
                overlayFields: $('#overlayFields').val()
            });
            processingService.addOverlayGeoJob(overlayGeoJobParameter, function (serviceResult) {
                if (serviceResult.error) {
                    widgets.loader.removeLoader();
                    var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                    widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
                    return;
                }
                serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                    if (info.serviceType === 'RESTMAP') {
                        SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (
                            response) {
                            return response.json();
                        }).then(function (result) {
                            var mapUrl = result[0].path;
                            new ol.supermap.MapService(mapUrl).getMapInfo(function (mapInfo) {
                                layer = new ol.layer.Tile({
                                    source: new ol.source.ImageSuperMapRest(ol.source
                                        .ImageSuperMapRest.optionsFromMapJSON(
                                            mapUrl, mapInfo.result))
                                });
                                map.addLayer(layer);
                                widgets.loader.removeLoader();
                            });
                        });
                    }
                });
            });
        }
    </script>
</body>
</html>

相關推薦

基於SuperMap iClient JavaScript智慧環保GIS應用平臺 環保 資訊平臺 質檢 智慧城市

　　環境GIS綜合應用系統以二三維GIS平臺和基礎地理資料為支撐，整合各類環保業務資料建立環境專題圖，以直觀、形象的方式展示環境和汙染源的空間分佈規律，實現GIS資料與環境資料的整合管理、查詢統計、空間分析、專

基於GIS+AI、GIS+AR、GIS+三維的智慧城管綜合應用平臺

​ 建設思路 支援雲平臺建設模式，節省使用者投資，加快建設速度 雲端計算架構的核心是按需使用，採用雲平臺模式建設指揮城管，可以節約大量投資，緩解財政壓力，加快建設速度，並且系統成熟穩定，為使用者節約大

基於使用者角色的資料庫智慧監控系統應用場景分析

摘要：本文嘗試從概念和邏輯上推導了基於使用者角色的資料庫智慧監控系統的可能應用場景。

基於GIS的生態環境資訊一張圖系統應用與研究

平臺概述 平臺是在統—的地理空間框架下，整合多要素、多時相和多區域的基礎地理空間資料和生態環境專題資料，形成生態環境資訊”—套數”，實現資料的統—管理；基於—張基礎地理資料底圖疊加各種生態環境管理業

淺談BIM+GIS虛擬模擬的智慧園區的應用

​ 平臺概述 利用雲端計算、物聯網、大資料等技術，接入智慧樓宇海量資訊，通過智慧化分析，為管理者提供視覺化的綜合管控平臺，提供IOT系統整合、樓宇動態資訊匯聚和樓內精準服務等功能，無縫連線客戶、管理人員、

基於5G邊緣閘道器的智慧公交站臺應用

發展智慧物聯網，有利於提高城市執行效率，優化居民生活體驗，促進城市迸發活力。智慧物聯網已經融合進生活的方方面面，例如最常見、分佈最廣泛的公交站臺，也能夠通過物聯網實現升級換代，為居民提供更豐富、更便捷

智慧園林綠化養護管理資訊平臺結合GIS技術的研發

近幾年來，隨著經濟不斷的發展，城市面積不斷的擴大，城市管理中的園林綠化工作也在這種趨勢下不斷的發生著深刻改變。管養企業是否按制定的管養計劃嚴格執行?綠化事件整改是否及時到位?綠地面積是否在穩步增長?管養的

Javascript call及apply應用場景及例項

一、作用及應用場景 call和apply是Function的方法，他的第一個引數是this，第二個是Function的引數。call 和 apply 都是為了改變某個函式執行時的 context 即上下文而存在的，換句話說，就是為了改變函式體內部 this

移動式RFID倉庫管理解決方案,智慧倉庫未來應用的會更廣泛-新導智慧

在當下的倉儲物流行業中，尤其在中國，資訊化的應用不斷的在行業內深化其作用。因為在新的產業環境下和資訊科技的背景下，對企業提出了新的要求。客戶要實現更加獨特的體驗，相關企業需要提高倉儲作業效率

三星智慧裝置控制應用 SmartThings 已上架微軟商店，但目前還無法下載

3 月 15 日訊息 今天據爆料者 @WalkingCat 透露，三星 SmartThings 應用已經在微軟商店上架，使用者可以在微軟商店中檢視到該應用。

大疆入局車載領域背後：無人機市場逼近天花板，智慧駕駛落地應用尚早

在 2021 上海車展上，大疆旗下智慧駕駛業務品牌大疆車載向外界展示了智慧駕駛解決方案及核心零部件，並與現場汽車產業上下游企業密切互動。

【智慧優化演算法應用】01遺傳演算法應用

作者：康慎吾 地點：北華航天工業學院 遺傳演算法流程 遺傳學與遺傳算法術語對應關係

基於GIS的國土空間規劃平臺建設

​ 本期介紹基於地理資訊平臺的國土空間規劃平臺的規劃輔助編制應用。在梳理國土空間規劃科學流程的基礎上，將規劃編制各關鍵環節資訊化、工具化、智慧化；充分發揮清華同衡大資料與智慧模型相結合的定量評估、精準預

【解決方案】EasyCVR視訊智慧分析共享平臺助力電石智慧視訊監控應用方案

一、背景介紹 出爐是電石生產中最為繁重而且危險的工序，在開堵爐眼過程中很容易造成電石飛濺，特別是在吹氧操作時容易導致人員灼傷。因此這種危險的工作開始由傳統向智慧化轉變，在開堵爐眼的過程中，開堵眼機遠端

程式碼智慧技術如何應用到日常開發？

簡介：原理與演示。 01/ 從開發者的煩惱說起 開發者在編寫程式碼時，需要花費大量時間在低層次的重複編碼上，特別是針對一些語法比較冗餘的開發語言。

基於EnergyPlus的建築能耗模擬Web應用開發隨筆(1)

20210809日誌 1.Ubuntu下配置好開發環境 安裝好Java1.8\\Maven\\IDEA，通過一個搭建簡單的Sringboot Web專案，對開發環境進行測試，參考的文章有：https://blog.csdn.net/weixin_39106990/article/details/1055304

GIS應用及OpenGIS介紹

轉自：http://blog.csdn.net/cdl2008sky/article/details/7266680 GIS的三大應用第一類是政府應用，“電子政務” 是當今政府加強資訊化建設的新方向，是指在現代計算機、網路通訊等技術支撐下，政府機構日常辦公、

蘋果 Apple TV+ 應用登陸 2016/2017 款 LG 智慧電視

10 月 7 日訊息 據 9to5Mac 報道，蘋果已在多種不同平臺上推出 Apple TV 應用，包括智慧電視、遊戲機以及亞馬遜 Fire Stick 或 Roku 流媒體裝置等。此外，蘋果還推出了一款適用於舊款 LG webOS 電視的“Apple TV+”

TikTok 為 2020 與 2021 款 LG 智慧電視推出應用程式

10 月 9 日訊息，據國外媒體報道，TikTok 為 LG 的 2020 年和 2021 年智慧電視推出了一款應用程式。這款應用在最近的 webOS 5.0 和 webOS 6.0 版本中推出，並於 10 月 7 日開始更新韌體，隨後在“未來幾個月”也將在

實驗7：基於REST API的SDN北向應用實踐

實驗7：基於REST API的SDN北向應用實踐 實驗步驟 一、搭建拓撲，連線 OpenDaylight，下發流表