iovmap
Version:
a map sdk base on leaflet
588 lines (585 loc) • 20.6 kB
HTML
<html lang="en">
<head>
<title>iovmap项目演示页面</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="./dist/iovmap.min.js"></script>
<script src="./line.js"></script>
</head>
<body onload="initMap()">
<div id="app" style="width: 600px; height: 400px"></div>
<div style="border: 1px solid red; margin-top: 10px; padding: 5px">
<select name="" id="select_maptype">
<option value="BMap">百度地图</option>
<option value="BMap_Sate">百度卫星图</option>
<option value="BMap_Custom_midnight">百度暗夜样式图</option>
<option value="BMap_Custom_dark">百度黑夜样式图</option>
<option value="BMap_Custom_grayscale">百度灰色样式图</option>
<option value="GMap">谷歌地图</option>
<option value="GMap_Sate">谷歌卫星图</option>
<option value="GMap_CN">谷歌中国地图</option>
<option value="GMap_Sate_CN">谷歌中国卫星图</option>
<option value="AMap">高德地图</option>
<option value="AMap_Sate">高德卫星图</option>
<option value="SSMap">SOSO地图</option>
<option value="OSMap">OpenStreat地图</option>
<option value="AMap+BEKD">AMap+BEKD</option>
<option value="AMap_Sate+BEKD">AMap_Sate+BEKD</option>
<option value="AMap2">高德地图2</option>
<option value="AMap2_State">高德卫星图2</option>
</select>
<!-- <button onclick="initMap()">初始化地图</button> -->
<button onclick="setZoom()">缩放地图</button>
<button onclick="flyTo()">移动地图fly</button>
<button onclick="panTo()">移动地图pan</button>
<button onclick="setView()">设置地图视图</button>
<button onclick="getView()">获取地图视图</button>
<button onclick="minZoom()">全图</button>
<button onclick="maxZoom()">大图</button>
<button onclick="flyEye()">鹰眼</button>
<button onclick="zoomIn()">放大</button>
<button onclick="zoomOut()">缩小</button>
<button onclick="boxIn()">拉框缩小</button>
<button onclick="boxOut()">拉框放大</button>
<button onclick="distance()">测量距离</button>
<button onclick="boxFind()">拉框找车</button>
<button onclick="flyToBounds()">地图视野fly</button>
<button onclick="fitBounds()">地图视野fit</button>
<button onclick="changeMap()">切换地图</button>
<button onclick="showMapRoadGrid()">显示路网(卫星图下有效)</button>
<button onclick="hideMapRoadGrid()">隐藏路网</button>
</div>
<div style="border: 1px solid teal; margin-top: 10px; padding: 5px">
<div style="margin-bottom: 5px">
<label>瓦片地址:
<input id="tile_url" type="text" style="width: 480px"
value="http://127.0.0.1/tiles/cai-chang/{z}/{x}/{y}.png" />
</label>
</div>
<label>
<input id="tile_tms" type="checkbox" checked /> tms（Y 轴反向时勾选）
</label>
<button onclick="addTileLayer()">添加自定义图层</button>
<button onclick="removeTileLayer()">移除图层</button>
<button onclick="flyToTileArea()">定位到图层区域</button>
<label>透明度:
<input id="tile_opacity" type="range" min="0" max="100" value="100"
oninput="setTileOpacity(this.value)" />
</label>
</div>
<div style="border: 1px solid green; margin-top: 10px; padding: 5px">
<button onclick="marker_draw()">绘制marker</button>
<button onclick="marker_load()">加载marker</button>
<button onclick="marker_edit()">编辑marker</button>
<button onclick="marker_change()">改变marker外形</button>
<button onclick="marker_changeInfowin()">改变marker气泡内容</button>
<button onclick="marker_moveTo()">移动marker</button>
<button onclick="marker_remove()">移除marker</button>
</div>
<div style="border: 1px solid gray; margin-top: 10px; padding: 5px">
<button onclick="initMarkerList()">初始化markerList(cnavas)</button>
<button onclick="initMarkerList2()">初始化markerList(native)</button>
<button onclick="setImageSrc()">更新marker图标</button>
<button onclick="push()">增加markerList内容</button>
<button onclick="updateIcon()">更新其中一个图标</button>
<button onclick="openPopup()">打开其中一个气泡</button>
<button onclick="removeMarkerList()">移除</button>
</div>
<div style="border: 1px solid yellow; margin-top: 10px; padding: 5px">
<button onclick="polyline_draw()">绘制polyline</button>
<button onclick="polyline_load()">加载polyline</button>
<button onclick="polyline_edit()">编辑polyline</button>
<button onclick="polyline_loadTrack()">加载轨迹polyline</button>
<button onclick="polyline_remove()">移除polyline</button>
</div>
<div style="border: 1px solid blue; margin-top: 10px; padding: 5px">
<button onclick="rectangle_draw()">绘制rectangle</button>
<button onclick="rectangle_load()">加载rectangle</button>
<button onclick="rectangle_edit()">编辑rectangle</button>
<button onclick="rectangle_remove()">移除rectangle</button>
</div>
<div style="border: 1px solid brown; margin-top: 10px; padding: 5px">
<button onclick="polygon_draw()">绘制polygon</button>
<button onclick="polygon_load()">加载polygon</button>
<button onclick="polygon_edit()">编辑polygon</button>
<button onclick="polygon_remove()">移除polygon</button>
</div>
<div style="border: 1px solid palevioletred; margin-top: 10px; padding: 5px">
<button onclick="circle_draw()">绘制circle</button>
<button onclick="circle_load()">加载circle</button>
<button onclick="circle_edit()">编辑circle</button>
<button onclick="circle_remove()">移除circle</button>
</div>
<div style="border: 1px solid palevioletred; margin-top: 10px; padding: 5px">
<button onclick="track_load()">加载track</button>
<button onclick="track_update()">更新track</button>
<button onclick="track_remove()">移除track</button>
</div>
<div style="border: 1px solid palevioletred; margin-top: 10px; padding: 5px">
<button onclick="tooltip_load()">加载tooltip</button>
<button onclick="tooltip_remove()">移除tooltip</button>
</div>
<script>
let iovMap = null;
let initMap = function () {
let node = document.getElementById("select_maptype");
iovMap = new IOVMap.Map("app", { type: node.value });
};
let setZoom = function () {
iovMap.setZoom(10);
};
let minZoom = function () {
iovMap.minZoom();
};
let maxZoom = function () {
iovMap.maxZoom();
};
let isFlyEye = false;
let flyEye = function () {
if (!isFlyEye) {
iovMap.openFlyEye();
isFlyEye = true;
} else {
iovMap.closeFlyEye();
isFlyEye = false;
}
};
let flyTo = function () {
iovMap.flyTo([29.716608, 115.115005]);
};
let panTo = function () {
iovMap.panTo([29.716608, 115.115005]);
};
let setView = function () {
iovMap.setView([29.716608, 115.115005], 10);
};
let getView = function () {
const temp = iovMap.getView();
console.log(temp);
};
let boxIn = function () {
iovMap.boxIn();
};
let boxOut = function () {
iovMap.boxOut();
};
let zoomIn = function () {
iovMap.zoomIn();
};
let zoomOut = function () {
iovMap.zoomOut();
};
let distance = function () {
iovMap.distance();
};
let flyToBounds = function () {
let start = [line[0].lat, line[0].lng];
let end = [line[line.length - 1].lat, line[line.length - 1].lng];
iovMap.flyToBounds(start, end);
};
let fitBounds = function () {
let start = [line[0].lat, line[0].lng];
let end = [line[line.length - 1].lat, line[line.length - 1].lng];
iovMap.fitBounds(start, end);
};
let changeMap = function () {
let node = document.getElementById("select_maptype");
iovMap.changeMap(node.value, {
key: '',
sk: ''
});
};
const showMapRoadGrid = function () {
let node = document.getElementById("select_maptype");
iovMap.showRoadGrid(node.value.split('_')[0], {});
}
const hideMapRoadGrid = function () {
iovMap.hideRoadGrid();
}
// 与 nginx cai-chang-demo 一致（WGS84）
const tileAreaCenter = [38.146, 111.555];
const addTileLayer = function () {
const url = document.getElementById("tile_url").value.trim();
if (!url) {
alert("请填写瓦片地址");
return;
}
// 业务侧只关心地址 / tms / 缩放，坐标系由 SDK 按当前底图内部处理
iovMap.addTileLayer(url, {
tms: document.getElementById("tile_tms").checked,
maxZoom: 18,
maxNativeZoom: 18,
});
iovMap.setTileLayerOpacity(document.getElementById("tile_opacity").value / 100);
};
const removeTileLayer = function () {
iovMap.removeTileLayer();
};
const flyToTileArea = function () {
iovMap.setView(tileAreaCenter, 15);
};
const setTileOpacity = function (value) {
iovMap.setTileLayerOpacity(value / 100);
};
let boxFind = function () {
const Rectangle = new IOVMap.Rectangle(iovMap.map);
let temp = {
lat: 33.161818,
lng: 105.523438,
};
let tempArray = [];
for (let index = 0; index < 5000; index++) {
temp.lat += 0.001;
temp.lng += 0.002;
tempArray.push({
lat: temp.lat,
lng: temp.lng,
text: "测A" + (1000 + index),
id: index,
});
}
Rectangle.draw(function (v) {
const result = iovMap.findExist(tempArray, v);
console.log(result);
});
};
// Marker
let iovMarker = null;
let marker_draw = function () {
iovMarker = new IOVMap.Marker(iovMap.map);
iovMarker.draw(function (latlngs) {
console.log(latlngs);
});
};
let marker_load = function () {
let start = line[0];
iovMarker = new IOVMap.Marker(iovMap.map);
iovMarker.load(
39.90553,
116.391305,
"./assets/images/circle_blue_16_ns.png",
[16, 16],
[8, 8],
"我是天安门国旗点",
"我的坐标系是wgs84",
function (e) {
console.log(e);
}
);
};
let marker_edit = function () {
let start = line[50];
iovMarker = new IOVMap.Marker(iovMap.map);
iovMarker.edit(start.lat, start.lng, function (v) {
console.log(v);
});
};
let marker_change = function () {
iovMarker.change("./assets/images/circle_black_16_ns.png");
};
let marker_changeInfowin = function () {
iovMarker.changeInfoWin("i am test infowin");
};
let marker_moveTo = function () {
let end = line[line.length - 1];
iovMarker.moveTo(end.lat, end.lng);
};
let marker_remove = function () {
iovMarker.remove();
};
// markerList
let markerListFlag = false;
let initMarkerList = function () {
markerListFlag = false;
let canvas = iovMap.createCanvasPane();
markerList = new IOVMap.MarkerList(iovMap.map, canvas, function (id) {
console.log(id);
let now = new Date();
markerList.setPopupContent(now.getTime() + "");
});
};
let initMarkerList2 = function () {
markerListFlag = true;
markerList = new IOVMap.MarkerList_Native(
iovMap.map,
function (id) {
console.log(id);
let now = new Date();
markerList.setPopupContent(now.getTime() + "");
},
function () {
console.log("close popup");
}
);
};
let setImageSrc = function () {
if (!markerListFlag) {
markerList.setImageSrc([
"./assets/images/offline.gif",
"./assets/images/online.gif",
"./assets/images/alarm.gif",
]);
} else {
markerList.setImageSrc([
"./assets/images/offline.gif",
"./assets/images/online.gif",
"./assets/images/alarm.gif",
"./assets/images/stopaccon.gif",
]);
}
};
let push = function () {
let temp = {
lat: 33.161818,
lng: 105.523438,
};
let tempArray = [];
for (let index = 0; index < line.length; index++) {
const temp = line[index];
tempArray.push({
lat: temp.lat,
lng: temp.lng,
text: "测A" + (1000 + index),
state: 1,
type: 0,
direction: index * 30,
id: index,
a: new Date().getTime(),
b: new Date().getTime(),
c: new Date().getTime(),
d: new Date().getTime(),
e: new Date().getTime(),
f: new Date().getTime(),
g: new Date().getTime(),
h: new Date().getTime(),
i: new Date().getTime(),
j: new Date().getTime(),
});
}
markerList.push(tempArray);
setInterval(() => {
for (let index = 0; index < tempArray.length; index++) {
if (index === tempArray.length - 1) {
tempArray[index].lat = tempArray[0].lat;
tempArray[index].lng = tempArray[0].lng;
} else {
tempArray[index].lat = tempArray[index + 1].lat;
tempArray[index].lng = tempArray[index + 1].lng;
}
}
markerList.push(tempArray);
}, 5000);
};
let updateIcon = function () {
let one = {
lat: 33.161818,
lng: 105.523438,
text: "测A11111",
type: 0,
state: 3,
direction: 0,
id: 1,
};
markerList.updateIcon(one);
};
let openPopup = function () {
markerList.openPopup(1);
};
let removeMarkerList = function () {
markerList.remove();
};
//polyline
let iovPolyline = null;
let polyline_draw = function () {
iovPolyline = new IOVMap.Polyline(iovMap.map);
iovPolyline.draw(function (v) {
console.log(v);
});
};
let polyline_load = function () {
let latlngs = getLatlngsFromLine();
iovPolyline = new IOVMap.Polyline(iovMap.map);
iovPolyline.load(latlngs);
};
let polyline_loadTrack = function () {
iovPolyline = new IOVMap.Polyline(iovMap.map);
iovPolyline.loadTrack(line);
};
let polyline_edit = function () {
let latlngs = getLatlngsFromLine();
iovPolyline = new IOVMap.Polyline(iovMap.map);
iovPolyline.edit(latlngs, function (v) {
console.log(v);
});
};
let polyline_remove = function () {
iovPolyline.remove();
};
//polygon
let iovPolygon = null;
let polygon_draw = function () {
iovPolygon = new IOVMap.Polygon(iovMap.map);
iovPolygon.draw(function (v) {
console.log(v);
});
};
let polygon_load = function () {
let latlngs = getLatlngsFromLine();
iovPolygon = new IOVMap.Polygon(iovMap.map);
iovPolygon.load(latlngs);
};
let polygon_edit = function () {
let latlngs = getLatlngsFromLine();
iovPolygon = new IOVMap.Polygon(iovMap.map);
iovPolygon.edit(latlngs, function (v) {
console.log(v);
});
};
let polygon_remove = function () {
iovPolygon.remove();
};
//rectangle
let iovRectangle = null;
let rectangle_draw = function () {
iovRectangle = new IOVMap.Rectangle(iovMap.map);
iovRectangle.draw(function (v) {
console.log(v);
});
};
let rectangle_load = function () {
let start = [line[0].lat, line[0].lng];
let end = [line[line.length - 1].lat, line[line.length - 1].lng];
iovRectangle = new IOVMap.Rectangle(iovMap.map);
iovRectangle.load([start, end]);
};
let rectangle_edit = function () {
let start = [line[0].lat, line[0].lng];
let end = [line[line.length - 1].lat, line[line.length - 1].lng];
iovRectangle = new IOVMap.Rectangle(iovMap.map);
iovRectangle.edit([start, end], function (v) {
console.log(v);
});
};
let rectangle_remove = function () {
iovRectangle.remove();
};
//circle
let iovCircle = null;
let circle_draw = function () {
iovCircle = new IOVMap.Circle(iovMap.map);
iovCircle.draw(function (v, r) {
console.log(v + "," + r);
});
};
let circle_load = function () {
let start = [line[0].lat, line[0].lng];
let radius = 4;
iovCircle = new IOVMap.Circle(iovMap.map);
iovCircle.load(start, radius, { id: new Date().getTime(), color: 'red', weight: 1 }, function (v) {
console.log(v);
});
};
let circle_edit = function () {
let start = [line[0].lat, line[0].lng];
let radius = 4000;
iovCircle = new IOVMap.Circle(iovMap.map);
iovCircle.edit(start, radius, function (v, r) {
console.log(v + "," + r);
});
};
let circle_remove = function () {
iovCircle.remove();
};
//从线路获取经纬度列表
let getLatlngsFromLine = function () {
let result = [];
line.forEach((element) => {
result.push([element.lat, element.lng]);
});
return result;
};
// track
let iovTrack = null;
let trackMarkers = [];
let track_load = function () {
var latlngs = [
[39.898457, 116.391844],
[39.898595, 116.377947],
[39.898341, 116.368001],
[39.898063, 116.357144],
[39.899095, 116.351934],
[39.905871, 116.35067],
[39.922329, 116.3498],
[39.931017, 116.349671],
[39.939104, 116.349225],
[39.942233, 116.34991],
[39.947263, 116.366892],
[39.947568, 116.387537],
[39.947764, 116.401988],
[39.947929, 116.410824],
[39.947558, 116.42674],
[39.9397, 116.427338],
[39.932404, 116.427919],
[39.923109, 116.428377],
[39.907094, 116.429583],
[39.906858, 116.41404],
[39.906622, 116.405321],
[39.906324, 116.394954],
[39.906308, 116.391264],
[39.916611, 116.390748],
];
iovTrack = new IOVMap.TrackLine(iovMap.map);
const track = iovTrack.loadTrack(latlngs, { weight: 8 });
iovTrack.loadTrackDecorator(track, {
weight: 2,
color: "#FFFFFF",
stroke: true,
});
iovTrack.loadMarker({
lat: 39.898457,
lng: 116.391844,
direction: 0,
enableInfoWindow: true,
});
iovTrack.loadPopup('i am popup')
latlngs.forEach(latlng => {
let radius = 4;
const circle = new IOVMap.CircleMarker(iovMap.map);
circle.load(latlng, radius, { id: new Date().getTime(), color: 'red', weight: 1 }, "<h2>info</h2>", null, function (v) {
console.log(v);
});
trackMarkers.push(circle);
});
};
let track_update = function () {
let i = 0;
setInterval(() => {
iovTrack.updateMarker({
lat: 39.947263,
lng: 116.366892,
direction: 0 + i,
content: "ffff",
});
i += 45;
}, 1000 / 16);
};
let track_remove = function () {
iovTrack.remove();
trackMarkers.forEach(marker => {
marker.remove();
});
};
//tooltip
let iovTooltip = null;
let tooltip_load = function () {
iovTooltip = new IOVMap.Tooltip(iovMap.map);
iovTooltip.load(29.716608, 115.115005, { content: "<span style='color:red'>我是一个tooltip</span>", permanent: true, direction: 'right' });
};
let tooltip_remove = function () {
iovTooltip.remove();
};
</script>
</body>
</html>