Openlayer 示例一 Image ArcGIS 地图服务加载 学习笔记
Image ArcGIS 地图服务
这个例子展示了如何使用动态ArcGIS REST地图服务。此源类型支持映射和图像服务。用于动态ArcGIS服务
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image ArcGIS MapServer</title>
<!-- 下面这一行只适用于像Internet Explorer和Android 4.x这样的旧环境 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="index.js"></script>
</body>
</html>
index.js
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer, Image as ImageLayer} from 'ol/layer';
import {OSM, ImageArcGISRest} from 'ol/source';
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
'Specialty/ESRI_StateCityHighway_USA/MapServer';
var layers = [
new TileLayer({ // = new ol.layer.Tile
source: new OSM()
}),
new ImageLayer({ // = new ol.layer.Image
source: new ImageArcGISRest(
//比率默认1.5。1表示图像请求是“地图”视区的原大小,2表示是“地图”视区大小的两倍,依此类推。
ratio: 1,
params: {}, //object.<string, *>
url: url //地图服务或图像服务的ArcGIS Rest服务URL。url应该包含/MapServer或/ImageServer。
//其他参数
//projection :projection //默认为view projection
//attributions :AttributionLike{string} {Array.<string>}
//可用于为数据源提供属性信息的类型。它代表了一个简单的字符串(例如,“?Acme Inc.”),
//一个简单字符串数组(例如.['?Acme Inc.,'?Bacme Inc.]),
//返回字符串或字符串数组的函数(模块:ol/source/source~ Attribution)
//crossOrigin :null | string
/*加载图像的crossOrigin属性。注意,如果要使用画布渲染器访问像素
数据,必须提供crossOrigin值。https:developer.mozilla.org/en-
US/docs/Web/HTML/CORS_enabled_image*
//hidpi :默认为true 从远程服务器请求图像时,请使用ol/Map#pixelRatio值。
//resolutions : Array.<number>
// If specified, requests will be made for
//these resolutions only.
})
})
];
var map = new Map({
layers: layers,
target: 'map',
view: new View({
center: [-10997148, 4569099],
zoom: 4
})
});
package.json
{
"name": "arcgis-image",
"dependencies": {
"ol": "6.3.1"
},
"devDependencies": {
"parcel": "1.11.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
}
}
TileArcGISRest地图服务加载
此示例演示如何将ArcGIS REST MapService用作分幅。此源类型支持映射和图像服务。对于缓存的ArcGIS服务,使用ol/source/XYZ可以获得更好的性能。
使用与上同,source参数略有不同,可参考api