赞
踩
Openlayers官网
EPSG:3857和EPSG:4326区别详解—重点文档
通常:数据存储在EPSG:4326中,显示在EPSG:3857中,所以一定要注意坐标系切换问题。
cnpm i -S ol
<template> <div class="home"> <div id="map"></div> </div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import TileLayer from "ol/layer/Tile"; import OSM from "ol/source/OSM"; export default { data () { return { map: null }; }, mounted () { this.map = new Map({ target: "map", layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ projection: "EPSG:4326", //坐标系,即地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。 center: [116.3972282409668, 39.90960456049752], //中心点坐标,即北京天安门 zoom: 12 }) }); } }; </script> <style lang="less" scoped> #map { height: 600px; } /*隐藏ol的一些自带元素*/ // 隐藏zoom组件 /deep/.ol-zoom { display: none; } // 隐藏右下角版权信息 /deep/.ol-attribution.ol-uncollapsible { display: none; } </style>
1、使用天地图、谷歌地图、高德地图、百度地图等,要注意其坐标系与openlayers
中的projection
下的EPSG
对应。如使用天地图、谷歌地图可直接使用EPSG:4326
,而对于高德地图、百度地图则需要特殊处理。(下文有百度地图推荐学习文档,但是我本人不推荐使用高德地图、百度地图,主要就是坐标系问题)
2、openlayers
中的XYZ
下的url
,即地图服务的请求地址,可通过f12
查看相应地图服务的请求地址。
注意:天地图共有 8 个服务地址,子域名分别从 t0 到 t7,不同图层放入不同服务中。
参考文档1
参考文档2
参考文档3
<template> <div> <h2>天地图地图服务</h2> <div id="map"></div> </div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import TileLayer from "ol/layer/Tile"; import XYZ from "ol/source/XYZ"; export default { data () { return { map: null }; }, mounted () { this.map = new Map({ target: "map", layers: [ // 天地图路网 new TileLayer({ source: new XYZ({ url: 'http://t4.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087' }) }), // 加载注记图层 new TileLayer({ source: new XYZ({ url: 'http://t3.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087' }) }), // 加载卫星影像 // new TileLayer({ // source: new XYZ({ // url: 'http://t3.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087' // }) // }), ], view: new View({ projection: "EPSG:4326", //坐标系,即地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。 center: [116.3972282409668, 39.90960456049752], //中心点坐标,即北京天安门 zoom: 12 }) }); } }; </script> <style lang="less" scoped> #map { height: 600px; } /*隐藏ol的一些自带元素*/ // 隐藏zoom组件 /deep/.ol-zoom { display: none; } // 隐藏右下角版权信息 /deep/.ol-attribution.ol-uncollapsible { display: none; } </style>
参考文档01
参考文档02
参考文档03
参考文档04
参考文档05
<template> <div id="container"> <div id="map" style="width: 100%; height: 100%"></div> </div> </template> <script> import 'ol/ol.css' import { Map, View, Feature } from 'ol' import Projection from 'ol/proj/Projection' import { Vector as SourceVec, ImageWMS } from 'ol/source' import { Point } from 'ol/geom' import { Style, Icon, Text, Fill } from 'ol/style' import { Vector as LayerVec, Image } from 'ol/layer' export default { data: function () { return { map: {}, loading: false, testData: [ { id: "6752845443727622144", name: "80103、9201及9202", riskLevel: "1", x: "-5302.402919149073", y: "3541.8358675377112", }, { id: "6748440227615866880", name: "80103综采工作面", riskLevel: "2", x: "-5171.282981056542", y: "3756.727781547658", }, { id: "6748440575126536192", name: "9202综采工作面", riskLevel: "3", x: "-5257.1690025799835", y: "3363.13658939467", }, { id: "6748513045875523584", name: "9202工作面安装", riskLevel: "3", x: "-5304.907056761922", y: "3246.4338306089517", } ], }; }, created () { }, mounted () { this.initMap() }, methods: { initMap () { let that = this let mapUrl = "http://111.229.215.211:8080/geoserver/sxmap/wms" let mapName = "sxmap:hfshape" let myCode = "EPSG:404000" let myUnits = 'degrees' //wms的边界范围 let extent = [-5783.940779486906, 2420.684125662136, -3999.448596040022, 5088.623484956386] //wms作底图 let wmsLayer = [ new Image({ source: new ImageWMS({ ratio: 1, url: mapUrl, params: { 'FORMAT': 'image/png', 'VERSION': '1.1.1', "STYLES": '', "LAYERS": mapName, "exceptions": 'application/vnd.ogc.se_inimage', } }) }) ]; // 坐标系 let projection = new Projection({ code: myCode, units: myUnits, global: false }) //定义地图对象 that.map = new Map({ layers: wmsLayer, target: 'map', view: new View({ projection, zoom: 4, maxZoom: 20, }), }); // 根据范围让地图元素居中显示 重点 that.map.getView().fit(extent, that.map.getSize()); // 获取风险点 this.loadData(); }, loadData () { this.addAllLayerToMap(this.testData) }, // 风险点标注 addAllLayerToMap (dataList) { let that = this let features = [] // 矢量元素定义 点类型 设置myData用于绑定数据 features = dataList.map(data => { const { x, y } = data; return new Feature({ geometry: new Point([x, y], "XY"), myData: data }) }) // 矢量元素样式设置 图标、文本 features.forEach(feature => { feature.setStyle(() => { return new Style({ image: new Icon({ opacity: 0.75, src: require(`@/assets/home/map/${feature.values_.myData.riskLevel}.png`) }), text: new Text({ text: `${feature.values_.myData.name}`, fill: new Fill({ color: "#fff", }), offsetY: 26, }), }) }) }) //创建矢量容器 let vectorSource = new SourceVec({ features: features, }); //创建矢量层 let vectorLayer = new LayerVec({ source: vectorSource, }); that.map.addLayer(vectorLayer); // 监听singleclick事件,通过点击事件,获取对应点的feature图标 that.map.on('singleclick', function (e) { console.log(e.coordinate) if (that.map.hasFeatureAtPixel(e.pixel)) { let feature = that.map.getFeaturesAtPixel(e.pixel) that.toRisksPage(feature[0].values_.myData) } }) }, toRisksPage (data) { this.$router.push({ path: "/risks", query: { riskPointId: data.id, riskPointName: data.name, }, }); }, }, }; </script> <style lang="less" scoped> #container { height: 800px; } </style>
默认图片左下角为原点
<template> <div id="map"></div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import { Image as ImageLayer } from "ol/layer"; import { ImageStatic } from "ol/source"; import { getCenter } from "ol/extent"; import { Projection } from "ol/proj"; import staticMap from "@/assets/map.png"; export default { data () { return { map: null, // 地图 imgx: 0, // 当前地图宽 imgy: 0, // 当前地图高 }; }, mounted () { let img = new Image(); img.src = staticMap; let that = this; img.onload = function (res) { that.imgx = res.target.width; that.imgy = res.target.height; that.initMap(); }; }, methods: { // 初始化地图 initMap () { let extent = [0, 0, this.imgx, this.imgy]; // 获取图片的宽高 let projection = new Projection({ code: "xkcd-image", units: "pixels", extent: extent }); this.map = new Map({ target: "map", layers: [ new ImageLayer({ source: new ImageStatic({ url: staticMap, // 静态地图 projection: projection, imageExtent: extent // 映射到地图的范围 }) }) ], view: new View({ projection: projection, center: getCenter(extent), zoom: 2, maxZoom: 18, minZoom: 2, }) }); // 监听地图点击事件 获取点击的坐标 this.map.on('singleclick', mapClick); function mapClick (e) { console.log(e.coordinate) } }, }, }; </script> <style> #map { height: calc(100vh - 50px); } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。