console
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">
<style>
html,body,
.map {
height: 100%;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t{0-7}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5853c0e92459c816623625d1c54d4593',
projection: "EPSG:4326",
}),
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t{0-7}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5853c0e92459c816623625d1c54d4593',
projection: "EPSG:4326",
}),
})
],
view: new ol.View({
center: [106.42, 26.35],
zoom: 5,
projection: "EPSG:4326",
})
});
let sourcePoint = new ol.source.Vector({
wrapX: false,
})
let styles = (feature, resolution)=>
{
return new ol.style.Style({
image: new ol.style.Icon({
src: './123.png',
rotation: feature.getProperties().STAZT1,
scale: 0.2
})
})
}
let vectorPointLayer = new ol.layer.Vector({
source: sourcePoint,
style: styles
})
this.map.addLayer(vectorPointLayer)
axios.get('http://10.52.1.181:9800/slsj-gz_st_zz-proxy/Gis/rest/services/slsj.gz_st_zz/queryserver/Query?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzbHRfYWRtaW4zIiwiY3JlYXRlZCI6MTY2MzY1NzU3MzUzNSwiZXhwIjoxNjY1MzIyOTc2NzAwfQ.RXNGrJE_W06TOizYqNc_aKxqMOrCROuEvWxWZRe5HvhCjrJaXU9WF79gdkL15nlGx8v1l8avCfneDguAGK-Wpg&where=1=1&layerId=2').then((res) => {
console.log(res);
res.data.result.features.forEach((item)=>{
sourcePoint.addFeatures(new ol.format.GeoJSON().readFeatures(item))
});
})
</script>
</body>
</html>