Openlayer 示例一 Image ArcGIS 地图服务加载学习笔记

最新推荐文章于 2023-06-11 00:29:41 发布

Cui--

最新推荐文章于 2023-06-11 00:29:41 发布

阅读量759

点赞数

分类专栏： openlayers 文章标签： js arcgis server

原文链接：https://openlayers.org/en/latest/examples/arcgis-tiled.html

版权

openlayers 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

Cui--

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Openlayer 示例一 Image ArcGIS 地图服务加载学习笔记

Openlayer 示例一 Image ArcGIS 地图服务加载学习笔记Image ArcGIS 地图服务这个例子展示了如何使用动态ArcGIS REST地图服务。此源类型支持映射和图像服务。用于动态ArcGIS服务<!DOCTYPE html><html lang="en"> <head> <title>Image ArcGIS MapServer</title> <!-- 下面这一行只适用于像Interne
复制链接

扫一扫