openlayer6加载ArcGISMapServer服务并进行地理投影坐标转换

参考文章

openlayers6【十】EPSG:3857和EPSG:4326区别详解_@必意玲-CSDN博客_epsg3857

openlayers6【十四】ol.proj类实现EPSG:3857和EPSG:4326坐标转换_@必意玲-CSDN博客

Module: ol/proj

Tiled ArcGIS MapServer

数据来源

这里采用的是智图的数据产品（坐标系为：投影坐标系3857）

智图GeoQ | 数据产品

步骤

1、引用TileArcGISRest和transform

import {TileArcGISRest} from "ol/source";
import { transform} from "ol/proj";

2、在layer中直接引用即可

const mapUrl = "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
                this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source:new TileArcGISRest({
                            url:mapUrl
                        })
                    })
                ],
//使用没有投影转换（地理坐标4326）--------------------------------------------------------------------------
                view: new View({
                    projection: "EPSG:4326",    //使用这个坐标系
                    center: [114.064839,22.548857],  //深圳
                    zoom: 4
                })
//使用投影转换（投影坐标3857）--------------------------------------------------------------------------
                // view: new View({
                //     projection: "EPSG:3857",    //使用这个坐标系
                //     center: transform([114.064839,22.548857],'EPSG:4326','EPSG:3857'),  //深圳
                //     zoom: 4
                // })
                });

坐标系的区别

EPSG:3857（投影）：数据的可读性差和数值大存储比较占用内存

EPSG:4326（地理）：使用此坐标系会导致页面变

但是4326变形的根本原因在于：

srid=4326 就是 wgs84 地理坐标系，关注的是地理位置（经纬度坐标），因为是 gps 所用，所以一般采用 UTM 方式投影，srid=3857 是一种投影坐标系，关注的是在平面上的呈现，它和 UTM 一样是解决二维呈现的方法。

图像畸变的原因是切片源一般采用 srid=3857 投影，如果 openlayers 中设置成 4326 ，ol 会自动采用 utm 投影方式拉伸图

4326下地图呈现如下图所示（UTM投影）

---

3857投影坐标系下地图呈现如下图所示

---