Skip to content

教程

新建一个地图

js
var map = new YY.Map("map", {
  centerCross: true,
  bearing: -90,
  center: [120.34, 31.309622415877158],
  // pitch:40,
  // overviewControl:true,

  zoom: 6,
  // minZoom:4
});

地图事件处理

js
map.on("click", function (e) {
  console.log(e);
  //do somethings
});

在地图上添加一个底图(瓦片图层)

js
//高德地图
var amapTileLayer = YY.LayerLookup.lookup("amap");
map.addBaseLayer(amapTileLayer);

在地图上添加一个矢量图层

js
var vectorLayer = new YY.VectorLayer("layer", {});

map.addLayer(vectorLayer);

在地图上添加一个点

js
var point = new YY.Point([120, 31]);

vectorLayer.addOverlay(point);

在地图上添加一条线

js
var polyline = new YY.Polyline([
  [120, 31],
  [120, 32],
  [120, 33],
]);

vectorLayer.addOverlay(polyline);

在地图上添加一个面

js
var polygon = new YY.Polygon([
  [120.6114, 31.27683],
  [120.6666, 31.23761],
  [120.57162, 31.21344],
]);

vectorLayer.addOverlay(polygon);

覆盖物图形事件处理

js
point.on("click", function (e) {
  //do somethings
});

polyline.on("click", function (e) {
  //do somethings
});

polygon.on("click", function (e) {
  //do somethings
});

完整代码

html
<div class="container" id="map"></div>
<script>
  const map = new YY.Map('map', {
    centerCross: true,
    // bearing:-90,
    center: [120.34, 31.309622415877158],
    // pitch:40,
    // overviewControl:true,

    zoom: 8,
    // minZoom:4
  });
  map.on("click", function (e) {
    console.log(e);
    //do somethings
  });

  //快速获取 高德地图  EPSG:3857
  var amapTileLayer = YY.LayerLookup.lookup("amap");
  map.addBaseLayer(amapTileLayer);

  var vectorLayer = new YY.VectorLayer("llll", {});
  map.addLayer(vectorLayer);

  var point = new YY.Point([120, 31]);
  vectorLayer.addOverlay(point);

  var polyline = new YY.Polyline([
    [120, 31],
    [120, 32],
    [120, 33],
  ]);
  vectorLayer.addOverlay(polyline);

  var polygon = new YY.Polygon([
    [120.6114, 31.27683],
    [120.6666, 31.23761],
    [120.57162, 31.21344],
  ]);
  vectorLayer.addOverlay(polygon);
  point.on("click", function (e) {
    //do somethings
  });

  polyline.on("click", function (e) {
    //do somethings
  });

  polygon.on("click", function (e) {
    //do somethings
  });
</script>

This document is generated by vitepress and Edit by deyihu