mapbox 添加argis rest 动态地图服务

最新推荐文章于 2024-01-18 17:24:52 发布

炉火纯青-旺

最新推荐文章于 2024-01-18 17:24:52 发布

阅读量1.9k

点赞数 1

分类专栏： mapbox arcgis rest 文章标签： html

本文链接：https://blog.csdn.net/qq_34870529/article/details/105948974

版权

mapbox 同时被 2 个专栏收录

22 篇文章 5 订阅

订阅专栏

arcgis rest

1 篇文章 0 订阅

订阅专栏


<!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 id
    style: {
        "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 position
    zoom: 3, // starting zoom
    minZoom: 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 error
            console.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>

效果展示：

炉火纯青-旺

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
mapbox 添加argis rest 动态地图服务

<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>mapbox 添加argis rest 动态地图服务</title> <meta name='viewport' content='initial-scale=1,max...
复制链接

扫一扫