场景

Vue+Openlayers实现地图上绘制线：

Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面实现的效果是这样的

此地图的显示时正常的，如果地图是倾斜的，想要把地图进行一个旋转。

注：

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

实现

1、修改map对象的view中的rotation属性

            this.map = new Map({layers: [this.layers, this.wzLayer, this.lineVector,this.roomLayer,this.lightLayer, this.carLayer],target: "map",view: new View({projection: projection,center: window.config.center,zoom: window.config.zoom,maxZoom: 19,minZoom: 14.5,rotation: 0.76}),});

2、修改之后的效果

3、完整示例代码


<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,rotation: 0.76}),});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中实现地图旋转相关推荐

WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
前言: openlayers中渲染图片是有多种方法的, Icon ,Image 等等都可以实现将图片放到地图上面,但是操作图片的话,方法比较少了,这里是配合 ol-ext 来实现的. 相关资料: 1. ...
Openlayers中实现地图上添加一条红色直线
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
vue项目中高德地图总是出不来的问题
创建地图是个很简单的API,但是地图时不时的出不来,这个问题就严重了,一时真查不出原因. 经过无数的测试,发现地图需要规矩化问题 vue是单页面应用,两个id一样的map,会出现出不来的问题具体为 ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...
155：vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
第155个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置地图的反转色.复古色.灰度,原始状态等.采用的是CSS filter的形式. 直接复制下面的 vue+ope ...
087：vue+openlayers 地图中某位置闪烁点动画（示例代码）
第087个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效 ...

Vue+Openlayers中实现地图旋转

场景

实现

Vue+Openlayers中实现地图旋转相关推荐

最新文章

热门文章