|
@@ -0,0 +1,551 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
|
+ <title>协同作战地图</title>
|
|
|
+ <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body,
|
|
|
+ #mapF {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="mapF" class="map" tabindex="0"></div>
|
|
|
+
|
|
|
+ <div style="padding: 0 10px;">
|
|
|
+ <div style="position: absolute;top: 0;display:inline-block;width: 50%;padding-top: 10px;">
|
|
|
+ <select id="selectId" class="select02">
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="notification" style="display: none;">
|
|
|
+ <div class="mask"> </div>
|
|
|
+ <div class="content"> </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
|
|
|
+ <script type="text/javascript"
|
|
|
+ src="https://webapi.amap.com/maps?v=2.0&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
|
|
|
+ <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
|
|
|
+ <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
|
|
|
+ <script src="./js/M_select/M_select.js"></script>
|
|
|
+ <script type="text/javascript" src="./js/map-data.js"></script>
|
|
|
+ <script type="text/javascript" src="./js/map-text.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ var checkedArray = {
|
|
|
+ checkedData: 1,
|
|
|
+ checkedList: [
|
|
|
+ { value: 1, label: "消防站" },
|
|
|
+ { value: 2, label: "消防车" },
|
|
|
+ { value: 3, label: "监控" },
|
|
|
+ { value: 4, label: "重点单位" },
|
|
|
+ { value: 5, label: "消火栓/天然水源" },
|
|
|
+ ],
|
|
|
+ }//类型筛选
|
|
|
+
|
|
|
+ $.each(checkedArray.checkedList, function (i, item) {
|
|
|
+ $("#selectId").append(`<option value="${item.value}">${item.label}</option>`)
|
|
|
+ })
|
|
|
+ $(function () {
|
|
|
+ $(".select02").M_select({
|
|
|
+ // 手动添加下拉款图片(以html页面为起始位置写路径)
|
|
|
+ "Img": "./js/M_select/up4.png",
|
|
|
+ "Img2": "./js/M_select/down4.png",
|
|
|
+ "radius": "15px",
|
|
|
+ "Title": "--请选择--",
|
|
|
+ "inputName": "selected_value",
|
|
|
+ // 默认选中的值(参数值写需要选中的select的value值)
|
|
|
+ "selected": "1",
|
|
|
+ Succee: function () {
|
|
|
+ checkedArray.checkedData = parseInt($(".inputHidden").val())
|
|
|
+ mapCluster();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //点击遮罩层关闭
|
|
|
+ $('#notification .mask').on('click', function (e) {
|
|
|
+ $('#notification').css('display', 'none')
|
|
|
+
|
|
|
+ $('#notification .content #xxxx').remove()
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+
|
|
|
+ var cluster, markers = [];
|
|
|
+ var map = [];
|
|
|
+ var mapPolList = [];
|
|
|
+ var colorList = [
|
|
|
+ ['#99e', "#F33"],
|
|
|
+ ['#ee6', "#c38"],
|
|
|
+ ['#c38', "#F33"],
|
|
|
+ ['#6E7', '#F33'],
|
|
|
+ ['#6A7', "#F33"],
|
|
|
+ ['#EF7', "#F33"],
|
|
|
+ ['#AF7', "#F33"],
|
|
|
+ ['#BAC', "#F33"],
|
|
|
+ ['#BEF', "#F33"],
|
|
|
+ ['#BBB', "#F33"],
|
|
|
+ ['#EFA', "#F33"],
|
|
|
+ ['#FE6', "#F33"],
|
|
|
+ ['#7F6', "#F33"],
|
|
|
+ ['#7dc', "#F33"],
|
|
|
+ ];
|
|
|
+ var colorIndList = [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100]
|
|
|
+
|
|
|
+ var polygon1 = null //选中地图区域数据存储
|
|
|
+ var textList = [] //地图文字数据存储
|
|
|
+
|
|
|
+ var streetTown = ""//街镇信息存储
|
|
|
+ var streetTownList = [
|
|
|
+ { value: "", label: "全区" },
|
|
|
+ { value: "华漕镇", label: "华漕镇" },
|
|
|
+ { value: "虹桥镇", label: "虹桥镇" },
|
|
|
+ { value: "梅陇镇", label: "梅陇镇" },
|
|
|
+ { value: "七宝镇", label: "七宝镇" },
|
|
|
+ { value: "颛桥镇", label: "颛桥镇" },
|
|
|
+ { value: "马桥镇", label: "马桥镇" },
|
|
|
+ { value: "吴泾镇", label: "吴泾镇" },
|
|
|
+ { value: "浦江镇", label: "浦江镇" },
|
|
|
+ { value: "新虹街道", label: "新虹街道" },
|
|
|
+ { value: "古美路街道", label: "古美路街道" },
|
|
|
+ { value: "江川路街道", label: "江川路街道" },
|
|
|
+ { value: "浦锦街道", label: "浦锦街道" },
|
|
|
+ { value: "莘庄镇", label: "莘庄镇" },
|
|
|
+ ]
|
|
|
+
|
|
|
+ var tankuangXY = {}//撒点弹框坐标
|
|
|
+ var arrayList = {}//撒点弹框数据存储
|
|
|
+
|
|
|
+
|
|
|
+ function initMap() {
|
|
|
+ map = new AMap.Map("mapF", {
|
|
|
+ // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
|
|
|
+ resizeEnable: true,
|
|
|
+ zoom: 13,
|
|
|
+ zooms: [3, 16],
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ AMap.plugin(["AMap.Geolocation"], () => {
|
|
|
+ var geolocation = new AMap.Geolocation({
|
|
|
+ showButton: false, //是否显示定位按钮
|
|
|
+ buttonPosition: "RT", //定位按钮的位置
|
|
|
+ /* LT LB RT RB */
|
|
|
+ buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
|
|
|
+ zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
|
|
|
+ showMarker: true, //是否显示定位点
|
|
|
+ markerOptions: {
|
|
|
+ //自定义定位点样式,同Marker的Options
|
|
|
+ offset: new AMap.Pixel(-18, -36),
|
|
|
+ content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
|
|
|
+ },
|
|
|
+ convert: true,
|
|
|
+ showCircle: true, //是否显示定位精度圈
|
|
|
+ circleOptions: {
|
|
|
+ //定位精度圈的样式
|
|
|
+ strokeColor: "#0093FF",
|
|
|
+ noSelect: true,
|
|
|
+ strokeOpacity: 0.5,
|
|
|
+ strokeWeight: 1,
|
|
|
+ fillColor: "#02B0FF",
|
|
|
+ fillOpacity: 0.25,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ map.addControl(geolocation);
|
|
|
+ // geolocation.getCurrentPosition();
|
|
|
+ });
|
|
|
+
|
|
|
+ mapPolList = mapData.map((el, ind) => {
|
|
|
+ // console.log(val)
|
|
|
+
|
|
|
+ let color = colorList[0];
|
|
|
+
|
|
|
+ let polygon = new AMap.Polygon({
|
|
|
+ map: this.map,
|
|
|
+ zIndex: 2,
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ path: el.value,
|
|
|
+ fillColor: color[0],
|
|
|
+ strokeColor: color[1],
|
|
|
+ });
|
|
|
+
|
|
|
+ //插入覆盖物自定义数据
|
|
|
+ polygon.setExtData(el);
|
|
|
+
|
|
|
+ //鼠标移入覆盖物事件
|
|
|
+ polygon.on("mouseover", () => {
|
|
|
+ polygon.setOptions({
|
|
|
+ fillOpacity: 0.4,
|
|
|
+ fillColor: color[1],
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //鼠标移出覆盖物事件
|
|
|
+ polygon.on("mouseout", (val) => {
|
|
|
+ if (streetTown) {
|
|
|
+ if (streetTown == polygon.getExtData().name) {
|
|
|
+ polygon.setOptions({
|
|
|
+ fillOpacity: 0.4,
|
|
|
+ fillColor: color[1],
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ polygon.setOptions({
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ fillColor: color[0],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ polygon.setOptions({
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ fillColor: color[0],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ polygon.on("click", (handler, context) => {
|
|
|
+ if (polygon1) {
|
|
|
+ //修改上一次选中样式
|
|
|
+ polygon1.setOptions({
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ fillColor: color[0],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //存储点击区域元素
|
|
|
+ polygon1 = polygon;
|
|
|
+
|
|
|
+ if (streetTown === polygon.getExtData().name) {
|
|
|
+ //修改全局街镇数据
|
|
|
+ streetTown = "";
|
|
|
+
|
|
|
+ //修改上一次选中样式
|
|
|
+ polygon1.setOptions({
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ fillColor: color[0],
|
|
|
+ });
|
|
|
+ polygon1 = null;
|
|
|
+ } else {
|
|
|
+ //修改全局街镇数据
|
|
|
+ streetTown = polygon.getExtData().name;
|
|
|
+
|
|
|
+ //修改上一次选中样式
|
|
|
+ polygon1.setOptions({
|
|
|
+ fillOpacity: 0.4,
|
|
|
+ fillColor: color[1],
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ mapCluster()
|
|
|
+
|
|
|
+ //销毁点位信息弹窗
|
|
|
+ map.clearInfoWindow();
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ mapText.map((val, ind) => {
|
|
|
+ let text = new AMap.Text({
|
|
|
+ zIndex: 1,
|
|
|
+ style: {
|
|
|
+ color: "black",
|
|
|
+ backgroundColor: "transparent",
|
|
|
+ border: "none",
|
|
|
+ },
|
|
|
+ position: val.position,
|
|
|
+ text: val.name,
|
|
|
+ angle: val.angle,
|
|
|
+ });
|
|
|
+
|
|
|
+ text.setMap(map);
|
|
|
+
|
|
|
+ textList.push(text);
|
|
|
+ });
|
|
|
+
|
|
|
+ map.setFitView();
|
|
|
+
|
|
|
+ var logMapinfo = function () {
|
|
|
+ var zoom = map.getZoom(); //获取当前地图级别
|
|
|
+
|
|
|
+ var dom = document.getElementsByClassName("amap-overlay-text-container");
|
|
|
+ for (let i = 0; i <= 13; i++) {
|
|
|
+ if (zoom > 12) {
|
|
|
+ dom[i].style.cssText = "display: block;font-size:13px !important;background: transparent;border: 0px;";
|
|
|
+ } else if (zoom > 10.5 || zoom > 11) {
|
|
|
+ dom[i].style.cssText = "display: block;font-size:11px !important;background: transparent;border: 0px;";
|
|
|
+ } else if (zoom < 10) {
|
|
|
+ dom[i].style.cssText = "display:none !important;font-size:11px;background: transparent;border: 0px;";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ map.on("zoomstart", logMapinfo);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @聚合撒点
|
|
|
+ * @param {数据list} data
|
|
|
+ * @param {页面类型} pageType
|
|
|
+ * @param {类型} type
|
|
|
+ */
|
|
|
+ function initMarkers(data, pageType, type) {
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ var tag = 1; //1.自定义图标 2.完全自定义 3.默认
|
|
|
+ var style = ""; //地图最大化小图标
|
|
|
+ var points = []; //地图撒点处理数据存储
|
|
|
+
|
|
|
+ if (pageType === "警情综合处置") {
|
|
|
+ data.forEach((val) => {
|
|
|
+ points.push({ lnglat: [val.longitude, val.latitude], array: val });
|
|
|
+ });
|
|
|
+
|
|
|
+ if (type) {
|
|
|
+ if (type == 1) {
|
|
|
+ //消防站
|
|
|
+ style = `background: url('./img/map1.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ } else if (type == 2) {
|
|
|
+ //消防车
|
|
|
+ style = `background: url('./img/map2.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ } else if (type == 3) {
|
|
|
+ //监控
|
|
|
+ style = `background: url('./img/map3.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ } else if (type == 4) {
|
|
|
+ //重点单位
|
|
|
+ style = `background: url('./img/map4.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ } else if (type == 5) {
|
|
|
+ //消火栓/天然水源
|
|
|
+ style = `background: url('./img/map5.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ } else if (type == 6) {
|
|
|
+ //实时告警
|
|
|
+ style = `background: url('./img/map6.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ style = `background-color: hsla(180, 100%, 50%, 0.5); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var _renderMarker = function (context) {
|
|
|
+ var content = `<div style="${style}"></div>`;
|
|
|
+ var offset = new AMap.Pixel(-9, -9);
|
|
|
+ context.marker.setContent(content);
|
|
|
+ context.marker.setOffset(offset);
|
|
|
+
|
|
|
+ // 给每个点坐标绑定鼠标经过事件,这里是实现点击功能的重点
|
|
|
+ context.marker.on("mouseover", (e) => {
|
|
|
+ tankuangXY = { x: e.pixel.x, y: e.pixel.y };
|
|
|
+
|
|
|
+ if (pageType === "警情综合处置") {
|
|
|
+ if (type !== 6) {
|
|
|
+ // console.log(context.data[0].array);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ address
|
|
|
+ :
|
|
|
+ "上海市闵行区浦江镇沿浦路15号"
|
|
|
+ companyName
|
|
|
+ :
|
|
|
+ "上海闵行区晨星敬老院"
|
|
|
+ companyTypeName
|
|
|
+ :
|
|
|
+ "重点单位"
|
|
|
+ id
|
|
|
+ :
|
|
|
+ 371
|
|
|
+ latitude
|
|
|
+ :
|
|
|
+ "31.01668"
|
|
|
+ linkPhone
|
|
|
+ :
|
|
|
+ "13472846477"
|
|
|
+ longitude
|
|
|
+ :
|
|
|
+ "121.54048"
|
|
|
+ streetTown
|
|
|
+ :
|
|
|
+ "浦江镇"
|
|
|
+
|
|
|
+ context.marker.on("click", (e) => {
|
|
|
+ if (pageType === "警情综合处置") {
|
|
|
+ if (type == 1) {
|
|
|
+
|
|
|
+ $("#notification .content").append(
|
|
|
+ `
|
|
|
+ <div id="xxxx">
|
|
|
+ <div class="title">${context.data[0].array.stationName}</div>
|
|
|
+ <div class="borderBottom"></div>
|
|
|
+ <div class="ctn">
|
|
|
+ <div style="text-align: center;">经度:${context.data[0].array.longitude}</div>
|
|
|
+ <div style="text-align: center;">纬度:${context.data[0].array.latitude}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `)
|
|
|
+
|
|
|
+ $('#notification').css('display', 'block')
|
|
|
+
|
|
|
+ } else if (type == 4) {
|
|
|
+ $("#notification .content").append(
|
|
|
+ `
|
|
|
+ <div id="xxxx">
|
|
|
+ <div class="title">${context.data[0].array.companyName}</div>
|
|
|
+ <div class="borderBottom"></div>
|
|
|
+ <div class="ctn">
|
|
|
+ <div style="width:100%">地址:${context.data[0].array.address}</div>
|
|
|
+ <div style="width:100%">单位性质:${context.data[0].array.companyTypeName}</div>
|
|
|
+ </div>
|
|
|
+ <div class="ctn">
|
|
|
+ <div >所属街镇:${context.data[0].array.streetTown}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `)
|
|
|
+
|
|
|
+ $('#notification').css('display', 'block')
|
|
|
+ } else if (type == 5) {
|
|
|
+ $("#notification .content").append(
|
|
|
+ `
|
|
|
+ <div id="xxxx">
|
|
|
+ <div class="title">${context.data[0].array.waterName}</div>
|
|
|
+ <div class="borderBottom"></div>
|
|
|
+ <div class="ctn">
|
|
|
+ <div style="width:100%">水源所在位置:${context.data[0].array.waterAddress}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `)
|
|
|
+
|
|
|
+ $('#notification').css('display', 'block')
|
|
|
+ } else if (type == 6) {
|
|
|
+ //实时告警
|
|
|
+ console.log(context.data[0].array);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(context.data[0].array);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ if (cluster) {
|
|
|
+ cluster.setMap(null);
|
|
|
+ }
|
|
|
+ if (tag == 2) {
|
|
|
+ //完全自定义
|
|
|
+ this.map.plugin(["AMap.MarkerClusterer"], function () {
|
|
|
+ cluster = new AMap.MarkerCluster(map, points, {
|
|
|
+ gridSize: 80, // 设置网格像素大小
|
|
|
+ renderClusterMarker: function (context) {
|
|
|
+ var factor = Math.pow(context.count / points.length, 1 / 18);
|
|
|
+ var div = document.createElement("div");
|
|
|
+ var Hue = 180 - factor * 180;
|
|
|
+ var bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
|
|
|
+ var fontColor = "hsla(" + Hue + ",100%,90%,1)";
|
|
|
+ var borderColor = "hsla(" + Hue + ",100%,40%,1)";
|
|
|
+ var shadowColor = "hsla(" + Hue + ",100%,90%,1)";
|
|
|
+ div.style.backgroundColor = bgColor;
|
|
|
+ var size = Math.round(30 + Math.pow(context.count / points.length, 1 / 5) * 20);
|
|
|
+ div.style.width = div.style.height = size + "px";
|
|
|
+ div.style.border = "solid 1px " + borderColor;
|
|
|
+ div.style.borderRadius = size / 2 + "px";
|
|
|
+ div.style.boxShadow = "0 0 5px " + shadowColor;
|
|
|
+ div.innerHTML = context.count;
|
|
|
+ div.style.lineHeight = size + "px";
|
|
|
+ div.style.color = fontColor;
|
|
|
+ div.style.fontSize = "14px";
|
|
|
+ div.style.textAlign = "center";
|
|
|
+ context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
|
+ context.marker.setContent(div);
|
|
|
+ }, // 自定义聚合点样式
|
|
|
+ renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (tag == 1) {
|
|
|
+ //自定义图标
|
|
|
+ var sts = [{
|
|
|
+ url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
|
|
|
+ size: new AMap.Size(32, 32),
|
|
|
+ offset: new AMap.Pixel(-16, -16),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://a.amap.com/jsapi_demos/static/images/green.png",
|
|
|
+ size: new AMap.Size(32, 32),
|
|
|
+ offset: new AMap.Pixel(-16, -16),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
|
|
|
+ size: new AMap.Size(36, 36),
|
|
|
+ offset: new AMap.Pixel(-18, -18),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://a.amap.com/jsapi_demos/static/images/red.png",
|
|
|
+ size: new AMap.Size(48, 48),
|
|
|
+ offset: new AMap.Pixel(-24, -24),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
|
|
|
+ size: new AMap.Size(48, 48),
|
|
|
+ offset: new AMap.Pixel(-24, -24),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ map.plugin(["AMap.MarkerCluster"], function () {
|
|
|
+ cluster = new AMap.MarkerCluster(map, points, {
|
|
|
+ styles: sts,
|
|
|
+ gridSize: 80,
|
|
|
+ renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //默认样式
|
|
|
+ map.plugin(["AMap.MarkerCluster"], function () {
|
|
|
+ cluster = new AMap.MarkerCluster(map, points, { gridSize: 80 });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @高德地图聚合撒点
|
|
|
+ */
|
|
|
+ function mapCluster() {
|
|
|
+ var label = "";
|
|
|
+ checkedArray.checkedList.forEach((val) => {
|
|
|
+ if (val.value == checkedArray.checkedData) {
|
|
|
+ label = val.label;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ $.get('http://mobile.usky.cn:8099/prod-api/service-fire/demPoliceInfo/synthesizePoliceSituationScatterer', {
|
|
|
+ streetTown: streetTown,
|
|
|
+ scattererType: label
|
|
|
+ }, function (res) {
|
|
|
+ console.log(res)
|
|
|
+
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ initMarkers(res.data, "警情综合处置", checkedArray.checkedData);
|
|
|
+ } else {
|
|
|
+ initMarkers([], "警情综合处置", checkedArray.checkedData);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //
|
|
|
+ }
|
|
|
+
|
|
|
+ initMap();
|
|
|
+ mapCluster();
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|