html5集成

SDK下载

https://onlinemap-res2.tantu.com/map_source/tantu_websdk.zip

地图web版sdk

webSDK引用了MapBox GL JavaScript库封装，使用WebGL从矢量图块和Mapbox样式渲染交互式地图。

- 快速集成

1.加载必要的javascript文件与css文件，把mapbox-gl.js与map-box.css文件加入到html文件的里

由于mapbox gl有CORS跨域访问限制，如需要作为本地资源访问，务必自建服务部署否则无法访问

<script src=“http://onlinemap-res1.tantu.com/map_source/mapbox/mapbox-gl.js”></script>
<link href=“http://onlinemap-res1.tantu.com/map_source/mapbox/mapbox-gl.css” rel=“stylesheet” />

2.页面dom元素样式

<style>
  body {
  margin: 0;
  padding: 0;
  }

  #map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  }
</style>

3.地图初始参数配置，在里放入以下代码

<div id="map"></div>
<script>
  var options={
    container: 'map', //指定显示地图的dom元素id
    style: 'http://onlinemap-res1.tantu.com/map_source/tantu_style.json', // 指定地图瓦片、图层数据及样式配置的文件
    center: [25, 30], // 初始地图中心点
    zoom: 1, // 初始地图缩放级别
    maxZoom: 16.99, // 最大缩放级别
    minZoom: 1  // 最小缩放级别
  };
  //判断如果是中文系统，设置用系统字体代替sdf字体减少90%网络流量
  var lang = window.navigator.userLanguage || window.navigator.language;
  if (/zh/.test(lang)) {
    options.localIdeographFontFamily =
      '"Noto Sans", "Noto Sans CJK SC", "Open Sans Regular", sans-serif';
  }
  var map = new mapboxgl.Map(options);
</script>

完整示例代码

<html>
  <head>
    <script src=“http://onlinemap-res1.tantu.com/map_source/mapbox/mapbox-gl.js”></script>
    <link href=“http://onlinemap-res1.tantu.com/map_source/mapbox/mapbox-gl.css” rel=“stylesheet” />  
	</head>
	<style>
		body {
        margin: 0;
        padding: 0;
      }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
	</style>
  <body>
  	<div id="map"></div>
    <script>
    var options={
        container: 'map', //显示地图的dom元素id
        style: 'http://onlinemap-res1.tantu.com/map_source/tantu_style.json', // 地图配置文件
        center: [25, 30], // 初始地图中心点
        zoom: 1, // 初始地图缩放级别
        maxZoom: 16.99, // 最大缩放级别
        minZoom: 1  // 最小缩放级别
    };
    //判断如果是中文系统，设置用系统字体代替sdf字体减少90%网络流量
    var lang = window.navigator.userLanguage || window.navigator.language;
    if (/zh/.test(lang)) {
      options.localIdeographFontFamily =
        '"Noto Sans", "Noto Sans CJK SC", "Open Sans Regular", sans-serif';
    }
    var map = new mapboxgl.Map(options);
    </script>
	</body>
</html>

- 示例参考

- 地图标注

var marker = new mapboxgl.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

- 弹窗

var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
 'top': [0, 0],
 'top-left': [0,0],
 'top-right': [0,0],
 'bottom': [0, -markerHeight],
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
 };
var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

- 导航控件

var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');

- 缩放控件

var scale = new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');

- 全屏控件

map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));

公共分类

V1

V2

地图工具类

ERC

OCR