From 8c78eae060761830ffdd5d549b2e0a3aedba2176 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Fri, 01 Jun 2018 11:33:30 +0800
Subject: [PATCH] 地图布点辅助工具
---
src/main/webapp/img/star.png | 0
src/main/webapp/assets/bullets.json | 10 +
src/main/webapp/img/none.png | 0
src/main/webapp/page/scheme-helper.html | 372 +++++++++++++++++++++++++++++++++++++++++++++++++++++
src/main/webapp/img/select.png | 0
src/main/webapp/img/mpoint.png | 0
6 files changed, 382 insertions(+), 0 deletions(-)
diff --git a/src/main/webapp/assets/bullets.json b/src/main/webapp/assets/bullets.json
new file mode 100644
index 0000000..7e57daf
--- /dev/null
+++ b/src/main/webapp/assets/bullets.json
@@ -0,0 +1,10 @@
+[
+ {"title":"���������2.5","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[900],"markers":[900],"state":1},
+ {"title":"PM10","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[550],"markers":[550],"state":1},
+ {"title":"������������","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[400],"markers":[400],"state":1},
+ {"title":"PM2.5","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[100],"markers":[100],"state":1},
+ {"title":"���������2.5","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[900],"markers":[900],"state":1},
+ {"title":"PM10","subtitle":"(ug/m��)","ranges":[350,500,600,800],"measures":[550],"markers":[550],"state":1},
+ {"title":"������������","subtitle":"(ug/m��)","ranges":[-350,-500,-600,-800],"measures":[-400],"markers":[-400]},
+ {"title":"PM2.5","subtitle":"(ug/m��)","ranges":[800,800,800,800],"measures":[100],"markers":[-100]}
+]
\ No newline at end of file
diff --git a/src/main/webapp/img/mpoint.png b/src/main/webapp/img/mpoint.png
new file mode 100644
index 0000000..03113dc
--- /dev/null
+++ b/src/main/webapp/img/mpoint.png
Binary files differ
diff --git a/src/main/webapp/img/none.png b/src/main/webapp/img/none.png
new file mode 100644
index 0000000..9cd2d37
--- /dev/null
+++ b/src/main/webapp/img/none.png
Binary files differ
diff --git a/src/main/webapp/img/select.png b/src/main/webapp/img/select.png
new file mode 100644
index 0000000..ab6bd94
--- /dev/null
+++ b/src/main/webapp/img/select.png
Binary files differ
diff --git a/src/main/webapp/img/star.png b/src/main/webapp/img/star.png
new file mode 100644
index 0000000..f45a6fd
--- /dev/null
+++ b/src/main/webapp/img/star.png
Binary files differ
diff --git a/src/main/webapp/page/scheme-helper.html b/src/main/webapp/page/scheme-helper.html
new file mode 100644
index 0000000..4565476
--- /dev/null
+++ b/src/main/webapp/page/scheme-helper.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>������������������</title>
+ <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
+ <script type="text/javascript" src="/js/jquery.min.js"></script>
+</head>
+<style type="text/css">
+ body,
+ html,
+ .main-body,
+ #mapCanvas {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ z-index: 0;
+ font-size: 14px;
+ font-family: "������������";
+ }
+
+ .popup-box {
+ position: absolute;
+ z-index: 1;
+ background-color: white;
+ top: 3%;
+ left: 1%;
+ padding: 14px 10px 0px;
+ text-align: center;
+ width: 280px;
+ height: 110px;
+ }
+
+ .search-box {
+ width: 220px;
+ }
+
+ .anchorBL {
+ display: none;
+ }
+
+ .click-handle-title {
+ text-align: left;
+ }
+
+ .marker-total {
+ text-align: left;
+ padding-left: 2px;
+ }
+</style>
+<div class="main-body">
+ <div class="popup-box">
+ <table>
+ <tr>
+ <td>
+ <input class="search-box" type="input" />
+ </td>
+ <td>
+ <input class="search-btn" type="button" value="������" />
+ </td>
+ </tr>
+ </table>
+ <table>
+ <tr>
+ <td>
+ <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" />
+ </td>
+ <td class="click-handle-title">
+ ���������
+ </td>
+ <td>
+
+ </td>
+ <td>
+ <input id="clickHandle_3" type="radio" name="mapClickHandle" value="3" />
+ </td>
+ <td class="click-handle-title">
+ ������������
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <input id="clickHandle_1" type="radio" name="mapClickHandle" value="1" />
+ </td>
+ <td class="click-handle-title">
+ [������]������
+ </td>
+ <td>
+
+ </td>
+ <td>
+ <input id="clickHandle_2" type="radio" name="mapClickHandle" value="2" />
+ </td>
+ <td class="click-handle-title">
+ [���������]������
+ </td>
+
+ </tr>
+ <tr>
+ <td colspan="2" class="marker-total">
+ [������]���������
+ <span id="mpointCount">0</span>
+ </td>
+ <td>
+
+ </td>
+ <td colspan="2" class="marker-total">
+ [���������]���������
+ <span id="starCount">0</span>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div id="mapCanvas"></div>
+</div>
+
+<body>
+ <script>
+ var baiduMap;
+ var markerManager = {
+ data: {},
+ bind: {}
+ };
+ markerManager.bindSelect = function (key, select) {
+ this.bind[key] = jQuery(select);
+ }
+ markerManager.reloadBind = function (key) {
+ var select = this.bind[key];
+ if (!!select && !!this.data[key]) {
+ select.text(this.data[key].length);
+ } else {
+ if (!this.data[key]) {
+ throw new Error("int markerManager key:" + key + ",don't have data");
+ } else {
+ console.log("int markerManager key:" + key + ",don't bind select");
+ }
+ }
+ }
+ markerManager.addMarker = function (key, marker) {
+ this.data[key] = !!this.data[key] ? this.data[key] : [];
+ this.data[key].push(marker);
+ this.reloadBind(key);
+ }
+ markerManager.addMpoint = function (marker) {
+ this.addMarker("mpoint", marker);
+ }
+ markerManager.addMpoint = function (marker) {
+ this.addMarker("star", marker);
+ }
+ markerManager.removeMarker = function (key, marker) {
+ if (!!this.data[key]) {
+ var markers = this.data[key];
+ for (var index in markers) {
+ var m = markers[index];
+ if (m == marker) {
+ markers.splice(index, 1);
+ }
+ }
+ this.reloadBind(key);
+ }
+ }
+ // 0,������������1������������������2���������������������3���������������
+ function clickHandle(args, key) {
+ var handleValue = parseInt($("input[name='mapClickHandle']:checked").val());
+ switch (handleValue) {
+ case 0:
+ break;
+ case 1:
+ addMpoint(args.point);
+ break;
+ case 2:
+ addStar(args.point);
+ break;
+ case 3:
+ removeOverlay(key, this);
+ break;
+ }
+ }
+ var switchMenuItems = {};
+ switchClickHanld = function (value) {
+ value = value.toString();
+ $("input[name='mapClickHandle']").each(function () {
+ var handleValue = $(this).val().toString();
+ if (handleValue === value) {
+ $("#clickHandle_" + value).prop("checked", true);
+ $("#clickHandle_" + value).attr("checked", true);
+ // $("#clickHandle_" + value).checked = "checked";
+ }
+ });
+ for (var key in switchMenuItems) {
+ var menuItem = switchMenuItems[key];
+ if (value == key) {
+ menuItem.setIcon("/img/select.png");
+ } else {
+ menuItem.setIcon("/img/none.png");
+ }
+ }
+ }
+
+ function clearOverlays() {
+ for (var key in markerManager.data) {
+ markerManager.data[key] = [];
+ markerManager.reloadBind(key);
+ }
+ baiduMap.clearOverlays();
+ }
+
+ function removeOverlay(key, marker) {
+ baiduMap.removeOverlay(marker);
+ markerManager.removeMarker(key, marker);
+ }
+
+ function addMarker(point, option) {
+ var marker = new BMap.Marker(point, option);
+ marker.addEventListener("click", function () {
+ var args = Array.prototype.slice.call(arguments);
+ clickHandle.call(marker, args, option.key);
+ });
+ var baiduMap = this.baiduMap;
+ this.baiduMap.addOverlay(marker);
+ markerManager.addMarker(option.key, marker);
+ //������������������
+ var markerMenu = new BMap.ContextMenu();
+ markerMenu.addItem(new BMap.MenuItem('������', function () {
+ removeOverlay(option.key, marker);
+ }));
+ marker.addContextMenu(markerMenu);
+ }
+
+ function addMpoint(point) {
+ var option = {
+ enableDragging: true
+ };
+ option.icon = new BMap.Icon(
+ "/img/mpoint.png",
+ new BMap.Size(19, 30)
+ );
+ option.key = "mpoint";
+ option.offset = new BMap.Size(0, -15);
+ addMarker(point, option);
+ }
+
+ function addStar(point) {
+ var option = {
+ enableDragging: true
+ };
+ option.icon = new BMap.Icon(
+ "/img/star.png",
+ new BMap.Size(31, 31)
+ );
+ option.key = "star";
+ // option.offset = new BMap.Size(0,-15);
+ addMarker(point, option);
+ }
+
+ function mapInit() {
+ var map = new BMap.Map("mapCanvas");
+ this.baiduMap = map;
+ map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // ���������������,������������������������������������
+ map.setDefaultCursor('Crosshair');
+ map.setCurrentCity("������"); // ��������������������������� ������������������������
+ map.enableScrollWheelZoom(true); //������������������������
+ var menu = new BMap.ContextMenu();
+
+ var txtMenuItem = [{
+ handleType: 0,
+ text: '���������',
+ select: true,
+ switch: true,
+ callback: function () {
+ switchClickHanld(0);
+ },
+ },
+ {
+ handleType: 1,
+ text: '[������]������',
+ switch: true,
+ callback: function () {
+ switchClickHanld(1);
+ }
+ },
+ {
+ handleType: 2,
+ text: '[���������]������',
+ switch: true,
+ callback: function () {
+ switchClickHanld(2);
+ },
+ },
+ {
+ handleType: 3,
+ text: '������������',
+ switch: true,
+ callback: function () {
+ switchClickHanld(3);
+ },
+ },
+ {
+ seperator: true
+ },
+ {
+ text: '���������������',
+ callback: function () {
+ var popupBox = $(".popup-box");
+ if (popupBox.css('display') !== "block") {
+ popupBox.css('display', "block");
+ this.setText("���������������");
+ } else {
+ popupBox.css('display', "none");
+ this.setText("���������������");
+ }
+ }
+ },
+ {
+ text: '������������',
+ callback: function (menuItem) {
+ var result = confirm('������! ������! ������! ������������������������������')
+ if (result) {
+ clearOverlays();
+ }
+ }
+ }
+ ];
+ for (var i = 0; i < txtMenuItem.length; i++) {
+ var item = txtMenuItem[i];
+ if (!!item['seperator']) {
+ menu.addSeparator();
+ } else {
+ if (item.select) {
+ item.icon = "/img/select.png";
+ } else {
+ item.icon = "/img/none.png";
+ }
+ var menuItem = new BMap.MenuItem(item.text, item.callback, {
+ width: 120,
+ iconUrl: item.icon
+ });
+ menu.addItem(menuItem);
+ if (item.switch) {
+ switchMenuItems[item.handleType] = menuItem;
+ }
+ }
+ }
+ map.addContextMenu(menu);
+ map.addEventListener(
+ "click",
+ clickHandle
+ );
+ return map;
+ }
+ (function ($) {
+ var map = mapInit();
+ // ������������
+ $('.search-btn').on('click', function (args) {
+ var searchValue = $('.search-box').val();
+ if (!!searchValue) {
+ baiduMap.centerAndZoom(searchValue);
+ }
+ });
+ markerManager.bindSelect("mpoint", "#mpointCount");
+ markerManager.bindSelect("star", "#starCount");
+ $("input[name='mapClickHandle']").each(function () {
+ var handleValue = $(this).val().toString();
+ $(this).click(function(){
+ switchClickHanld(handleValue);
+ });
+ });
+ })($, baiduMap);
+ </script>
+</body>
\ No newline at end of file
--
Gitblit v1.8.0