場(chǎng)景

Vue+Openlayers實(shí)現(xiàn)顯示圖片并分優(yōu)先級(jí)多圖層加載：

Vue+Openlayers實(shí)現(xiàn)顯示圖片并分優(yōu)先級(jí)多圖層加載_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面是添加多個(gè)點(diǎn)的圖層，如果添加線的圖層，形如下面的效果

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、導(dǎo)入新的模塊

//導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Point,LineString } from "ol/geom"; import Feature from "ol/Feature"; import { Icon,Style,Stroke} from "ol/style"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source'

2、聲明一個(gè)線的圖層和數(shù)據(jù)源

? data() {return {map: null, // map地圖layer:null, //地圖圖層lightLayer:null, //燈圖層houseLayer:null, //房子圖層lineLayer:null, //線圖層lineSource:null, //線數(shù)據(jù)源

3、添加要繪制的線的坐標(biāo)數(shù)組

注意這里必須是數(shù)組嵌套數(shù)組的格式

????? //線的數(shù)據(jù)lineData:[[986434.4063822062, 215782.0959711917],[989701.5290279881,217149.84072807242],[990613.3107184113,215946.4192185118],],

這里是三個(gè)坐標(biāo)點(diǎn)，會(huì)將這三個(gè)點(diǎn)依次連接起來

4、線的圖層進(jìn)行賦值

????? //線的圖層this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});

5、map中加入線的圖層

????? this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [this.layer,this.lightLayer,this.houseLayer,this.lineLayer],view: new View({//地圖中心點(diǎn)center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地圖縮放最小級(jí)別maxZoom:19,}),});

6、頁面加載完調(diào)用初始化地圖的方法，方法中調(diào)用畫線的方法

??? //畫線drawLine(){let pointData = this.lineData; // 所有點(diǎn)位信息//下邊來添加一線featurevar feature = new Feature({type: "lineStyle",geometry: new LineString(pointData // 線的坐標(biāo)),});let color = 'green';let lineStyle = new Style({stroke: new Stroke({color: color,width: 4,}),});// 添加線的樣式feature.setStyle(lineStyle);// 添加線的faturethis.lineSource.addFeature(feature);},

7、完整示例代碼

? <template><div id="map" class="map"></div> </template><script> //導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Point,LineString } from "ol/geom"; import Feature from "ol/Feature"; import { Icon,Style,Stroke} from "ol/style"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source' export default {name: "olMapImageWMSMulLayers",data() {return {map: null, // map地圖layer:null, //地圖圖層lightLayer:null, //燈圖層houseLayer:null, //房子圖層lineLayer:null, //線圖層lineSource:null, //線數(shù)據(jù)源//紅綠燈數(shù)據(jù)lightData:[{x:"987798.93778", y:"213885.81024"},{x:"987710.93778", y:"213810.81024"},],//房子數(shù)據(jù)houseData:[{x:"986610.93778", y:"213885.81024"},{x:"986510.93778", y:"213810.81024"},],//線的數(shù)據(jù)lineData:[[986434.4063822062, 215782.0959711917],[989701.5290279881,217149.84072807242],[990613.3107184113,215946.4192185118],],};},mounted() {this.initMap();setInterval(() => {this.initLightData();}, 1000)},methods: {//初始化紅綠燈數(shù)據(jù)initLightData(){this.lightLayer.getSource().clear();this.lightData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/light.png";const zoom = this.map.getView().getZoom();let style = new Style({image: new Icon({scale: 0.15 * (zoom -13) ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},//初始化房子數(shù)據(jù)initHouseData(){this.houseLayer.getSource().clear();this.houseData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/house.png";let style = new Style({image: new Icon({scale: 0.3,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.houseLayer.getSource().addFeature(feature);});},//畫線drawLine(){let pointData = this.lineData; // 所有點(diǎn)位信息//下邊來添加一線featurevar feature = new Feature({type: "lineStyle",geometry: new LineString(pointData // 線的坐標(biāo)),});let color = 'green';let lineStyle = new Style({stroke: new Stroke({color: color,width: 4,}),});// 添加線的樣式feature.setStyle(lineStyle);// 添加線的faturethis.lineSource.addFeature(feature);},initMap() {//地圖圖層this.layer = new TileLayer({source: new TileWMS({//不能設(shè)置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});// 紅綠燈的圖層this.lightLayer = new VectorLayer({source: new VectorSource(),});//房子的圖層this.houseLayer = new VectorLayer({source: new VectorSource(),});//線的圖層this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [this.layer,this.lightLayer,this.houseLayer,this.lineLayer],view: new View({//地圖中心點(diǎn)center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地圖縮放最小級(jí)別maxZoom:19,}),});this.initLightData();this.initHouseData();this.drawLine();//獲取點(diǎn)的監(jiān)聽方法設(shè)置this.onPoint()},//? 獲取點(diǎn)onPoint() {// 監(jiān)聽singleclick事件this.map.on('singleclick', function(e) {console.log(e.coordinate)})}}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>?

總結(jié)

以上是生活随笔為你收集整理的Vue+Openlayers实现地图上绘制线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。