场景

Vue+Openlayers实现显示图片并分优先级多图层加载：

Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面是添加多个点的图层，如果添加线的图层，形如下面的效果

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、导入新的模块

//导入基本模块
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";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'

2、声明一个线的图层和数据源

  data() {return {map: null, // map地图layer:null, //地图图层lightLayer:null, //灯图层houseLayer:null, //房子图层lineLayer:null, //线图层lineSource:null, //线数据源

3、添加要绘制的线的坐标数组

注意这里必须是数组嵌套数组的格式

      //线的数据lineData:[[986434.4063822062, 215782.0959711917],[989701.5290279881,217149.84072807242],[990613.3107184113,215946.4192185118],],

这里是三个坐标点，会将这三个点依次连接起来

4、线的图层进行赋值

      //线的图层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({//地图中心点center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});

6、页面加载完调用初始化地图的方法，方法中调用画线的方法

    //画线drawLine(){let pointData = this.lineData; // 所有点位信息//下边来添加一线featurevar feature = new Feature({type: "lineStyle",geometry: new LineString(pointData // 线的坐标),});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>
//导入基本模块
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";
//导入相关模块
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, //线数据源//红绿灯数据lightData:[{x:"987798.93778", y:"213885.81024"},{x:"987710.93778", y:"213810.81024"},],//房子数据houseData:[{x:"986610.93778", y:"213885.81024"},{x:"986510.93778", y:"213810.81024"},],//线的数据lineData:[[986434.4063822062, 215782.0959711917],[989701.5290279881,217149.84072807242],[990613.3107184113,215946.4192185118],],};},mounted() {this.initMap();setInterval(() => {this.initLightData();}, 1000)},methods: {//初始化红绿灯数据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);});},//初始化房子数据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; // 所有点位信息//下边来添加一线featurevar feature = new Feature({type: "lineStyle",geometry: new LineString(pointData // 线的坐标),});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({//不能设置为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({//地图中心点center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});this.initLightData();this.initHouseData();this.drawLine();//获取点的监听方法设置this.onPoint()},//  获取点onPoint() {// 监听singleclick事件this.map.on('singleclick', function(e) {console.log(e.coordinate)})}},
};
</script><style scoped>
.map {width: 100%;height: 800px;
}
</style>

Vue+Openlayers实现地图上绘制线相关推荐

SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 Vue ...
OpenLayers 在地图上画线，获取点坐标（以天地图为例）
应用场景: 最近在开发过程中,有个需求,需要在天地图中画线,结束后获取对应的坐标集合,查阅 OpenLayers API 和网上的相关资料后得以实现,特此记录. 因为直线间的点是无数个,我们不可能去获 ...
android地图画线,绘制折线-在地图上绘制-开发指南-Android 轻量版地图SDK | 高德地图API...
地图上绘制的线是由 Polyline 类定义实现的,线由一组经纬度(LatLng对象)点连接而成. 绘制一条线与点标记一样,Polyine的属性操作集中在PolylineOptions类中,添加一条 ...
android百度地图api两点画线,android百度地图：在地图上绘制点、线、多边形、圆形和文字...
转载自:http://blog.csdn.net/rt77777/article/details/9186691 首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overla ...
Android百度地图绘制多边形,android百度地图：在地图上绘制点、线、多边形、圆形和文字...
首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overlay.GraphicsOverlay通过调用setData(Graphic g) 完成图形绘制. Graphic 通 ...
android百度地图：在地图上绘制点、线、多边形、圆形和文字
首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overlay.GraphicsOverlay通过调用setData(Graphic g) 完成图形绘制. Graphic 通 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
地图上绘制任意角度的椭圆_地图上的总椭圆
地图上绘制任意角度的椭圆或者,如何选择下班后去海滩的最佳方式 (Or, how to choose the best way to walk to the beach after work) It ...

Vue+Openlayers实现地图上绘制线

场景

实现

Vue+Openlayers实现地图上绘制线相关推荐

最新文章

热门文章