区域农情监测api文档

Appearance

地图插件使用 ​

openlayers 使用 ​

I、openlayers 安装 ​

js
npm install ol

II、然后在对应的 vue 文件里面引入 ​

js
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import { XYZ, TileWMS } from 'ol/source';

III、初始化地图容器 ​

js
this.map = new Map({
  target: 'map',
  view: new View({ projection: 'EPSG:4326', center: [112.98, 33.98], zoom: 12 })
});

IV、加载天地图 ​

js
this.tiandiMap = new TileLayer({
  source: new XYZ({
    url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&tk=5828*******5696a252b9e&x={x}&y={y}&l={z}'
  })
});
this.map.addLayer(this.tianMapLayer);

V、分布/长势图层叠加 ​

js
this.distLayer = new TileLayer({
  source: new TileWMS({
    url: 'https://gw.datall.cn/productapi/jh-api/growRegionApi/loadTileLayer',
    params: {
      FORMAT: 'image/png',
      VERSION: '1.1.0',
      regionId: '3102000019',
      dataTime: '2020-07-11',
      cropId: '103',
      ServiceKey: 'bca12088********60b7a8d25c2aa8',
      UserName: '155****5663'
    }
  })
});
this.map.addLayer(this.distLayer);

leaflet 使用 ​

I、leaflet 安装 ​

js
npm install leaflet

II、然后在对应的 vue 文件里面引入 ​

js
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

III、初始化地图容器 ​

js
const center = new L.LatLng(30.42, 120.3);
let map = L.map({ center: center, zoom: 8 });

IV、加载天地图 ​

js
L.tileLayer(
  'http://t{0-7}.tianditu.com/DataServer?T=img_w&tk=5828*******5696a252b9e&x={x}&y={y}&l={z}',
  { maxZoom: 18, minZoom: 5, zommOffset: 1 }
).addTo(map);

V、分布/长势图层叠加 ​

js
L.tileLayer(
  'https://gw.datall.cn/productapi/jh-api/distRegionApi/loadTileLayer',
  {
    VERSION: '1.1.0',
    regionId: '3102000019',
    dataTime: '2020-06-09',
    cropId: '103',
    ServiceKey: 'bca12088********60b7a8d25c2aa8',
    UserName: '155****5663',
    crs: L.CRS.EPSG4326
  }
).addTo(map);

高德使用 ​

I、在对应的 vue 文件里面引入 ​

js
'https://webapi.amap.com/maps?v=1.4.15&key=392f43c4e890fcc64eccd4e22af065e6&plugin=AMap.MapType';

II、初始化地图容器 ​

js
var map = new AMap.Map('map', {
  center: [126.6455, 46.8935],
  zoom: 10,
  resizeEnable: true
});

III、加载瓦片图层 ​

js
var wms = new AMap.TileLayer.WMS({
  url: 'https://gw.datall.cn/productapi/jh-api/geoserverApi/wms',
  blend: false,
  params: {
    VERSION: '1.1.0',
    regionId: 3103000364,
    cropId: 120,
    dataTime: '2021-10-10',
    crs: 'EPSG:3857',
    ServiceKey: ServiceKey,
    UserName: UserName
  }
});
wms.setMap(map);