<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title>mapbox 添加argis rest 动态地图服务</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css' rel='stylesheet' /><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style>
</head>
<body><div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';
var map = new mapboxgl.Map({container: 'map', // container idstyle: {"version": 8,"sources": {"raster-tiles": {"type": "raster","tiles": ['http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=0b018552994f71a9467d24461a8f8238'],"tileSize": 256,}},"layers": [{"id": "tdt-img-tiles","type": "raster","source": "raster-tiles","minzoom": 0,"maxzoom": 22}]},center: [116.40,39.40], // starting positionzoom: 3, // starting zoomminZoom: 1,maxZoom: 18
});// 添加argis rest 动态地图服务
map.on('load',function() {map.addSource('city-source',{'type':'raster','tiles':['http://localhost:6080/arcgis/rest/services/test/china/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=102100&imageSR=102100'],// 'tiles':['http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=3857&imageSR=3857'],// "tiles": ['http://221.239.0.144:6080/arcgis/rest/services/oceanname_vector/MapServer/export?bbox={bbox-epsg-3857}&f=image&transparent=true&format=png8&bboxSR=102100&imageSR=102100'],'tileSize':256});map.addLayer({'id':'sity-layer','type':'raster','source':'city-source'});map.addSource('hospital-source',{'type':'raster','tiles':['http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=3857&imageSR=3857'],// "tiles": ['http://221.239.0.144:6080/arcgis/rest/services/oceanname_vector/MapServer/export?bbox={bbox-epsg-3857}&f=image&transparent=true&format=png8&bboxSR=102100&imageSR=102100'],'tileSize':256});map.addLayer({'id':'hospital-layer','type':'raster','source':'hospital-source'});
});// 数据查询操作
map.on('click', function(e) {const zoom = map.getZoom();console.log('A click event has occurred at ' + e.lngLat, map.getZoom());const lng = e.lngLat.lng;const lat = e.lngLat.lat;const value = Math.pow(2,19-zoom);console.log("value",value);const center = wgs84ToMercator(lng,lat);const min = [center.x - value, center.y - value];const max = [center.x + value, center.y + value];console.log(min, max);axios.get(`http://localhost:6080/arcgis/rest/services/china/MapServer/0/query?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry={xmin:${min[0]},ymin:${min[1]},xmax:${max[0]},ymax:${max[1]},spatialReference={wkid:102100}}&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100`).then(function (res) {console.log('data',res.data.features);}).catch(function (error) {// handle errorconsole.log(error);}).finally(function () {// always executed});
});// 经纬度转墨卡托
function wgs84ToMercator(lng, lat) {lng = parseFloat(lng); lat = parseFloat(lat);var d = Math.PI / 180,max = 90,lat = Math.max(Math.min(max, lat), -max),sin = Math.sin(lat * d);var x=6378137 * lng * d;var y=6378137 * Math.log((1 + sin) / (1 - sin)) / 2;console.log()return {x, y};
};
</script></body>
</html>效果展示：
