当前位置：首页 > backend >正文

基于openlayers开发北斗应用支撑平台

backend 2025/6/18 2:04:15

北斗应用支撑平台是基于中国自主研发的北斗卫星导航系统（BDS）构建的技术服务平台，旨在为各行业提供精准定位、导航、授时（PNT）、短报文通信等核心功能，并支持二次开发与定制化应用。以下是关于北斗应用支撑平台的详细介绍：

### **1. 核心功能**
- **高精度定位**：
通过北斗地基增强系统（如CORS站）实现厘米级/毫米级定位，适用于测绘、无人驾驶、智慧农业等领域。
- **全球短报文通信**：
北斗独有的短报文功能，可在无地面网络覆盖区域（如海洋、沙漠）实现应急通信，应用于防灾减灾、远洋渔业等场景。
- **精准授时**：
提供纳秒级时间同步，支撑金融、电力、通信等对时间敏感的关键基础设施。
- **多源融合定位**：
兼容GPS/GLONASS/Galileo等多系统信号，增强复杂环境（城市峡谷、室内）下的服务可靠性。

---

### **2. 典型应用场景**
- **交通运输**：
车辆监控、物流调度、自动驾驶高精度地图服务。
- **应急救灾**：
灾区通信中断时，通过北斗短报文回传位置与灾情信息。
- **智慧城市**：
市政设施管理、共享单车电子围栏、智慧灯杆同步控制。
- **农业现代化**：
农机自动驾驶、精准播种/施肥/灌溉（节省资源10%-30%）。
- **海洋与水利**：
渔船定位监控、水文监测、大坝形变监测。

---

### **3. 平台技术架构**
- **感知层**：北斗终端（芯片、模块、天线）采集数据。
- **网络层**：通过卫星信号+地面网络（4G/5G）回传数据。
- **平台层**：
- 位置大数据分析
- 时空信息云服务
- API/SDK开发接口
- **应用层**：行业解决方案（如交通调度系统、防灾预警平台）。

---

### **4. 优势特点**
- **自主可控**：100%中国技术，保障国家安全与数据主权。
- **全天候服务**：不受天气影响，全球覆盖（亚太地区更高精度）。
- **低功耗设计**：适合物联网（IoT）设备长期在线监测。
- **开放生态**：支持与5G、AI、云计算等技术融合创新。

---

### **5. 开发者支持**
- **开放平台**：如千寻位置、北斗星通等企业提供开发者门户。
- **工具包**：
- 高精度定位SDK
- 短报文通信协议库
- 时空大数据分析工具
- **仿真测试环境**：模拟不同地域、遮挡条件下的信号场景。

---

### **6. 政策与标准**
- **国内推广**：国家发改委《北斗产业化重大工程》要求关键领域北斗替代率超过80%。
- **国际应用**：纳入国际民航（ICAO）、海事（IMO）标准，服务“一带一路”沿线国家。

---

代码实现

<template><div><div id="map" style="width: 100%;"><popHover :popHoverInfo="popHoverInfo" :popHoverScreenPoint="popHoverScreenPoint" :popHoverVisible="popHoverVisible"></popHover><popClick :popAspect="popAspect" :popClickScreenPoint="popClickScreenPoint" :popClickVisible="popClickVisible" :popClickTitleInfo="popClickTitleInfo" :popClickContentInfo="popClickContentInfo"></popClick></div>
<!--    <div id="gisToolPopoup">-->
<!--      <GisTool :sMap="smap" @tdtSwitchBase="tdtSwitchBase"></GisTool>-->
<!--    </div>-->
<!--    <div id="layersPanel">-->
<!--      <layerPanel :layersInfo="layersInfo" @setLayerVisible="setLayerVisible" @setLayerOpacity="setLayerOpacity" @zoomToC="zoomToC"></layerPanel>-->
<!--    </div>--></div>
</template>
<script>
// import GisTool from './gisTool.vue'
// import layerPanel from './widgets/layerPanel/index.vue'
import Map from 'ol/Map'
import View from 'ol/View'
import * as control from 'ol/control'
// import { Logo,ScaleLine } from '@supermap/iclient-ol'
import {Logo} from '@supermap/iclient-ol/control/Logo'
import {ScaleLine} from '@supermap/iclient-ol/control/ScaleLine'
import {iCOLMapConfig} from './Store/iCOLMapConfig'
import {layersInfo} from './LayersInfo/LayersInfo'
import {layerMsgClick} from './layerMsg/LayerMsgClick'
import {layerMsgMouseOver} from './layerMsg/LayerMsgMouseOver'
import popHover from './widgets/popHover/index'
import popClick from './widgets/popClick/index'
import WrappedImageStatic from "./gisUtils/WrappedImageStatic";
// import {WindyUtil} from './gisUtils/WindyUtil.js'
import {initTdtBaseMap,CommonCreateLayers,getLayerByCode,tdtSwitchBase,MapMouseoverEvent,MapClick,addElementToMap,getGeojsonByLayerCode,setLayersVisible,setLayersVisibleByCode,zoomC,commonRefreshVectorGeojsonLayer,CommonCreateVectorLayerGroup,refreshCv,CommonRefreshVectorLayerByData
} from './MapCommon'
import $ from 'jquery'
import {Layersymbols} from "./SymbolsInfo/mapSymbols";
// import {windData} from './data/windData.js'
let icolMap,_this
export default {components: {// GisTool,// layerPanel,popHover,popClick},name: 'iCOLMapCommon',data () {return {smap: null,layersInfo: layersInfo,baseLayerArr:[],popHoverScreenPoint: {x: null, y: null},popHoverInfo: '',popHoverVisible: false,popClickScreenPoint: {x: null, y: null},popAspect: {cWidth: 600, cHeight: 400},popClickPoint: null,windyUtil: null,popClickTitleInfo: '',popClickContentInfo: '',popClickVisible: false,}},methods: {initMap: function () {$('#map').css('height', window.innerHeight)icolMap = new Map({target: 'map',view: new View({center: iCOLMapConfig.defaultMapViewCenter,zoom: iCOLMapConfig.defaultMapViewLevel,minZoom: iCOLMapConfig.minZoom,maxZoom: iCOLMapConfig.maxZoom,projection: iCOLMapConfig.projection,// 设置地图在东西方向无缝滚动// projection: 'EPSG:4326',maxExtent: [-360, -90, 360, 90], // 设置地图的最大范围wrapX: true, // 开启东西方向滚动multiWorld: true})})this.smap = icolMap// initTdtBaseMap(icolMap)// icolMap.addControl(new ScaleLine())CommonCreateLayers(icolMap, layersInfo,_this)// console.log(windData)// tdtSwitchBase(icolMap, 'wyl', false)// let windyUtil = new WindyUtil(this.smap)// this.windyUtil=windyUtil// this.windyUtil.addWindyLayer(windData)// windyUtil.clearWindyLayer()// debugger// var detail=windyUtil.getWindyDetail([103,45])let source = getLayerByCode(icolMap, 'CRegion').getSource()let vector = getLayerByCode(icolMap, 'CRegion')source.layer = vector// icolMap.addLayer(vector);// console.log(new Modify({source: source}))// let modify = new Modify({source: source})// icolMap.addInteraction(modify);let displayFeatureInfo = function (coordinate) {let pixel = icolMap.getPixelFromCoordinate(coordinate)console.log('longitude: ' + icolMap.getView().getCenter()[0].toString() + ', latitude: '+ icolMap.getView().getCenter()[1].toString() + ', level: '+ icolMap.getView().getZoom().toString())// var details = windyUtil.getWindyDetail(coordinate);// console.log(details);// alert(' 风向:' + details.direction + '\n 风级:' + details.level + '\n 风速:' + details.speed)let features = {length: 0}icolMap.forEachFeatureAtPixel(pixel, function (feature, layer) {if (layer == null){return}// debuggerfeatures.length = features.length + 1let code = layer.get('code')let obj = features[code]if (!obj) {obj = []}obj.push(feature)features[code] = obj})//console.log(features.length);let laysers = Object.keys(features)if (laysers.length > 1) {features[laysers[1]][0]["code"] = laysers[1]MapClick(_this,layerMsgClick,features[laysers[1]][0], laysers[1])if (layersInfo[laysers[1]].CustomPopupTemplate) {_this.popHoverVisible = false_this.popClickTitleInfo = features[laysers[1]][0].values_.values_[layersInfo[laysers[1]].CustomPopupTemplate.titleField]_this.popClickContentInfo = layersInfo[laysers[1]].CustomPopupTemplate.contentlet attrs = Object.keys(features[laysers[1]][0].values_.values_)for (let i = 0; i < attrs.length; i++) {_this.popClickContentInfo = _this.popClickContentInfo.replaceAll('{' + attrs[i] + '}', features[laysers[1]][0].values_.values_[attrs[i]])}_this.popAspect.cWidth = layersInfo[laysers[1]].CustomPopupTemplate.width_this.popAspect.cHeight = layersInfo[laysers[1]].CustomPopupTemplate.height_this.popClickVisible = true}}return features.length > 0}let displayFeatureInfoOver = function (coordinate) {let pixel = icolMap.getPixelFromCoordinate(coordinate)let features = {length: 0}icolMap.forEachFeatureAtPixel(pixel, function (feature, layer) {if (layer == null){return}features.length = features.length + 1let code = layer.get('code')let obj = features[code]if (!obj) {obj = []}obj.push(feature)features[code] = obj})//console.log(features.length);let laysers = Object.keys(features)if (laysers.length > 1) {features[laysers[1]][0]["code"] = laysers[1]features[laysers[1]][0]["pixel"] = pixel// if(!layersInfo[laysers[1]]?.isStrong&&!layersInfo[laysers[2]]?.isStrong){//   getLayerByCode(_this.smap,'shengZ').getSource().clear()// }MapMouseoverEvent(_this,layerMsgMouseOver,features[laysers[1]][0], laysers[1])if (layersInfo[laysers[1]] && layersInfo[laysers[1]].floatLabelInfo) {_this.popHoverScreenPoint.x = pixel[0] + layersInfo[laysers[1]].floatLabelInfo.offsetX_this.popHoverScreenPoint.y = pixel[1] + layersInfo[laysers[1]].floatLabelInfo.offsetY_this.popHoverInfo = features[laysers[1]][0].values_.values_[layersInfo[laysers[1]].floatLabelInfo.floatLabelField]_this.popHoverVisible = true} else {_this.popHoverVisible = false}} else {getLayerByCode(_this.smap,'shengZ').getSource().clear()_this.popHoverVisible = false}return features.length > 0}/*** Add a click handler to the map to render the popup.*/icolMap.on('click', function (evt) {// let geojson=getGeojsonByLayerCode(icolMap,'Measure')// if (evt.dragging) {//     //处于多边形查询工具操作下//     return;// }let coordinate = evt.coordinate// var details = _this.getWindyDetail(coordinate);// console.log(details);// alert(' 风向:' + details.direction + '\n 风级:' + details.level + '\n 风速:' + details.speed);//console.log(coordinate);//点击事件if (displayFeatureInfo(coordinate)) {return}})icolMap.on('dblclick', function (evt) {// if (evt.dragging) {//     //处于多边形查询工具操作下//     return;// }})// 监听移动事件// icolMap.on('moveend', function() {//   const view = icolMap.getView();//   const center = view.getCenter();//   const resolution = view.getResolution();//   const imageExtent = icolMap.getView().getProjection().getExtent();////   if (center[0] < imageExtent[0] || center[0] > imageExtent[2]) {//     const currentCenter = center.slice();//     const halfWorldWidth = resolution * icolMap.getSize()[0] / 2;//     if (currentCenter[0] < imageExtent[0] + halfWorldWidth) {//       currentCenter[0] = imageExtent[2] + (currentCenter[0] - imageExtent[0] - halfWorldWidth);//     } else if (currentCenter[0] > imageExtent[2] - halfWorldWidth) {//       currentCenter[0] = imageExtent[0] + (currentCenter[0] + halfWorldWidth);//     }//     view.setCenter(currentCenter);//   }// });icolMap.on('moveend', function (evt) {const view = icolMap.getView();// console.log(111)const center = view.getCenter();// console.log(center)// var ln=parseInt((center[0])/360);// // getLayerByCode(icolMap,"interpolationPic").clear()// getLayerByCode(icolMap,"interpolationPic0").setSource(new WrappedImageStatic({//   url: layersInfo["interpolationPic"].url||'',//   imageExtent: [ln*360-540,-90,ln*360-179.75,90],//   wrapX: true // 启用wrapX功能// }))// getLayerByCode(icolMap,"interpolationPic").setSource(new WrappedImageStatic({//   url: layersInfo["interpolationPic"].url||'',//   imageExtent: [ln*360-180,-90,ln*360+180.25,90],//   wrapX: true // 启用wrapX功能// }))// // console.log([ln*360-180,-90,ln*360+180.25,90])// getLayerByCode(icolMap,"interpolationPic1").setSource(new WrappedImageStatic({//   url: layersInfo["interpolationPic"].url||'',//   imageExtent: [ln*360+180,-90,ln*360+540.25,90],//   wrapX: true // 启用wrapX功能// }))// console.log([ln*360+180,-90,ln*360+540.25,90])//// if (center[0] < maxExtent[0] || center[0] > maxExtent[2]) {//   const newX = Math.round((center[0] - maxExtent[0]) / (resolution * maxExtent[2]));//   const newCenter = [maxExtent[0] + newX * resolution * maxExtent[2], center[1]];//   view.setCenter(newCenter);// }//缩放等级控制解析器let laysers = Object.keys(layersInfo);let cZoom = icolMap.getView().getZoom()for (let i = 0; i < laysers.length; i++) {if (layersInfo[laysers[i]].sourceType === "Overlay" && layersInfo[laysers[i]].visible == true ) {if(layersInfo[laysers[i]].minZoom < cZoom && cZoom <= layersInfo[laysers[i]].maxZoom){_this.setLayerVisibleOverly(laysers[i],true)}else {_this.setLayerVisibleOverly(laysers[i],false)}}if((layersInfo[laysers[i]].isGroupLayer||false == true)&&layersInfo[laysers[i]].visible == true) {if(layersInfo[laysers[i]].minZoom < cZoom && cZoom <= layersInfo[laysers[i]].maxZoom && layersInfo[laysers[i]].outRes.length>0) {refreshCv(layersInfo[laysers[i]].outRes,icolMap,layersInfo,laysers[i])}}}// var pixel = icolMap.getPixelFromCoordinate([115.783878,34.308761])})icolMap.on('pointermove', function (evt) {if (evt.dragging) {return}let coordinate = evt.coordinatedisplayFeatureInfoOver(coordinate)})// let el = document.createElement('div')// el.innerHTML = "<span style='color: red;font-size: larger;font-weight: bold'>gis创造美好未来</span>"// addElementToMap(this.smap,el,115.783878,34.308761,'popoupid')// let echartsLayerUtil = new EchartsLayerUtil(this.smap)// echartsLayerUtil.createTransferLayer(transferData,'code','entName')// let info = new control.Control({element: document.getElementById('popup')})// info.setMap(icolMap)// icolMap.addControl(info)// debugger},tdtSwitchBase (type, isLabel) {tdtSwitchBase(this.smap,type,isLabel)},refreshXZQH(regionCode){commonRefreshVectorGeojsonLayer('/image/duoyuanronghe/'+regionCode+'/XZQH.json',layersInfo,'XZQHRegion',this.smapm)},setLayerVisibleOverly (layerId, visible) {if(layersInfo[layerId].sourceType == 'Overlay'){for(let i = 0; i < layersInfo[layerId].overlays.length; i++){layersInfo[layerId].overlays[i].setVisible(visible)}}},markerMouseOver(re){let lre=re.clone();lre.setStyle(Layersymbols.areaRegionSymbol2);getLayerByCode(this.smap,'shengZ').getSource().clear()getLayerByCode(this.smap,'shengZ').getSource().addFeature(lre)// this.$emit('markerMouse',lre.values_)},setLayerVisible (layerId, visible) {let _this = this// debugger// CommonCreateVectorLayerGroup(_this.smap,layersInfo,'point1')// setInterval(function () {//   debugger//   CommonCreateVectorLayerGroup(_this.smap,layersInfo,'point1')// },13000)if(layersInfo[layerId].sourceType == 'Overlay'){for(let i = 0; i < layersInfo[layerId].overlays.length; i++){layersInfo[layerId].overlays[i].setVisible(visible)}// layersInfo[layerId].visible = visible}else {setLayersVisibleByCode(this.smap, [layerId], visible)}(layersInfo[layerId]||{}).visible = visible},setLayerOpacity (layerId, opacity) {getLayerByCode(this.smap, layerId).setOpacity(opacity)},zoomToC (x, y, level) {zoomC(this.smap, x, y, level, false)},refreshIdentityR(windSpeed,wd,longitude,latitude){let res=[]let cds=[]let cds1=[]let obj1={}let obj2={}if(windSpeed<1.5){for(let i=0;i<360;i++){let angel = i; // 旋转角度（逆时针为正，顺时针为负）let theta = Math.PI * angel / 180;  // 弧度let resultX = longitude - 0.3*Math.sin(theta);let resultY = latitude  + 0.3*Math.cos(theta);let p=[resultX,resultY]cds.push(p)}obj1.cds=[cds]obj1.id=1res.push(obj1)}else {for(let i=-parseInt(wd)-12;i<=-parseInt(wd)+12;i++){let angel = i; // 旋转角度（逆时针为正，顺时针为负）let theta = Math.PI * angel / 180;  // 弧度let resultX = longitude - 12.437*Math.sin(theta);let resultY = latitude  + 12.437*Math.cos(theta);let p=[resultX,resultY]cds.push(p)}cds.push([longitude,latitude])obj1.cds=[cds]obj1.id=1res.push(obj1)for(let i=-parseInt(wd)-12-180;i<=-parseInt(wd)+12-180;i++){let angel = i; // 旋转角度（逆时针为正，顺时针为负）let theta = Math.PI * angel / 180;  // 弧度let resultX = longitude - 12.437*Math.sin(theta);let resultY = latitude  + 12.437*Math.cos(theta);let p=[resultX,resultY]cds1.push(p)}cds1.push([longitude,latitude])obj2.cds=[cds1]obj2.id=2res.push(obj2)}CommonRefreshVectorLayerByData(res, this.smap, layersInfo, 'WRegion',_this)},RefreshWarnLayerByData(res){CommonRefreshVectorLayerByData(res, this.smap, layersInfo, 'warnPoint',_this)},setWindyVisible(visible){if(visible){// this.windyUtil.addWindyLayer(windData)}else {this.cwindData = null_this.popHoverVisible = falsethis.windyUtil.clearWindyLayer()this.windVisible = false}},refreshWiny(cwinddata){this.cwindData=cwinddatathis.windyUtil.clearWindyLayer()this.windyUtil.addWindyLayer(cwinddata)this.windVisible = true},reloadWindy(){if(this.windVisible){this.windyUtil.clearWindyLayer()this.windyUtil.addWindyLayer(this.cwindData)}}},updated () {},mounted () {_this = this_this.initMap()// setTimeout(function () {// _this.setLayerVisible('qianxitu',false)// let ec={qianxitu: {//     layerCode: 'qianxitu',//     isRLayerPanel: true,//     sourceType: 'EchartsQXT',//     // url: '/static/EchartsData/transferData.json',//     url:'/index/screen/statistics/statisticsUserRegionTransfer',//     dataIdField: 'code',//     dataLabelField: 'entName',//     dataPath: 'data',//     title: '迁徙图',//     isEcharts: true,//     isHasOpacity: false,//     location: {longitude: 115.8176488199009, latitude: 35.13617089683784, level: 7.996824109663511},//     visible: true//   }}// debugger//   CommonCreateLayers(_this.smap,ec,_this)// },10000)// this.initMap()// getContext('2d', { willReadFrequently: true });//绘制识别区域// this.refreshIdentityR(5,90,115.783878,34.308761)}
}
</script>
<style>
@import url('../../../../public/static/gis/css/ol.css');
@import url('../../../../public/static/css/css/mapoperatestyle.css');
#popup1 {position: absolute;top: 50px;right: 20px;
}
.ol-zoom{display: none;
}
#gisToolPopoup{position: absolute;top: 50px;left: 20px;
}
#layersPanel{position: absolute;top: 50px;right: 300px;
}
.ol-attribution{display: none;
}
.ol-control-logo{display: none;
}
.ol-rotate{display: none;
}
.ol-scale-line{display: none;
}
.ol-overlay-container{display: block !important;
}
</style>

技术实现架构

参照：iClientOL实现前端gis开发架构_前端iclientol-CSDN博客

实现效果