Openlayers4加载天地图

文章首发于GISGO | GIS | 地理信息科学 - GIS研究中心:http://www.gisgo.top/Openlayers4加载天地图_第1张图片


相较于ArcGIS API而言,Openlayers添加天地图和其他第三方的地图服务简单多了。通过ol.layer.Tile调用切片地图服务,因为天地图服务遵循TMS标准,所以在source属性中使用ol.source.XYZ类,服务地址可以在天地图中查看到。


<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="libs/openlayers-v3.20.0-dist/ol.css">
    <script src="libs/openlayers-v3.20.0-dist/ol.js">script>
    <title>title>
    <style>
        html,body,#map{width:100%;height:100%}
    style>
head>
<body>
<div id="map" class="map">div>
body>
<script>
var tian_di_tu_satellite_layer = new ol.layer.Tile({
    title: "天地图卫星影像",
    visible:false,
    source: new ol.source.XYZ({
        url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
    })
});
var tian_di_tu_road_layer = new ol.layer.Tile({
    title: "天地图路网",
    source: new ol.source.XYZ({
        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
    })
});
var tian_di_tu_annotation = new ol.layer.Tile({
    title: "天地图文字标注",
    source: new ol.source.XYZ({
        url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
    })
});
var map = new ol.Map({
    target: 'map',
    layers: [tian_di_tu_satellite_layer, tian_di_tu_road_layer, tian_di_tu_annotation],
    overlays: [],
    view: new ol.View({
        center: [106.52714, 29.62487],
        projection: 'EPSG:4326',
        zoom: 12
    }),
    //比例尺
    controls: ol.control.defaults()
});
script>
html>

Openlayers4加载天地图_第2张图片


淘宝店铺:GIS研究中心

你可能感兴趣的:(GIS,openlayers)