就有公司域名怎么建设网站,网络营销推广案例,深圳网站建设推广优化seo,衡水建设投资集团网站OpenLayers3示例
记录一个openlayers 实例教程网址
1、WebGIS简介 语雀
记录一个openlayers入门教程
地图坐标系转换 - Online Tools
记录一个国家2000坐标转换工具的方法
记录一次我使用openlayers 开发地图的实例#xff0c;实现了打点#xff0c;弹窗#xff…OpenLayers3示例
记录一个openlayers 实例教程网址
1、WebGIS简介 · 语雀
记录一个openlayers入门教程
地图坐标系转换 - Online Tools
记录一个国家2000坐标转换工具的方法
记录一次我使用openlayers 开发地图的实例实现了打点弹窗聚合
templatediv idMap refmap/divdiv refpopup classpopupbox v-showshopPopupa classclose refclose hrefjavascript:void(0)el-iconClose click.stopclose //el-icon/ap classtitle闸门信息/pdiv classinfoulli闸门名称span classspc{{ zmName }}/span/lili瞬时流量span classspc{{ ssLiuLiang }}/span/lili累计流量span classspc{{ leiJi }}/span/lili闸门开度span classspc{{ zhaMen }}/span/li/ul/div/div
/template
script
import ol/ol.css
import TileLayer from ol/layer/Tile
import VectorLayer from ol/layer/Vector
import VectorSource from ol/source/Vector
import XYZ from ol/source/XYZ
import { Map, View, Feature, Overlay } from ol
import { Style, Fill, Stroke, Icon, Text } from ol/style
import { Point } from ol/geom
import { defaults as defaultControls, ZoomSlider } from ol/control
import { fromLonLat, toLonLat } from ol/proj
import doumen from /assets/mapdata/doumen.json
import liuchuan from /assets/mapdata/zong_pipe.json
import allMap from /assets/mapdata/allMap.json
import douqu from /assets/mapdata/zong_canal.json
import branch_pipe from /assets/mapdata/branch_pipe.json
import main_pipe from /assets/mapdata/main_pipe.json
import shank_pipe from /assets/mapdata/shank_pipe.json
import side_pipe from /assets/mapdata/side_pipe.json
import zhiqu from /assets/mapdata/shushuiquxi_zhiqu.json
import douguan from /assets/mapdata/douguan.json
import zhiguan from /assets/mapdata/guandao_zhiguan.json;
import ganguan from /assets/mapdata/guandao_ganguan.json;
import shushuidouqu from /assets/mapdata/shushuiquxi_douqu.jsonimport { benzhanList, szyInfo, modbusInfo } from /api/first/benzhan
import GeoJSON from ol/format/GeoJSON
import Cluster from ol/source/Cluster.js
// 边界json数据
export default {data() {return {map: null,zmName: ,ssLiuLiang: ,leiJi: ,zhaMen: ,pointLayer: null,pointLayer1: null,featuresArr: [],featuresArr1: [],shopPopup: false,popup: null,atzoom: , // 当前缩放比例clusterSource: null // 聚合要素}},methods: {/*** 初始化地图*/initMap() {this.map new Map({target: Map,controls: defaultControls({zoom: true// 添加鹰眼图的控件}).extend([]),layers: [new TileLayer({source: new XYZ({url:http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}})})],view: new View({center: fromLonLat([104.4143, 36.6604]),zoom: 13,maxZoom: 19,minZoom: 4})})this.map.addControl(new ZoomSlider())this.map.on(singleclick, evt {var position evt.coordinate;console.log(position);this.clickMap(evt);})},/*** 白银市地理数据*/setBackColor() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(allMap)const vectorSource new VectorSource({ features: features })// 白银市地理数据const lineLayer new VectorLayer({zIndex: 0,source: vectorSource})lineLayer.setStyle(new Style({fill: new Fill({ color: rgba(38,60,217,0.5) }),stroke: new Stroke({width: 1,color: [71, 137, 227, 1]})}))this.map.addLayer(lineLayer)},/*** 加载刘川灌区*/// 加载刘川地理数据addGeoJson() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(liuchuan)const vectorSource new VectorSource({ features: features })// 设置矢量数据源const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})const style new Style({stroke: new Stroke({width: 2,color: #fff}),fill: new Fill({color: #B9D9EB44})})lineLayer.setStyle(style)this.map.addLayer(lineLayer) // 把图层添加到地图},/*** 加载刘川斗渠数据*/addGeoJsonone() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(douqu)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},/*** 加载支渠*/addZhiqu() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(zhiqu)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},/*** 加载斗管*/addDouguan() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(douguan)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},/*** 加载只管*/addZhiguan() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(zhiguan)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},/*** 加载干管*/addGanGuan() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(ganguan)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},// 加载输水斗渠addShushuiDouqu() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(shushuidouqu)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},//addGeoone() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(branch_pipe)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},main_pipe() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(main_pipe)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},side_pipe() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(side_pipe)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},shank_pipe() {const features (new GeoJSON({ featureProjection: EPSG:3857 })).readFeatures(shank_pipe)// 设置矢量数据源const vectorSource new VectorSource({ features: features })const lineLayer new VectorLayer({zIndex: 1,source: vectorSource})this.map.addLayer(lineLayer) // 把图层添加到地图// 循环添加featureconst source lineLayer.getSource().getFeatures()for (let i 0; i source.length; i) {source[i].setStyle(this.setText(source[i].values_.NAME))}},// 文字标注的样式setText(name) {const style new Style({stroke: new Stroke({width: 3,color: #FFEBEE}),text: new Text({font: 20px,// 对其方式textAlign: center,// 基准线textBaseline: middle,offsetY: -35,offsetX: 0,// backgroundFill: new Stroke({// color: rgba(0,123,255,0.8)// }),// 文本填充样式fill: new Fill({color: rgba(236,218,20,1)}),padding: [5, 5, 5, 5],text: ${name}})})return style},/*** 批量根据经纬度坐标打点 斗门*/addPoints(coordinates) {console.log(打点坐标调试, coordinates);// 创建一个 VectorSource 对象const source new VectorSource()// 创建一个 Cluster 对象const clusters new Cluster({distance: 60,source: source})// 循环添加 featurefor (let i 0; i coordinates.length; i) {// 创建 feature一个 feature 就是一个点坐标信息const feature new Feature({geometry: new Point(fromLonLat([coordinates[i].x, coordinates[i].y])),})feature.set(moreInfo, coordinates[i].moreInfo)// 设置图层this.pointLayer new VectorLayer({source: clusters, // 使用之前创建的 VectorSource 对象作为图层的源zIndex: 1,style: this.getIcon(coordinates[i].id, coordinates[i].name)})//console.log(本站名, coordinates[i].name);// 将 feature 添加到 source 中source.addFeature(feature)}this.map.addLayer(this.pointLayer)},/*** 添加图标和文字*/getIcon(type, name) {let src type 95? (src require(../../assets/zhamen_run.png)): (src require(../../assets/zhamen_stop.png))const styleIcon new Style({// 设置图片效果image: new Icon({// scale: 0.15 * (this.atzoom - 8),width: 25,src: src,anchor: [1, 1]}),text: new Text({// 对其方式textAlign: center,// 基准线textBaseline: middle,offsetY: -35,offsetX: 0,backgroundFill: new Stroke({color: rgba(0,0,255,0.4)}),// 文本填充样式fill: new Fill({color: rgba(236,218,20,1)}),padding: [5, 5, 5, 5],})})return styleIcon},/*** 弹窗*/addOverlay() {// 创建Overlay, 覆盖层const elPopup this.$refs.popupthis.popup new Overlay({element: elPopup,autoPan: true,positioning: bottom-center,stopEvent: false,offset: [-10, -25],autoPanAnimation: {duration: 250}})this.map.addOverlay(this.popup)},clickMap(e) {console.log(坐标信息, e);var pixel this.map.getEventPixel(e.originalEvent)const feature this.map.forEachFeatureAtPixel(pixel,(feature) feature)console.log(ffffff, feature);//feature feature.values_.moreInfo this.map.hasFeatureAtPixel(e.pixel)if (feature feature.values_.features feature.values_.features.length 0) {this.shopPopup true// 设置弹窗位置const coordinates feature.getGeometry().getCoordinates()console.log(弹窗位置, coordinates);this.popup.setPosition(coordinates)// 从geoJson中获取信息const valuesObj feature.values_.features[0].values_.moreInfoconsole.log(valuesObj);if (valuesObj) {// 查询本站实时数据//const { NAME, ANGLE, REMAKE, OBJECTID } valuesObjthis.zmName valuesObj.positionif (valuesObj.protocolType 1) {modbusInfo(valuesObj.addr).then(res {console.log(modbus, res);this.ssLiuLiang res.data.instantaneousFlowthis.leiJi res.data.cumulativeFlowthis.zhaMen res.data.aperture})}if (valuesObj.protocolType 2) {szyInfo(valuesObj.addr).then(res {console.log(szy, res)this.ssLiuLiang ANGLEthis.leiJi REMAKEthis.OBJECTID OBJECTID})}}} else {this.shopPopup false}},/*** 鼠标移动的事件*/pointermove() {this.map.on(pointermove, (e) {if (this.map.hasFeatureAtPixel(e.pixel)) {this.map.getViewport().style.cursor pointer} else {this.map.getViewport().style.cursor inherit}})},getBenzhan() {benzhanList().then(res {console.log(泵站查到了, res);const bzList res.dataconst arr []bzList.forEach(item {arr.push({y: item.dimensionality,x: item.longitude,name: item.position,id: item.id,moreInfo: item})})this.addPoints(arr)})},close() {this.popup.setPosition(undefined)return false;}},mounted() {this.initMap()// 初始化地图方法this.setBackColor()this.addGeoJson()this.addGeoJsonone()this.addOverlay() // 弹框this.pointermove()this.addGeoone()this.main_pipe()this.shank_pipe()this.addZhiqu()this.addZhiguan()this.addDouguan()this.addGanGuan()this.addShushuiDouqu()this.getBenzhan()this.map.on(moveend, (e) {const zoom this.map.getView().getZoom()this.atzoom zoomconsole.log(zoom)})// setInterval(() {// this.addPoints(arr)// 根据坐标点批量打点// }, 1000)}
}
/script
style langscss scoped
#Map {width: 100%;height: 100vh;
}.popupbox {width: 270px;height: 210px;background: url(../../assets/bg2x.png) no-repeat;background-size: contain;display: flex;flex-direction: column;text-align: center;position: relative;.close {position: absolute;right: 10px;top: 10px;}.title {margin-top: 9px;}.info {font-size: 16px;text-align: left;margin-left: 25px;ul {margin: 0;padding: 0;list-style: none;}span.spc {color: white;}}
}
/style
