教程
新建一个地图
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>