一文了解 gis 相关服务=》及前端地图服务相关总结

文章目录

    • 概要
    • OGC
    • 技术名词解释
    • cesium 应用案例
    • openlayers 中应用实例
      • XYZ服务
      • OSM服务
      • WMS服务
      • WMTS服务
      • WFS服务
    • mapbox 应用实例
      • 矢量瓦片服务
      • 栅格瓦片服务
      • WMS服务
      • WFS服务
    • leaflet 中 地图服务实例
      • 加载OpenStreetMap瓦片图层
      • 加载自定义XYZ瓦片图层
      • 加载WMS服务图层
      • 加载WFS服务图层
      • 加载ArcGIS Vector Basemap图层
    • arcgis for javascript 地图服务实例
      • 加载ArcGIS Online地图服务
      • 加载动态地图服务
      • 加载缓存地图服务
      • 加载WMS服务
      • 加载WMTS服务

概要

一、GIS行业基础知识

  1. 概念

    • 地理信息系统（GIS）：是一种用于采集、存储、管理、分析和展示地理空间数据的系统。它将地理空间数据（如地形、地貌、土地利用、人口分布等）与属性数据（如建筑物的用途、道路的名称等）相结合，通过空间分析和建模，为资源管理、城市规划、环境监测等众多领域提供决策支持。例如，在城市规划中，GIS可以分析土地利用现状、交通流量等因素，帮助规划师确定最佳的土地开发区域和交通线路规划。
    • 空间数据：空间数据是GIS的核心。它包括矢量数据和栅格数据。矢量数据是由点、线、面等几何对象组成，例如地图上的城市边界（面）、道路（线）、建筑物位置（点）等。栅格数据则是像元矩阵，常用于表示连续的地理现象，如遥感影像中的地形高程、土地覆盖类型等。以土地覆盖分类为例，栅格数据的每个像元可以表示该区域是森林、农田还是城市建设用地等不同类型。
    • 地理坐标系和投影坐标系：地理坐标系是基于地球的经纬度来确定地球上点的位置，如WGS - 84是一种广泛使用的地理坐标系。而投影坐标系是将地球表面的经纬度坐标转换为平面坐标，以便在地图上进行显示和测量。例如，墨卡托投影是一种常用的投影方式，它在航海和网络地图中广泛应用，因为它能保持角度不变，方便导航，但会使高纬度地区的面积变形较大。

  2. 实例应用

    • 资源管理方面：林业部门利用GIS管理森林资源。通过卫星遥感获取森林覆盖范围（栅格数据），结合实地调查的树木种类、胸径等属性数据（矢量数据），可以准确评估森林的蓄积量、生长状况等。例如，在森林火灾监测中，利用GIS可以实时监测火灾发生地点（通过卫星定位获取坐标），分析火势蔓延方向（根据地形、植被等空间数据进行模拟），为灭火决策提供支持。
    • 交通领域：交通管理部门使用GIS进行智能交通系统建设。例如，通过在道路上安装传感器获取交通流量数据（属性数据），结合道路的地理位置（矢量数据），可以分析交通拥堵情况，进行交通信号的智能调控。同时，在物流配送中，GIS可以根据送货地址的地理位置、道路状况等因素，规划最优的配送路线，提高配送效率。

二、常用的地图服务

  1. 概念
    • 在线地图服务（如百度地图、高德地图）：这些是通过互联网提供地图浏览、导航、地点查询等功能的服务。它们基于大量的地理空间数据，利用云计算和网络技术，为用户提供便捷的地图应用。例如，用户可以在手机上使用这些应用查找附近的餐厅、酒店，或者获取从当前位置到目的地的导航路线。这些地图服务通常会定期更新数据，以保证地图的准确性和时效性。
    • Web GIS服务（如ArcGIS Online）：它是一种基于Web的GIS平台，提供了地图发布、共享和分析功能。用户可以在浏览器中访问和使用GIS功能，如创建自定义地图、进行空间分析等。对于企业和政府部门来说，Web GIS服务可以方便地将地理信息共享给不同的用户群体，例如，环保部门可以通过Web GIS服务发布空气质量监测数据，让公众可以在网页上查看污染分布情况。
  2. 实例应用
    • 百度地图：
      • 出行导航：用户在城市中开车或步行时，百度地图可以根据用户的实时位置（通过手机的GPS定位），结合道路网络数据（矢量数据），规划最佳的行驶或步行路线。它还会考虑交通拥堵情况（通过与交通管理部门的数据共享或用户反馈），动态调整路线。例如，在上下班高峰期，会引导用户避开拥堵路段。
      • 生活服务：提供周边查询功能，比如查找附近的超市、银行、医院等。当用户搜索“附近的餐厅”时，百度地图会根据用户位置，在其地理数据库中查找附近符合条件的餐厅，并在地图上显示它们的位置和相关信息，如评分、菜系等。
    • ArcGIS Online：
      • 城市规划：城市规划师可以利用ArcGIS Online发布城市土地利用现状地图，包括不同功能区（如商业区、住宅区、工业区）的分布情况。同时，他们可以在这个平台上进行空间分析，如评估某一区域的开发潜力，通过叠加地形、交通、基础设施等数据图层，计算出适合进行新的建设项目的区域。
      • 应急响应：在自然灾害发生时，应急管理部门可以通过ArcGIS Online快速发布受灾区域地图，包括洪水淹没范围、地震破坏区域等。同时，结合人口分布等数据，可以进行救援资源的分配和调度，确定需要优先救援的区域。

OGC

  • OGC（Open Geospatial Consortium）协议：OGC 是一个国际非营利性组织，致力于制定地理空间信息（如地图数据、地球观测数据等）共享和互操作的标准规范。OGC 协议本质上是一系列的接口和编码规则，使得不同地理信息系统（GIS）软件、在线地图服务以及各种地理空间数据提供者之间能够更好地进行数据交换、共享和集成。
    这些协议涵盖了地理空间数据从获取、处理、传输到可视化展示等多个环节。例如，它规定了如何请求地理数据，数据应该以什么样的格式进行传输（如地理标记语言 - GML 格式），以及如何在不同的系统中对相同的数据进行正确的解读和展示。

技术名词解释

  1. OGC联盟：非盈利国际标准组织，制定地理信息数据和服务标准，确保GIS软件和数据互操作，曾用名Open GIS Consortium，后更名为OGC。
  2. WMS（Web地图服务）
    • 规范：利用地理空间数据制作地图，定义HTTP接口，支持GET和POST请求（多基于GET），可返回PNG、GIF、JPEG等栅格或SVG、WEB CGM等矢量形式地图。
    • 操作及参数
      • GetCapabilities：以xml文档返回服务元数据（如版本号、参数、图层信息等）。
      • GetMap：返回地图影像，参数有版本号、请求名称、图层、样式、坐标系统、包围盒、图片宽高、格式等，还有可选参数如图层样式文件URL、背景颜色、透明度等。
      • GetFeatureInfo（可选）：返回地图上特定要素信息。
      • DescribeLayer（可选）：图层描述信息。
      • GetLegendGraphic（可选）：获取图层图例图片。
  3. WFS（Web矢量服务）
    • 规范：返回矢量级GML编码数据，支持对矢量的增删改查操作，通过OGC Filter构造查询条件，支持多种查询方式。
    • 操作
      • GetCapabilities：生成服务性能描述文档（XML）。
      • DescribeFeatureType：返回矢量结构描述文档（XML）。
      • GetFeature：获取矢量实例。
      • LockFeature：处理事务期间矢量类型实例上锁请求。
      • Transaction：编辑现有矢量类型（创建、更新、删除）。
  4. WCS（Web栅格服务）
    • 规范：面向空间影像数据，将地理空间数据作为“栅格”或“覆盖”在网上交换。
    • 操作
      • GetCapabilities：返回描述服务和数据集的XML文档。
      • GetCoverage：在确定查询和数据获取方式后，用通用栅格格式返回地理位置值或属性。
      • DescribeCoverageType：请求覆盖层完整描述。
  5. WPS（网络处理服务）：用于在Web上提供和执行地理空间处理的国际规范，GeoServer可通过插件支持，可降低数据处理复杂性、连接处理操作、开发可重用过程、集中处理流程和模型、利用服务器运算性能、方便公共使用复杂模型。
  6. WMTS（Web地图瓦片服务）
    • 规范：OGC缓存技术标准，定义操作允许用户访问瓦片地图，支持RESTful访问，采用预定义图块方法发布地图，提升服务器伸缩性，降低载荷，但牺牲定制地图灵活性。
    • 操作
      • GetCapabilities：获取服务元信息。
      • GetTile：获取切片。
      • GetFeatureInfo（可选）：获取点选要素信息。
  7. WMS-C（Web Mapping Service - Cached）：由OSGeo制定，目的是预先缓存数据提升地图请求速度，已被WMTS和TMS取代，基于其实现有TileCache，曾用参数如bbox和resolutions决定地图层级，后有软件改进为level/x/y参数。
  8. TMS（切片地图服务规范）：OSGeo制定，操作允许用户访问切片地图，将切片存本地提升访问速度，支持修改坐标系，是纯RESTful服务，与WMTS本质类似遵循相同切片规则。
  9. 常见服务对比
    • WMS：动态地图服务，实时切片，根据请求返回地图可视化结果，速度慢，GeoServer常用。
    • WMTS：预定义图块发布地图，提升服务速度，牺牲灵活性，如天地图使用。
    • WFS：返回纯地理数据，支持矢量事务操作。
    • WCS：面向空间影像数据交换。
    • WPS：提供和执行地理空间处理服务。
    • WMSC（WMS-C）：已被取代，曾用于预先缓存数据提升速度。
    • TMS：瓦片地图服务，与WMTS类似。常见的有WMS、WFS、WMTS、TMS。

cesium 应用案例

  1. 理解Cesium中的地理服务框架
    • Cesium是一个用于创建三维地球和地图的JavaScript库。它通过ImageryProvider接口来加载各种地理影像服务。这个接口的不同实现类用于支持不同类型的地理服务，如ArcGisMapServerImageryProvider用于ArcGIS地图服务，BingMapsImageryProvider用于Bing地图服务等。对于自定义地理服务，主要是通过实现或扩展合适的ImageryProvider来完成数据的加载和展示。
  2. 自定义瓦片地图服务（以自定义瓦片URL为例）
    • 使用UrlTemplateImageryProvider
      • 原理：UrlTemplateImageryProvider允许用户通过一个URL模板来加载瓦片地图。在这个模板中，{x}、{y}和{z}是变量，分别代表瓦片的X坐标、Y坐标和缩放级别。
      • 代码示例：
        let customTileLayer = new Cesium.UrlTemplateImageryProvider({url: "https://your-custom-tile-server-url/{z}/{x}/{y}.png",// 其他可选参数，如最小和最大缩放级别minimumLevel: 0,maximumLevel: 18
});
let viewer = new Cesium.Viewer('cesiumContainer');
viewer.imageryLayers.addImageryProvider(customTileLayer);
      • 注意事项：
        • 确保自定义的URL模板正确，并且服务器能够正确响应瓦片请求。如果服务器返回的瓦片格式不是PNG等常见格式，可能需要指定fileExtension参数来匹配正确的格式。
        • 根据服务器的性能和数据范围，合理设置minimumLevel和maximumLevel参数，避免请求不存在的瓦片或者超出服务器处理能力的缩放级别。
  3. 自定义WMS（Web Map Service）服务应用
    • 创建自定义ImageryProvider（如果需要）或直接使用WebMapServiceImageryProvider进行配置
      • 原理：如果自定义的WMS服务与标准的WMS服务有一些差异，可能需要创建一个继承自ImageryProvider的类来处理特殊情况。但如果服务比较标准，可以直接使用Cesium.WebMapServiceImageryProvider。这个类通过发送WMS标准请求（如GetMap）来获取地图图像。
      • 代码示例：
        var wmsLayer = new Cesium.WebMapServiceImageryProvider({url: 'http://your-custom-wms-server-url',layers: 'your-custom-layers',format: 'image/png',// 可以设置代理，如果需要的话proxy: new Cesium.DefaultProxy('/proxy/')
});
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.imageryLayers.addImageryProvider(wmsLayer);
      • 注意事项：
        • 正确配置layers参数，确保请求的是所需的图层。不同的WMS服务器可能对图层命名和组织方式有所不同，需要根据实际情况设置。
        • format参数应与服务器返回的图像格式一致。如果服务器支持多种格式，可以根据性能和兼容性选择合适的格式。
        • 如果遇到跨域问题，可能需要设置合适的代理。Cesium.DefaultProxy可以用于简单的代理配置，但在实际应用中，可能需要根据服务器环境和安全策略进行更复杂的代理设置。
  4. 自定义WFS（Web Feature Service）服务与Cesium的集成（间接方式）
    • 原理：Cesium本身主要用于地图影像和地形的展示，没有直接支持WFS的功能用于显示矢量数据。但是可以通过将WFS数据转换为合适的格式（如GeoJSON），然后使用Cesium的DataSource来加载和显示矢量数据。
    • 步骤和代码示例：
      • 获取并转换WFS数据：
        • 首先，需要使用JavaScript的fetch或其他HTTP请求库从WFS服务器获取数据。假设服务器返回的是GML格式的数据，需要将其转换为GeoJSON格式。
        async function getWfsData() {let response = await fetch('http://your-custom-wfs-server-url?request=GetFeature&service=WFS&version=2.0.0&typename=your-feature-type');let gmlData = await response.text();// 这里需要一个GML到GeoJSON的转换函数，假设为gmlToGeoJsonlet geoJsonData = gmlToGeoJson(gmlData);return geoJsonData;
}
      • 在Cesium中加载矢量数据：
        getWfsData().then((geoJsonData) => {let dataSource = new Cesium.GeoJsonDataSource();dataSource.load(geoJsonData).then(() => {let viewer = new Cesium.Viewer('cesiumContainer');viewer.dataSources.add(dataSource);});
});
      • 注意事项：
        • GML到GeoJSON的转换可能比较复杂，需要根据GML的具体结构和GeoJSON的规范进行准确的转换。可以使用现有的转换库来简化这个过程。
        • 当加载大量矢量数据时，可能会影响性能。需要考虑对数据进行简化（如降低精度、减少要素数量）或者采用合适的加载策略（如分层加载、按需加载）来提高性能。
  5. 自定义WCS（Web Coverage Service）服务应用（相对复杂）
    • 原理：WCS主要用于提供栅格数据的原始值，在Cesium中应用需要将其转换为合适的影像格式并正确地进行地理定位。这可能涉及到对WCS返回数据的处理和与Cesium的地形或影像系统的集成。
    • 步骤和代码示例（简化概念）：
      • 获取和处理WCS数据（假设获取高程数据）：
        async function getWcsElevationData() {let url = 'http://your-custom-wcs-server-url?service=WCS&request=GetCoverage&version=2.0.1&coverage=your-elevation-coverage';let response = await fetch(url);let wcsData = await response.arrayBuffer();// 这里需要对WCS数据进行处理，如解析格式、转换为合适的高程数据格式let processedElevationData = processWcsElevationData(wcsData);return processedElevationData;
}
      • 在Cesium中应用高程数据（创建地形提供者）：
        getWcsElevationData().then((elevationData) => {let terrainProvider = new Cesium.HeightmapTerrainProvider({url: Cesium.createDataUri({buffer: elevationData,format: 'binary'}),// 其他地形参数，如水平和垂直精度horizontalScale: 1,verticalScale: 1});let viewer = new Cesium.Viewer('cesiumContainer');viewer.terrainProvider = terrainProvider;
});
      • 注意事项：
        • 处理WCS数据需要深入了解WCS返回的格式（如NetCDF、GRIB等）和数据结构。不同的WCS服务器提供的数据格式可能不同，需要根据实际情况进行解析和转换。
        • 在创建地形提供者时，要根据数据的精度和范围合理设置horizontalScale和verticalScale等参数，以确保地形的正确显示。同时，要注意数据的坐标系统和Cesium的坐标系统之间的匹配，可能需要进行坐标转换。

openlayers 中应用实例

XYZ服务

import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";// 创建Stamen Maps图层
const stamenLayer = new TileLayer({source: new XYZ({url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png"})
});

OSM服务

import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";// 创建OpenStreetMap图层
const osmLayer = new TileLayer({source: new OSM()
});

WMS服务

import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";// 创建WMS图层
const wmsLayer = new TileLayer({source: new TileWMS({url: "https://your-geoserver-url/wms",params: {LAYERS: "your-layer-name",TILED: true}})
});

WMTS服务

import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get as getProjection } from "ol/proj";
import { getWidth, getTopLeft } from "ol/extent";const projection = getProjection("EPSG:900913");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;
}
const tileGrid = new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds
});const tiandituLayer = new TileLayer({source: new WMTS({url: "http://t{s}.tianditu.com/vec_c/wmts",layer: "vec",matrixSet: "c",format: "tiles",tileGrid: tileGrid,style: "default",wrapX: true})
});

WFS服务

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';const vectorSource = new VectorSource({format: new GeoJSON(),url: 'https://your-geoserver-url/wfs?service=wfs&version=1.1.0&request=getfeature&typename=your-feature-type&outputformat=application/json&srsname=EPSG:4326',
});const vectorLayer = new VectorLayer({source: vectorSource,style: new Style({stroke: new Stroke({color: 'rgba(0, 0, 255, 1.0)',width: 2})})
});

mapbox 应用实例

矢量瓦片服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-73.985, 40.748],zoom: 10
});map.on('load', function () {map.addSource('my_vector_source', {type: 'vector',url: 'mapbox://your-username.tileset-id'});map.addLayer({id: 'my_vector_layer',type: 'fill',source: 'my_vector_source','source-layer': 'layer-name',paint: {'fill-color': '#008000','fill-opacity': 0.5}});
});

栅格瓦片服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/satellite-v9',center: [-73.985, 40.748],zoom: 10
});map.on('load', function () {map.addSource('my_raster_source', {type: 'raster',url: 'https://your-raster-tile-service-url/{z}/{x}/{y}.png',tileSize: 256});map.addLayer({id: 'my_raster_layer',type: 'raster',source: 'my_raster_source'});
});

WMS服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({container: 'map',style: {"version": 8,"sources": {"wms-source": {"type": "raster","tiles": ["https://your-wms-server-url?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=your-layer-name&STYLES=&SRS=EPSG:3857&BBOX={bbox-epsg-3857}&WIDTH=256&HEIGHT=256&FORMAT=image/png"],"tileSize": 256}},"layers": [{"id": "wms-layer","type": "raster","source": "wms-source"}]},center: [-73.985, 40.748],zoom: 10
});

WFS服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-73.985, 40.748],zoom: 10
});map.on('load', function () {// 使用fetch或其他HTTP请求库获取WFS数据fetch('https://your-wfs-server-url?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=your-feature-type&SRSNAME=EPSG:4326&OUTPUTFORMAT=application/json').then(response => response.json()).then(data => {// 将WFS数据转换为GeoJSON格式var geoJSONData = {type: 'FeatureCollection',features: data.features};map.addSource('wfs-source', {type: 'geojson',data: geoJSONData});map.addLayer({id: 'wfs-layer',type: 'circle',source: 'wfs-source',paint: {'circle-radius': 5,'circle-color': '#FF0000'}});});
});

leaflet 中 地图服务实例

加载OpenStreetMap瓦片图层

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

加载自定义XYZ瓦片图层

var map = L.map('map').setView([37.7749, -122.4194], 14);
L.tileLayer('https://your-tile-server-url/{z}/{x}/{y}.png', {attribution: 'Your Attribution',maxZoom: 18
}).addTo(map);

加载WMS服务图层

var map = L.map('map').setView([40.7128, -74.0060], 10);
var wmsLayer = L.tileLayer.wms('https://your-wms-server-url', {layers: 'your-layer-name',format: 'image/png',transparent: true,attribution: 'WMS Layer Attribution'
});
wmsLayer.addTo(map);

加载WFS服务图层

var map = L.map('map').setView([37, 104], 3);
function loadWFS(url, layer, callback, crs='EPSG:4326', options={}) {const params = {service: 'WFS',version: '1.1.0',request: 'GetFeature',typeName: layer,outputFormat: 'application/json',srsName: crs};const url_str = url + L.Util.getParamString(params, url);$.ajax({url: url_str,dataType: 'json',success: function (geojson) {var wfsLayer = L.geoJson(geojson, options);callback(wfsLayer);}});
}loadWFS('http://localhost:8080/geoserver/rest_workspace/ows', 'china_province', function (layer) {layer.addTo(map);
});

加载ArcGIS Vector Basemap图层

const apiKey = "your_api_key";
const basemapEnum = "arcgis/navigation";
const startCoords = [-122.4194, 37.7749];
const zoomLevel = 14;const map = L.map('map', {minZoom: 2
}).setView(startCoords, 6);const tileLayer = L.esri.vector.vectorBasemapLayer(basemapEnum, {apiKey: apiKey
});
tileLayer.addTo(map);

arcgis for javascript 地图服务实例

加载ArcGIS Online地图服务

require(["esri/Map","esri/views/MapView","esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {var map = new Map({basemap: "streets"});var view = new MapView({container: "viewDiv",map: map,center: [-122.4194, 37.7749],zoom: 12});
});

加载动态地图服务

require(["esri/Map","esri/views/MapView","esri/layers/ArcGISDynamicMapServiceLayer"
], function(Map, MapView, ArcGISDynamicMapServiceLayer) {var map = new Map({basemap: "topo"});var dynamicLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");map.addLayer(dynamicLayer);var view = new MapView({container: "viewDiv",map: map,center: [-98.5795, 39.8282],zoom: 4});
});

加载缓存地图服务

require(["esri/Map","esri/views/MapView","esri/layers/ArcGISTiledMapServiceLayer"
], function(Map, MapView, ArcGISTiledMapServiceLayer) {var map = new Map({basemap: "gray"});var tiledLayer = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");map.addLayer(tiledLayer);var view = new MapView({container: "viewDiv",map: map,center: [0, 0],zoom: 2});
});

加载WMS服务

require(["esri/Map","esri/views/MapView","esri/layers/WMSLayer"
], function(Map, MapView, WMSLayer) {var map = new Map({basemap: "osm"});var wmsLayer = new WMSLayer("http://localhost:8080/geoserver/wms", {format: "png",resourceInfo: {copyright: "GeoServer",description: "Test WMS",extent: new esri.geometry.Extent(-180, -90, 180, 90, { wkid: 4326 }),featureInfoFormat: "text/html",layerInfos: [new WMSLayerInfo({ name: "test_layer", title: "Test Layer", queryable: true, showPopup: true })],spatialReferences: [4326],version: "1.1.1"},version: "1.1.1",visibleLayers: ["test_layer"]});map.addLayer(wmsLayer);var view = new MapView({container: "viewDiv",map: map,center: [0, 0],zoom: 2});
});

加载WMTS服务

require(["esri/Map","esri/views/MapView","esri/layers/WMTSLayer"
], function(Map, MapView, WMTSLayer) {var map = new Map({basemap: "satellite"});var wmtsLayer = new WMTSLayer({url: "http://your-wmts-server-url/ogc/wmts",layer: "your_layer_name",style: "default",format: "image/png",tileMatrixSet: "your_tile_matrix_set",showLegend: true});map.addLayer(wmtsLayer);var view = new MapView({container: "viewDiv",map: map,center: [0, 0],zoom: 2});
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/890422.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

性能】JDK和Jmeter的安装与配置

性能】JDK和Jmeter的安装与配置

一、JDK环境配置 1. 下载JDK 官网下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 选择对应系统的安装包&#xff0c;下载后安装&#xff0c;安装中记录JDK安装的地址&#xff0c;之后一直点击下一…
阅读更多...
Mysql之YUM安装时GPG 密钥报错问题处理

Mysql之YUM安装时GPG 密钥报错问题处理

一、背景说明 使用YUM安装mysql5.7的时候报错&#xff0c;报错信息提示未安装公钥。博主查看/etc/yum.repos.d/mysql-community.repo配置文件中关于公钥的配置&#xff0c;确实启用了公钥验证&#xff0c;博主再排查过程中还是走了一些弯路&#xff0c;最终顺利解决了&#xff…
阅读更多...
启动报错java.lang.NoClassDefFoundError: ch/qos/logback/core/status/WarnStatus

启动报错java.lang.NoClassDefFoundError: ch/qos/logback/core/status/WarnStatus

报错信息图片 日志&#xff1a; Exception in thread "Quartz Scheduler [scheduler]" java.lang.NoClassDefFoundError: ch/qos/logback/core/status/WarnStatus先说我自己遇到的问题&#xff0c;我们项目在web设置了自定义的log输出路径&#xff0c;多了一个 / 去…
阅读更多...
Elasticsearch-分词器详解

Elasticsearch-分词器详解

什么是分词器 1、分词器介绍 对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 常用的中文分词器有ik按照切词的粒度粗细又分为:ik_max_word和ik_smart&…
阅读更多...
Docker 入门：如何使用 Docker 容器化 AI 项目（一）

Docker 入门：如何使用 Docker 容器化 AI 项目（一）

引言 在人工智能&#xff08;AI&#xff09;项目的开发和部署过程中&#xff0c;环境配置和依赖管理往往是开发者遇到的挑战之一。开发者通常需要在不同的机器上运行同样的代码&#xff0c;确保每个人使用的环境一致&#xff0c;才能避免 “在我的机器上可以运行”的尴尬问题。…
阅读更多...
ExcelVBA编程输出ColorIndex与对应颜色色谱

ExcelVBA编程输出ColorIndex与对应颜色色谱

标题 ExcelVBA编程输出ColorIndex与对应颜色色谱 正文 解决问题编程输出ColorIndex与对应色谱共56&#xff0c;打算分4纵列输出&#xff0c;标题是ColorIndex,Color,Name 1. 解释VBA中的ColorIndex属性 在VBA&#xff08;Visual Basic for Applications&#xff09;中&#xff…
阅读更多...
2024年11月 蓝桥杯青少组 STEMA考试 Scratch真题

2024年11月 蓝桥杯青少组 STEMA考试 Scratch真题

2024年11月 蓝桥杯青少组 STEMA考试 Scratch真题&#xff08;选择题&#xff09; 题目总数&#xff1a;5 总分数&#xff1a;50 选择题 第 1 题 单选题 Scratch运行以下程宇后&#xff0c;小兔子会&#xff08; &#xff09;。 A. 变小 B. 变大 C. 变色 D. …
阅读更多...
springboot470基于协同过滤算法的东北特产销售系统的实现(论文+源码)_kaic

springboot470基于协同过滤算法的东北特产销售系统的实现(论文+源码)_kaic

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…
阅读更多...
37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体 实现效果 知识点 WebGLRenderer WebGLRenderer 是Three.js中的一个渲染器类&#xff0c;用于将3D场景渲染到网页上。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数&#xff0c;可选。 常用…
阅读更多...
leetcode 面试经典 150 题：长度最小的子数组

leetcode 面试经典 150 题：长度最小的子数组

链接长度最小的子数组题序号209题型数组解题方法滑动窗口难度中等 题目 给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件…
阅读更多...
【游戏设计原理】22 - 石头剪刀布

【游戏设计原理】22 - 石头剪刀布

一、游戏基础&#xff1a;拳头、掌心、分指 首先&#xff0c;石头剪刀布&#xff08;又名“Roshambo”&#xff09;看似简单&#xff0c;实际上可是个“深藏玄机”的零和博弈&#xff08;听起来很高深&#xff0c;其实就是输赢相抵消的意思&#xff09;。游戏中有三种手势&…
阅读更多...
五、windows上vscode构建c/c++环境

五、windows上vscode构建c/c++环境

1、安装vscode 官网下载界面&#xff1a;https://code.visualstudio.com/Download 请根据电脑系统安装所需版本点击下载链接&#xff08;一般情况下点击windows按钮即可&#xff09;鼠标左键双击&#xff0c;即可运行安装程序&#xff0c;点击【确认】&#xff1b;选择安装路径…
阅读更多...
三格电子——新品IE103转ModbusTCP网关

三格电子——新品IE103转ModbusTCP网关

型号&#xff1a;SG-TCP-IEC103 产品概述 IE103转ModbusTCP网关型号SG-TCP-IEC103&#xff0c;是三格电子推出的工业级网关&#xff08;以下简称网关&#xff09;&#xff0c;主要用于IEC103数据采集、DLT645-1997/2007数据采集&#xff0c;IEC103支持遥测和遥信&#xff0c;可…
阅读更多...
数据结构---------二叉树前序遍历中序遍历后序遍历

数据结构---------二叉树前序遍历中序遍历后序遍历

以下是用C语言实现二叉树的前序遍历、中序遍历和后序遍历的代码示例&#xff0c;包括递归和非递归&#xff08;借助栈实现&#xff09;两种方式&#xff1a; 1. 二叉树节点结构体定义 #include <stdio.h> #include <stdlib.h>// 二叉树节点结构体 typedef struct…
阅读更多...
UE5仿漫威争锋灵蝶冲刺技能

UE5仿漫威争锋灵蝶冲刺技能

这两天玩了一下漫威争锋Marvel Rivals&#xff0c;发现是UE5做的&#xff0c;对里面一些角色技能挺感兴趣的&#xff0c;想简单复刻一下技能功能&#xff0c;顺便复习一下学过的知识 首先把摄像机设置调整一下 CameraBoom里搜索lag 把摄像机延迟关掉 &#xff0c;这样摄像机就…
阅读更多...
常用类晨考day15

常用类晨考day15

1.基本数据类型以及对应包装类 Byte Short Integer Long Float Double Boolean Character 2.什么是自动拆箱和装箱&#xff0c;jdk版本有什么要求&#xff1f;代码举 例并标明 Integer a 100; // 装箱 int b a; // 拆箱 从JDK1.5才开始支持 3.NumberFormatException是什么异常…
阅读更多...
etcd+京东hotkey探测使用

etcd+京东hotkey探测使用

qhotKey链接 京东hotkey把热点数据默认缓存在了本地缓存caffeine中&#xff0c;也可以存到redis中&#xff0c;但是京东hotkey的SDK没有redis的实现方法&#xff0c;因此需要自己实现。 官方目录结构下&#xff1a;分别是client客户端&#xff08;要打包引入到自己的项目&…
阅读更多...
如何实现层叠布局

如何实现层叠布局

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了GirdView Widget,本章回中将介绍Stack这种Widget，闲话休提，让我们一起Talk Flutter吧。 1 概念介绍 在Flutter中Stack主要用来叠加显示其它的Widget，类似我们日常生活中的楼层或者说PS中的图层，因此它也是一…
阅读更多...
Java 上机实践11（组件及事件处理）

Java 上机实践11（组件及事件处理）

&#xff08;大家好&#xff0c;今天分享的是Java的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 Plug&#xff1a;程序实现 方法一&#xff08;记事本&#xff09; 方法二&#xff08;IDEA&#xff09; 实验一&am…
阅读更多...
本地如何启动casdoor

本地如何启动casdoor

1、下载代码 GitHub - casdoor/casdoor at v1.777.0 下载对应tag的代码&#xff0c;我这里选择的时v1.777.0版本 通过网盘分享的文件&#xff1a;casdoor-1.777.0.zip 链接: https://pan.baidu.com/s/1fPNqyJYeyfZnem_LtEc0hw 提取码: avpd 2、启动后端 1、使用goland编译…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023