openlayers加载天地图

最新推荐文章于 2025-05-24 16:08:39 发布

原创最新推荐文章于 2025-05-24 16:08:39 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

GIS 专栏收录该内容

8 篇文章

订阅专栏

该代码示例展示了如何利用OpenLayers库加载天地图的不同图层，包括矢量图层、注记图层、影像图层等，并创建了一个可绘制图形的图层。此外，还配置了鼠标位置控制和比例尺控件，提供了地图的基本操作功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

代码

//天地图KEY
var key = 自己去天地图官网申请;
var layers = [];
var TiandiMap_vec = new ol.layer.Tile({
    name: "天地图矢量图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,//parent.TiandituKey()为天地图密钥
        crossOrigin: 'anonymous',
        wrapX: false

    })
});
var Tianditu_cva = new ol.layer.Tile({
    name: "天地图矢量注记图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,//parent.TiandituKey()为天地图密钥
        crossOrigin: 'anonymous',
        wrapX: false
    })
});
var TiandiMap_img = new ol.layer.Tile({
    name: "天地图影像图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + key,//parent.TiandituKey()为天地图密钥
        crossOrigin: 'anonymous',
        wrapX: false
    })
});
var TiandiMap_cia = new ol.layer.Tile({
    name: "天地图影像注记图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + key,//parent.TiandituKey()为天地图密钥
        crossOrigin: 'anonymous',
        wrapX: false
    })
});
var TiandiMap_cia88 = new ol.layer.Tile({
    name: "天地图边界线图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + key,//parent.TiandituKey()为天地图密钥
        crossOrigin: 'anonymous',
        wrapX: false
    })
});


// 绘图层
var source = new ol.source.Vector({
    wrapX: false
});
var vector = new ol.layer.Vector({
    name:'vector',
    source: source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
});

layers.push(TiandiMap_vec)
layers.push(TiandiMap_img)
layers.push(TiandiMap_cia88)
layers.push(Tianditu_cva)
layers.push(TiandiMap_cia)
layers.push(vector)
var mousePositionControl = new ol.control.MousePosition({
    //坐标格式
    coordinateFormat: ol.coordinate.createStringXY(4),
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: 'EPSG:4326',
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: 'custom-mouse-position',
    //显示鼠标位置信息的目标容器
    target: document.getElementById('mouse-position'),
    //未定义坐标的标记
    undefinedHTML: '&nbsp;'
});
//实例化比例尺控件（ScaleLine）
var scaleLineControl = new ol.control.ScaleLine({
    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
    units: "metric"
});
let map = new ol.Map({
    layers: layers,
    target: 'mapCon',
    view: new ol.View({
        projection: "EPSG:3857",
        center: ol.proj.transform([109.49081,36.596537], 'EPSG:4326', 'EPSG:3857'),//<1>设置固定中心点
        zoom: 8
        ,maxZoom: 17
        ,minZoom: 3,

    }),
    controls: ol.control.defaults({
        /** @type {olx.control.AttributionOptions} */
        attributionOptions: ({
            collapsible: true
        })
    }).extend([
        new ol.control.ZoomToExtent({
            extent: [
                813079.7791264898, 5929220.284081122,
                848966.9639063801, 5936863.986909639
            ]
        })
        , mousePositionControl, scaleLineControl]),
});