建设部网站申请表无法打印,WordPress两种列表页,网站建设哪家便,动漫制作专业在国企前端开发之在vue项目中使用openLayers 前言效果图在vue中渲染地图安装ol插件1、调用插件2、 初始话地图3、地图点击事件4、重置坐标5、通过坐标改变视图6、保存坐标点 vue中使用的源码 前言
本篇文章主要讲解openLayers的初步使用#xff0c;包括渲染地图、获取点坐标、标记点… 前端开发之在vue项目中使用openLayers 前言效果图在vue中渲染地图安装ol插件1、调用插件2、 初始话地图3、地图点击事件4、重置坐标5、通过坐标改变视图6、保存坐标点 vue中使用的源码 前言
本篇文章主要讲解openLayers的初步使用包括渲染地图、获取点坐标、标记点、中心位置的调整、以及获取到经纬度向后台发送请求 演示地址 官网 gitee链接
效果图 在vue中渲染地图
安装ol插件
npm install ol
1、调用插件
import “ol/ol.css”; import { Map, View, ol } from “ol”; import TileLayer from “ol/layer/Tile”;
2、 初始话地图
/*** 初始化地图*/initMap () {var that this// 创建地图中心点坐标const centerCoordinate [0, 0];// 初始化视图对象const view new View({center: centerCoordinate,zoom: 3,projection: EPSG:4326,});// 创建ArcGIS World Street Map图层const arcGISLayer new TileLayer({source: new XYZ({// url: https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}url: http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}})});// 初始化地图对象this.map new Map({target: this.$refs.mapContainer,layers: [arcGISLayer],view: view});//鼠标单击事件this.map.on(singleclick, function (e) {that.mapX e.coordinate[0]that.mapY e.coordinate[1]that.addVectorLabel(e.coordinate)});return this.map},3、地图点击事件
// 定义点createLabelStyle (feature) {return new Style({/**{olx.style.IconOptions}类型*/image: new Icon(({anchor: [0.5, 60],anchorOrigin: top-right,anchorXUnits: fraction,anchorYUnits: pixels,offsetOrigin: top-right,// offset:[0,10],//图标缩放比例scale: 0.1,//透明度opacity: 0.75,//图标的urlsrc: require(../assets/gd.png)}))});},// 添加坐标点addVectorLabel (coordinate) {if (this.vectorSource) {this.vectorSource.clear()} else {//矢量标注的数据源this.vectorSource new VectorSource({features: []})}// //矢量标注图层this.vectorLayer new VectorLayer({source: this.vectorSource});this.map.addLayer(this.vectorLayer);//新建一个要素var newFeature new Feature({//几何信息geometry: new Point(coordinate)});//设置要素的样式newFeature.setStyle(this.createLabelStyle(newFeature));this.vectorSource.addFeature(newFeature);}4、重置坐标
CZ () {this.vectorSource.clear()this.mapX this.mapY },5、通过坐标改变视图
DW () { var view this.map.getView(); var py ([parseInt(this.mapX), parseInt(this.mapY)]); //平移地图 view.setCenter(py); this.addVectorLabel([this.mapX, this.mapY]) view.setZoom(9); },
6、保存坐标点
BC () {var parpms {mapX: this.mapX,mapY: this.mapY}const instance axios.create({baseURL: https://127.0.0.1});instance.post(/api/data, parpms).then(response {// response.data;//请求返回的数据}).catch(error {console.log(error);});},vue中使用的源码
templatedivdiv idmap-container refmapContainer classmap-container/divdiv classformListdiv classinputdiv classname北纬:/divel-input v-modelmapX placeholder请输入内容/el-input/divdiv classinputdiv classname东经/divel-input v-modelmapY placeholder请输入内容/el-input/divdiv classbutton clickCZ重置/divdiv classbutton clickDW定位/divdiv classbutton clickBC保存/div/div/div/templatescript
import ol/ol.css;import { fromLonLat } from ol/proj;
import { OSM, Vector as VectorSource, Raster as RasterSource } from ol/source;
import { Vector as VectorLayer } from ol/layer;
import { Fill, Style, Stroke, Icon, Circle as CircleStyle } from ol/style;
import { Point } from ol/geom; //标点,画线
import Feature from ol/Feature;
import { Map, View, ol } from ol;
import TileLayer from ol/layer/Tile;
import XYZ from ol/source/XYZ;
import axios from axios;export default {name: MapComponent,data () {return {mapX: ,mapY: ,};},mounted () {this.map this.initMap()},methods: {/*** 初始化地图*/initMap () {var that this// 创建地图中心点坐标const centerCoordinate [0, 0];// 初始化视图对象const view new View({center: centerCoordinate,zoom: 3,projection: EPSG:4326,});// 创建ArcGIS World Street Map图层const arcGISLayer new TileLayer({source: new XYZ({url: http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}})});// 初始化地图对象this.map new Map({target: this.$refs.mapContainer,layers: [arcGISLayer],view: view});//鼠标单击事件this.map.on(singleclick, function (e) {that.mapX e.coordinate[0]that.mapY e.coordinate[1]that.addVectorLabel(e.coordinate)});return this.map},CZ () {this.vectorSource.clear()this.mapX this.mapY },DW () {var view this.map.getView();var py ([parseInt(this.mapX), parseInt(this.mapY)]);//平移地图view.setCenter(py);this.addVectorLabel([this.mapX, this.mapY])view.setZoom(9);},BC () {var parpms {mapX: this.mapX,mapY: this.mapY}const instance axios.create({baseURL: https://127.0.0.1});instance.post(/api/data, parpms).then(response {// response.data;//请求返回的数据}).catch(error {console.log(error);});},// 定义点createLabelStyle (feature) {return new Style({/**{olx.style.IconOptions}类型*/image: new Icon(({anchor: [0.5, 60],anchorOrigin: top-right,anchorXUnits: fraction,anchorYUnits: pixels,offsetOrigin: top-right,// offset:[0,10],//图标缩放比例scale: 0.1,//透明度opacity: 0.75,//图标的urlsrc: require(../assets/gd.png)}))});},// 添加坐标点addVectorLabel (coordinate) {if (this.vectorSource) {this.vectorSource.clear()} else {//矢量标注的数据源this.vectorSource new VectorSource({features: []})}// //矢量标注图层this.vectorLayer new VectorLayer({source: this.vectorSource});this.map.addLayer(this.vectorLayer);//新建一个要素var newFeature new Feature({//几何信息geometry: new Point(coordinate)});//设置要素的样式newFeature.setStyle(this.createLabelStyle(newFeature));this.vectorSource.addFeature(newFeature);}}
};
/scriptstyle
.map-container {width: 100%;height: 100vh;margin: 0;padding: 0;
}.formList {position: fixed;top: 10px;left: 50px;display: flex;
}.formList div {margin-left: 20px;
}.button {width: 50px;line-height: 40px;background-color: #f68e41;border-radius: 3px;color: #fff;
}.input {display: flex;
}.input .name {line-height: 40px;width: 25%;
}
/style
