Vector Esri
Runnable OpenLayers example: Vector Esri. Open the live demo, read the complete source, and copy the file into your project. No build step or API key.
single HTML file · CDN dependencies onlyinterface may contain Chinese labels
Source
<!--
说明：ArcGIS REST 要素服务的中文示例，数据在页面内生成，可独立运行。
核心逻辑：ol.format.EsriJSON.readFeatures + dataProjection 坐标转换
依赖：OpenLayers 10.3.1 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ArcGIS REST 要素服务</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.3.1/ol.css">
<style>
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;overflow:hidden;
font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
.bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
.bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
.bar button{font:inherit;padding:3px 9px;border:1px solid #c9ced6;background:#fff;
border-radius:5px;cursor:pointer;color:#333}
.bar button:hover{background:#eef2f8}
.bar input[type=range]{width:110px;vertical-align:middle}
.bar input[type=text]{font:inherit;padding:2px 6px;border:1px solid #c9ced6;border-radius:4px}
#map{flex:1 1 auto;min-height:0;background:#eef0f3;position:relative}
.panel{flex:0 0 auto;max-height:34%;overflow:auto;padding:8px 12px;font-size:12px;
background:#fff;border-top:1px solid #e3e6ea;color:#3d4451}
.panel pre{margin:0;font-family:Consolas,"Courier New",monospace;font-size:11px;
white-space:pre-wrap;word-break:break-all;line-height:1.5}
.ol-attribution{font-size:11px}
</style>
</head>
<body>
<div class="bar">
<label><input type="checkbox" id="pt" checked> 点</label>
<label><input type="checkbox" id="ln" checked> 折线</label>
<label><input type="checkbox" id="pg" checked> 面</label>
<button id="fit" type="button">缩放到数据范围</button>
<span id="info">—</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
'use strict';
if (typeof ol === 'undefined') {
var errBox = document.getElementById('map');
if (errBox) {
errBox.innerHTML = '<div style="padding:20px;color:#b42318">OpenLayers 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
}
return;
}
var fromLonLat = ol.proj.fromLonLat;
var pointSet = {
geometryType: 'esriGeometryPoint',
spatialReference: {wkid: 4326},
features: [
{attributes: {name: '北京'}, geometry: {x: 116.4074, y: 39.9042}},
{attributes: {name: '上海'}, geometry: {x: 121.4737, y: 31.2304}},
{attributes: {name: '广州'}, geometry: {x: 113.2644, y: 23.1291}},
{attributes: {name: '西安'}, geometry: {x: 108.9398, y: 34.3416}}
]
};
var lineSet = {
geometryType: 'esriGeometryPolyline',
spatialReference: {wkid: 4326},
features: [
{attributes: {name: '京沪线'}, geometry: {paths: [[116.4074, 39.9042], [117.20, 36.65], [118.80, 32.06], [121.4737, 31.2304]]}},
{attributes: {name: '京广线'}, geometry: {paths: [[116.4074, 39.9042], [114.50, 36.10], [113.65, 34.75], [113.2644, 23.1291]]}}
]
};
var polygonSet = {
geometryType: 'esriGeometryPolygon',
spatialReference: {wkid: 4326},
features: [
{attributes: {name: '华北片区'}, geometry: {rings: [[
[113.5, 36.0], [119.5, 36.0], [119.5, 41.0], [113.5, 41.0], [113.5, 36.0]
]]}}
]
};
var fmt = new ol.format.EsriJSON();
var opts = {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'};
var ptFeatures = fmt.readFeatures(pointSet, opts);
var lnFeatures = fmt.readFeatures(lineSet, opts);
var pgFeatures = fmt.readFeatures(polygonSet, opts);
var ptLayer = new ol.layer.Vector({
source: new ol.source.Vector({features: ptFeatures}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({color: '#1f5fd0'}),
stroke: new ol.style.Stroke({color: '#ffffff', width: 2})
}),
text: new ol.style.Text({
text: '',
offsetY: -16,
font: '500 12px sans-serif',
fill: new ol.style.Fill({color: '#16181d'}),
stroke: new ol.style.Stroke({color: '#ffffff', width: 3})
})
})
});
var lnLayer = new ol.layer.Vector({
source: new ol.source.Vector({features: lnFeatures}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: '#e0602a', width: 3})
})
});
var pgLayer = new ol.layer.Vector({
source: new ol.source.Vector({features: pgFeatures}),
style: new ol.style.Style({
fill: new ol.style.Fill({color: 'rgba(38,150,110,0.18)'}),
stroke: new ol.style.Stroke({color: '#26966e', width: 2})
})
});
/* 点要素带名称，样式函数里补上文字 */
ptLayer.setStyle(function (feature) {
return new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({color: '#1f5fd0'}),
stroke: new ol.style.Stroke({color: '#ffffff', width: 2})
}),
text: new ol.style.Text({
text: feature.get('name'),
offsetY: -15,
font: '500 12px sans-serif',
fill: new ol.style.Fill({color: '#16181d'}),
stroke: new ol.style.Stroke({color: '#ffffff', width: 3})
})
});
});
var view = new ol.View({center: fromLonLat([112, 32]), zoom: 4.5});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'})}),
pgLayer, lnLayer, ptLayer
],
view: view,
controls: ol.control.defaults.defaults({attribution: false, zoom: true, rotate: false})
});
document.getElementById('pt').addEventListener('change', function () { ptLayer.setVisible(this.checked); });
document.getElementById('ln').addEventListener('change', function () { lnLayer.setVisible(this.checked); });
document.getElementById('pg').addEventListener('change', function () { pgLayer.setVisible(this.checked); });
document.getElementById('fit').addEventListener('click', function () {
var ext = ol.extent.createEmpty();
[ptLayer, lnLayer, pgLayer].forEach(function (l) {
if (l.getVisible()) { ol.extent.extend(ext, l.getSource().getExtent()); }
});
map.getView().fit(ext, {padding: [40, 40, 40, 40], duration: 350});
});
var info = document.getElementById('info');
info.textContent = '解析结果：点 ' + ptFeatures.length + ' 个 · 折线 ' + lnFeatures.length +
' 条 · 面 ' + pgFeatures.length + ' 个';
})();
</script>
</body>
</html>Language: the code and this page are in English; the full tutorial and API notes for this example are in Chinese. The demo itself is the authoritative version — it runs exactly as shown.