网站开发小程序开发,西安网站公司排名,装修公司加盟哪家好,中山网站建设价格低View就是这样的#xff0c;作为地图的窗口#xff0c;做一些改变#xff0c;就能看到变化#xff0c;便于初学者学习。同时#xff0c;View是OpenLayers地图组成部分中非常重要的一个概念#xff0c;涉及到地图移动#xff0c;放大#xff0c;缩小#xff0c;旋转等作为地图的窗口做一些改变就能看到变化便于初学者学习。同时View是OpenLayers地图组成部分中非常重要的一个概念涉及到地图移动放大缩小旋转等这些功能是任何一个GIS引擎必不可少的。为此我们把它作为最先介绍和学习的组成部分。
1.view之视图导航
在深入学习之前还是先来个开胃菜见识一下View所承载的功能。下面将演示地图导航功能关于导航相关功能在前面操作地图的时候已经有了充分的理解和认识。为什么我们还要再讨论它呢因为这次的导航功能需要自己来实现而且只使用ol.View提供的方法就可以做到。 我们先创建地图实现左移右移上移下移移动到重庆放大缩小这几个功能
我们还是以vue3中的代码为案例
script setup langtsimport ol/ol.css;import { ref, onMounted } from vue;import * as ol from ol;import { Projection, addProjection } from ol/proj;import { XYZ } from ol/source;import Tile from ol/layer/Tile;const mapRef ref();const olmap ref();onMounted(() {// 4490处理const projection new Projection({code: EPSG:4490,units: degrees,axisOrientation: neu});projection.setExtent([-180, -90, 180, 90]);projection.setWorldExtent([-180, -90, 180, 90]);addProjection(projection);const GJ_TDT_HOST () http://t${Math.round(Math.random() * 7)}.tianditu.com/DataServer?T;const GJ_TDT_TOKEN 13a4fee837babd2b8c569ebff100fe9f;olmap.value new ol.Map({layers: [new Tile({source: new XYZ({projection: EPSG:4490,url: ${GJ_TDT_HOST()}vec_cx{x}y{y}l{z}tk${GJ_TDT_TOKEN}})}),new Tile({source: new XYZ({projection: EPSG:4490,url: ${GJ_TDT_HOST()}cva_cx{x}y{y}l{z}tk${GJ_TDT_TOKEN}})})],view: new ol.View({projection: EPSG:4490,center: [107.530635013, 29.5446061089],zoom: 8,minZoom: 6}),target: mapRef.value});});
/script
templatediv idmap refmapRefdiv idnavigateel-button clickmoveToLeft()左移/el-buttonel-button clickmoveToRight()右移/el-buttonel-button clickmoveToUp()上移/el-buttonel-button onClickmoveToDown();下移/el-buttonel-button clickmoveToChengDu()移到成都/el-buttonel-button clickzoomIn()放大/el-buttonel-button clickzoomOut()缩小/el-button/div/div
/templatestyle scoped#map {position: absolute;left: 0;width: 100%;height: 100%;border: 1px solid #ccc;}
/style1.1实现左移方法
const moveToLeft () {const view olmap.value.getView();const mapCenter view.getCenter();// 让地图中心的x值增加即可使得地图向左移动增加的值根据效果可自由设定mapCenter[0] 1;view.setCenter(mapCenter);olmap.value.render();};1.2实现右移方法 const moveToLeft () {const view olmap.value.getView();const mapCenter view.getCenter();// 让地图中心的x值增加即可使得地图向左移动增加的值根据效果可自由设定mapCenter[0] 1;view.setCenter(mapCenter);olmap.value.render();};1.3 实现上移方法 const moveToUp () {const view olmap.value.getView();const mapCenter view.getCenter();mapCenter[1] - 1;view.setCenter(mapCenter);olmap.value.render();
};1.4实现下移方法
const moveToDown () {const view olmap.value.getView();const mapCenter view.getCenter();mapCenter[1] 1;view.setCenter(mapCenter);olmap.value.render();
};1.5 定位到重庆
const moveToCq () {const view olmap.value.getView();view.setCenter([107.530635013, 29.5446061089]);
};1.6 放大
const zoomIn () {const view olmap.value.getView();view.setZoom(view.getZoom() 1);
};1.7 缩小
const zoomOut () {const view olmap.value.getView();view.setZoom(view.getZoom() - 1);
};2.坐标
关于原点方向单位等等的相关定义和描述组成了我们常说的坐标系。
2.1 坐标系及投影
在GIS中我们需要地理坐标系。但它并不像笛卡尔坐标系那样简单学过地理知识就知道地球并不是一个完全规则的球体。在不同的地区为了在数学上表示它就出现了多种不同的参考椭球体比如克拉索夫斯基(Krasovsky)椭球体WGS1984椭球体更多的椭球体参见参考椭球体。在参考椭球体的基础上就发展出了不同的地理坐标系比如我国常用的WGS84北京54西安80坐标系欧洲北美也有不同的坐标系。北京54使用的是克拉索夫斯基(Krasovsky)椭球体WGS84使用的是WGS1984椭球体。由此可见多个坐标系是源于地理的复杂性。
由于存在着多种坐标系即使同样的坐标在不同的坐标系中也表示的是不同的位置这就是大家经常遇到的偏移问题的根源要解决这类问题就需要纠偏把一个坐标系的坐标转换成另一个坐标系的坐标。由于WGS84是全球通用的坐标系涉及到多个坐标系与它之间的转换
有了坐标系后我们就能精确的表示地球上的每一个位置但为什么还需要投影呢投影是为了把不可展的椭球面描绘到平面上它使用几何透视方法或数学分析的方法将地球上的点和线投影到可展的曲面(平面、园柱面或圆锥面)上再将此可展曲面展成平面建立该平面上的点、线和地球椭球面上的点、线的对应关系。正是因为有投影大家才能在网页上看到二维平面的地球地图。
2.2 ol中使用的坐标系
目前OpenLayers 3支持两种投影一个是EPSG:4326等同于WGS84坐标系参见详情。另一个是EPSG:3857等同于900913由Mercator投影而来经常用于web地图参见详情。一个是全球通用的一个是web地图专用的自然OpenLayers支持它们。在使用过程中需要注意OpenLayers默认使用的是EPSG:3857。这也是为什么前面的代码里需要进行坐标转换的原因。 既然支持EPSG:4326为什么还要转换当然是可以不用转换的但前提是你得指定使用具体那种投影就像下面这样。
import { Projection, addProjection } from ol/proj;const projection new Projection({code: EPSG:4490,units: degrees,axisOrientation: neu});projection.setExtent([-180, -90, 180, 90]);projection.setWorldExtent([-180, -90, 180, 90]);addProjection(projection);3.ol.View的应用
1.限制地图的范围
在实际使用中往往只关心某一个区域的地图而无需显示整个地球的地图这样可以聚焦于业务同时可以减少前端和后台的地图数据。无疑这样的功能是非常有用的。下面我们就将看到地图只能在经度29度到31度纬度在102到104度之间显示. view: new ol.View({projection: EPSG:4490,center: [107.530635013, 29.5446061089],extent: [102, 29, 104, 31],zoom: 8,minZoom: 6}),就只是添加了 extent: [102, 29, 104, 31],这行代码就实现了功能。extent参数类型为[minX, minY, maxX, maxY]的ol.Extent很容易记住
2.自适配区域
在实际应用中会有一些地图查找和标注的业务比如查看重庆渝北区。而这时地图所在区域可能是北京我们需要能够让地图直接定位到渝北区并且最大化完全地显示这块区。
const fitToyubei () {olmap.value.getView().fit([106.631187, 29.718143, 107.631187, 30.718143]);
};只用了一行代码ol.View的fit函数很强大希望能认真仔细的查看API文档它的第三个参数还可以设置更多的选项以适应更多的需要。
