Openlayers示例5 | ArcGIS REST Feature Service(未成功)
Uncaught TypeError: ol.source.Vector.VectorSource is undefined 未解决这个错误！！！
当视图范围改变时，这个例子会从ArcGIS REST Feature Service加载新特性。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"
type="text/css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- 引入jquery JS库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- css代码 -->
<style type="text/css">
.map {
width: 100%;
height: 600px;
}
</style>
</style>
<title>ArcGIS REST Feature Service</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
</body>
<script>
// 定义一个url服务地址
const serviceUrl =
'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' +
'Petroleum/KSFields/FeatureServer/';
const layer = '0';
// 数据格式
const esrijsonFormat = new ol.format.EsriJSON();
// 定义缓存样式符号
const styleCache = {
'ABANDONED': new ol.style.Style({
// 填充
fill: new ol.style.Fill({
color: 'rgba(225, 225, 225, 255)',
}),
// 边框
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 255)',
width: 0.4,
}),
}),
'GAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 255)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4,
}),
}),
'OIL': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(56, 168, 0, 255)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0,
}),
}),
'OILGAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(168, 112, 0, 255)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4,
}),
}),
};
const vectorSource = new ol.source.Vector({
loader: function (extent, resolution, projection, success, failure) {
// url:https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0/query/?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=%7B%22xmin%22%3A-10644926.307106785%2C%22ymin%22%3A4383204.9499851465%2C%22xmax%22%3A-10018754.171394622%2C%22ymax%22%3A5009377.08569731%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%7D%7D&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100
const url =
serviceUrl +
layer +
'/query/?f=json&' +
'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
encodeURIComponent(
'{"xmin":' +
extent[0] +
',"ymin":' +
extent[1] +
',"xmax":' +
extent[2] +
',"ymax":' +
extent[3] +
',"spatialReference":{"wkid":102100}}'
) +
'&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
'&outSR=102100';
console.log(extent); // 获取目前视口范围
console.log(resolution); // 获取分辨率
console.log(projection); //获取投影坐标
// 发送请求
$.ajax({
url: url,
dataType: 'jsonp',
success: function (response) {
if (response.error) {
alert(
response.error.message + '\n' + response.error.details.join('\n')
);
failure();
} else {
// dataProjection will be read from document
const features = esrijsonFormat.readFeatures(response, {
featureProjection: projection,
});
if (features.length > 0) {
ol.source.Vector.VectorSource.addFeatures(features);
}
success(features);
}
},
error: failure,
});
},
strategy: ol.loadingstrategy.tile(
ol.tilegrid.createXYZ({
tileSize: 512,
})
),
});
const vector = new ol.layer.Vector({
source: vectorSource,
style: function (feature) {
const classify = feature.get('activeprod');
return styleCache[classify];
},
});
const raster = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions:
'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
url:
'https://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
}),
});
// 初始化地图
const map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([-97.6114, 38.8403]),
zoom: 7,
}),
});
const displayFeatureInfo = function (pixel) {
const features = [];
map.forEachFeatureAtPixel(pixel, function (feature) {
features.push(feature);
});
if (features.length > 0) {
const info = [];
let i, ii;
for (i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('field_name'));
}
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
map.getTarget().style.cursor = 'pointer';
} else {
document.getElementById('info').innerHTML = ' ';
map.getTarget().style.cursor = '';
}
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！