提交开源任务材料

README.md

@@ -1,3 +1,6 @@
 # open-JSD-7866
 
-JSD-7866 开源任务材料
+jsd-7866 开源材料\
+免责说明：该源码为第三方爱好者提供，不保证源码和方案的可靠性，也不提供任何形式的源码教学指导和协助！\
+仅作为开发者学习参考使用！禁止用于任何商业用途！\
+为保护开发者隐私，开发者信息已隐去！若原开发者希望公开自己的信息，可联系hugh处理。

plugin.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><plugin>
+    <id>com.fr.plugin.zzl.point.map</id>
+    <name><![CDATA[定制点地图]]></name>
+    <active>yes</active>
+    <version>1.0.0</version>
+    <env-version>10.0</env-version>
+    <jartime>2020-11-02</jartime>
+    <vendor>fr.open</vendor>
+    <description><![CDATA[定制点地图]]></description>
+    <change-notes><![CDATA[
+      [2021-12-31]初始化插定制点地图<br/>
+    ]]></change-notes>
+    <extra-core>
+    </extra-core>
+    <lifecycle-monitor class="com.fr.plugin.POMapLifeCycleMonitor"/>
+
+<!--    <extra-chart>-->
+<!--        <IndependentChartProvider class="com.fr.plugin.provider.POMapExtentChartProvider" plotID="PO_MAP_CHART"/>-->
+<!--    </extra-chart>-->
+
+    <extra-chart>
+        <ChartTypeProvider class="com.fr.plugin.provider.POMapChatType" plotID="PO_MAP_CHART"/>
+    </extra-chart>
+<!--    <extra-decision>-->
+<!--        <WebResourceProvider class="com.fr.plugin.PointMapResource"/>-->
+<!--    </extra-decision>-->
+    <extra-core>
+        <WebService class="com.fr.plugin.PointMapService"/>
+    </extra-core>
+    <extra-chart-designer>
+        <ChartTypeUIProvider class="com.fr.plugin.provider.POMapUI" plotID="PO_MAP_CHART"/>
+    </extra-chart-designer>
+<!--    <extra-chart-designer>-->
+<!--        <IndependentChartUIProvider class="com.fr.plugin.provider.POMapExtendedChartUIProvider" plotID="PO_MAP_CHART"/>-->
+<!--    </extra-chart-designer>-->
+    <function-recorder class="com.fr.plugin.provider.POMapChatType"/>
+</plugin>

src/main/java/com/fr/plugin/POMapJavaScriptPlaceHolder.java

@@ -0,0 +1,13 @@
+package com.fr.plugin;
+
+import com.fr.stable.fun.JavaScriptPlaceHolder;
+import com.fr.stable.fun.impl.AbstractJavaScriptPlaceHolder;
+
+public class POMapJavaScriptPlaceHolder extends AbstractJavaScriptPlaceHolder {
+    private String key = "6bda7bee13cc20deca6ec53e54290cd6";
+    public JavaScriptPlaceHolder.ScriptTag[] holderScripts() {
+        return new ScriptTag[]{
+                JavaScriptPlaceHolder.ScriptTag.build().src("https://webapi.amap.com/maps?v=1.4.15&key="+key),
+        };
+    }
+}

src/main/java/com/fr/plugin/POMapLifeCycleMonitor.java

@@ -0,0 +1,16 @@
+package com.fr.plugin;
+
+import com.fr.plugin.context.PluginContext;
+import com.fr.plugin.observer.inner.AbstractPluginLifecycleMonitor;
+
+public class POMapLifeCycleMonitor extends AbstractPluginLifecycleMonitor {
+    @Override
+    public void afterRun(PluginContext pluginContext) {
+
+    }
+
+    @Override
+    public void beforeStop(PluginContext pluginContext) {
+
+    }
+}

src/main/java/com/fr/plugin/PointMapResource.java

@@ -0,0 +1,31 @@
+package com.fr.plugin;
+
+import com.fr.decision.fun.impl.AbstractWebResourceProvider;
+import com.fr.decision.web.MainComponent;
+import com.fr.form.web.FormMainComponent;
+import com.fr.plugin.components.MapComponent;
+import com.fr.web.struct.Atom;
+
+public class PointMapResource  extends AbstractWebResourceProvider {
+
+    /**
+     * 需要附加到的主组件
+     *
+     * @return 主组件
+     */
+
+    @Override
+    public Atom attach() {
+        return FormMainComponent.KEY;
+    }
+
+    /**
+     * 客户端所需的组件
+     *
+     * @return 组件
+     */
+    @Override
+    public Atom client() {
+        return MapComponent.KEY;
+    }
+}

src/main/java/com/fr/plugin/PointMapService.java

@@ -0,0 +1,34 @@
+package com.fr.plugin;
+import com.fr.base.TableData;
+import com.fr.form.main.Form;
+import com.fr.json.JSONObject;
+import com.fr.plugin.model.PointModel;
+import com.fr.script.Calculator;
+import com.fr.stable.fun.Service;
+import com.fr.web.core.FormSessionIDInfor;
+import com.fr.web.utils.WebUtils;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.util.ArrayList;
+import java.util.List;
+
+public class PointMapService implements Service {
+    @Override
+    public String actionOP() {
+        return "mapCarData";
+    }
+
+    @Override
+    public void process(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, String op, String cmd) throws Exception {
+//        String sessionId = httpServletRequest.getParameter("sessionId");
+//        String paths = httpServletRequest.getParameter("path");
+//        JSONObject jsonObject = new JSONObject();
+//        if (session != null) {
+//            Form form = session.getForm2Show();
+//            TableData cars = form.getTableData("cars");
+//
+//        }
+//        WebUtils.printAsJSON(httpServletResponse,jsonObject);
+    }
+}

src/main/java/com/fr/plugin/chart/POMapChart.java

@@ -0,0 +1,90 @@
+package com.fr.plugin.chart;
+
+import com.fr.extended.chart.AbstractChart;
+import com.fr.extended.chart.HyperLinkPara;
+import com.fr.extended.chart.StringFormula;
+import com.fr.extended.chart.export.ExportProcessor;
+import com.fr.general.GeneralUtils;
+import com.fr.json.*;
+import com.fr.log.FineLoggerFactory;
+import com.fr.stable.web.Repository;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class POMapChart extends AbstractChart<POMapDataConfig> {
+
+    private static final String ID = "ZZL_PO_MAP_CHART";
+    private static final String NAME = "定制点地图";
+
+    public POMapChart() {
+        FineLoggerFactory.getLogger().error("定制点地图初始化POMapChart");
+    }
+
+    @Override
+    protected String getChartID() {
+        return ID;
+    }
+
+    @Override
+    public String getChartName() {
+        return NAME;
+    }
+
+    @Override
+    protected String demoImagePath() {
+        return "com/fr/plugin/img/logo.png";
+    }
+
+    @Override
+    protected void addJSON(POMapDataConfig dataConfig, JSONObject jsonObject, Repository repo, JSONPara para) throws JSONException {
+        jsonObject.put("trialLicenseWater", "");
+        List<Object> position = new ArrayList<>();
+        List<Object> titles = new ArrayList<>();
+        List<Object> area = new ArrayList<>();
+        if (dataConfig != null) {
+            if (dataConfig.getX() != null) {
+                area = dataConfig.getX().getValues();
+            }
+
+            if (dataConfig.getY() != null) {
+                position = dataConfig.getY().getValues();
+            }
+            if (dataConfig.getTitle() != null) {
+                titles = dataConfig.getTitle().getValues();
+            }
+        }
+        jsonObject.put("lat", new JSONArray(area));
+        jsonObject.put("lng", new JSONArray(position));
+        jsonObject.put("titles", new JSONArray(titles));
+    }
+
+    @Override
+    protected String[] requiredJS() {
+        return new String[]{
+                "/com/fr/plugin/js/map.js",
+        };
+    }
+
+    @Override
+    protected String[] requiredCSS() {
+        return new String[]{
+                "/com/fr/plugin/css/map.css",
+        };
+    }
+
+    @Override
+    protected String wrapperName() {
+        return "poMapWrapper";
+    }
+
+    @Override
+    protected HyperLinkPara[] hyperLinkParas() {
+        return new HyperLinkPara[0];
+    }
+
+    @Override
+    protected List<StringFormula> formulas() {
+        return null;
+    }
+}

src/main/java/com/fr/plugin/chart/POMapChartData.java

@@ -0,0 +1,282 @@
+package com.fr.plugin.chart;
+
+import com.fanruan.api.cal.FormulaKit;
+import com.fanruan.api.report.chart.BaseChartWithData;
+import com.fanruan.api.util.IOKit;
+import com.fanruan.api.util.StringKit;
+import com.fr.base.BaseFormula;
+import com.fr.base.chart.cross.FormulaProcessor;
+import com.fr.chart.ChartWebParaProvider;
+import com.fr.form.ui.FRChartCategory;
+import com.fr.json.JSONArray;
+import com.fr.json.JSONObject;
+import com.fr.log.FineLoggerFactory;
+import com.fr.stable.StringUtils;
+import com.fr.stable.xml.XMLPrintWriter;
+import com.fr.stable.xml.XMLableReader;
+
+import java.awt.*;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Objects;
+
+public class POMapChartData extends BaseChartWithData {
+    @Override
+    public String getID() {
+        return "ZZL_PO_MAP_CHART";
+    }
+
+    private String pointIcon;
+    private String center;
+    private String fontName;
+    private String fontSize;
+    private Color fontColor;
+    private Color textBoxColor;
+    private String lineSize;
+    private String lineStyle;
+    private String textBoxWidth;
+    private String mapUrl;
+    private String textBoxLeft;
+
+    public String getTextBoxLeft() {
+        return textBoxLeft;
+    }
+
+    public void setTextBoxLeft(String textBoxLeft) {
+        this.textBoxLeft = textBoxLeft;
+    }
+
+    public String getMapUrl() {
+        return mapUrl;
+    }
+
+    public void setMapUrl(String mapUrl) {
+        this.mapUrl = mapUrl;
+    }
+
+    public String getCenter() {
+        return center;
+    }
+
+    public void setCenter(String center) {
+        this.center = center;
+    }
+
+    public String getPointIcon() {
+        return pointIcon;
+    }
+
+    public void setPointIcon(String pointIcon) {
+        this.pointIcon = pointIcon;
+    }
+
+    public String getFontName() {
+        return fontName;
+    }
+
+    public void setFontName(String fontName) {
+        this.fontName = fontName;
+    }
+
+    public String getFontSize() {
+        return fontSize;
+    }
+
+    public void setFontSize(String fontSize) {
+        this.fontSize = fontSize;
+    }
+
+    public Color getFontColor() {
+        return fontColor;
+    }
+
+    public void setFontColor(Color fontColor) {
+        this.fontColor = fontColor;
+    }
+
+    public String getLineSize() {
+        return lineSize;
+    }
+
+    public void setLineSize(String lineSize) {
+        this.lineSize = lineSize;
+    }
+
+    public String getLineStyle() {
+        return lineStyle;
+    }
+
+    public void setLineStyle(String lineStyle) {
+        this.lineStyle = lineStyle;
+    }
+
+    private BaseFormula titleFormula = FormulaKit.newFormula(StringKit.EMPTY);
+
+    public BaseFormula getTitleFormula() {
+        return titleFormula;
+    }
+
+    public void setTitleFormula(BaseFormula titleFormula) {
+        this.titleFormula = titleFormula;
+    }
+
+    public Color getTextBoxColor() {
+        return textBoxColor;
+    }
+
+    public void setTextBoxColor(Color textBoxColor) {
+        this.textBoxColor = textBoxColor;
+    }
+
+    public String getTextBoxWidth() {
+        return textBoxWidth;
+    }
+
+    public void setTextBoxWidth(String textBoxWidth) {
+        this.textBoxWidth = textBoxWidth;
+    }
+
+    @Override
+    public FRChartCategory getFRChartCategory() {
+        return super.getFRChartCategory();
+    }
+
+    @Override
+    protected Image designImage(int width, int height, int resolution, ChartWebParaProvider chartWebPara) {
+        return IOKit.readImageWithCache("com/fr/plugin/img/logo.png");
+    }
+
+    @Override
+    public POMapChartData clone() throws CloneNotSupportedException {
+        POMapChartData result = (POMapChartData) super.clone();
+        return result;
+    }
+
+    //从xml中读取对象的属性。
+    @Override
+    public void readAttr(XMLableReader xmLableReader) {
+
+        super.readAttr(xmLableReader);
+        this.setFontSize(xmLableReader.getAttrAsString("FontSize", "12"));
+        String fontColor = xmLableReader.getAttrAsString("FontColor", Color.BLACK.getRGB() + "");
+        if (StringUtils.isNotBlank(fontColor)) {
+            int anInt = Integer.parseInt(fontColor);
+            this.setFontColor(new Color(anInt));
+        }
+        String textBoxColor = xmLableReader.getAttrAsString("TextBoxColor", Color.BLACK.getRGB() + "");
+        if (StringUtils.isNotBlank(textBoxColor)) {
+            int anInt = Integer.parseInt(textBoxColor);
+            this.setTextBoxColor(new Color(anInt));
+        }
+        this.setTextBoxLeft(xmLableReader.getAttrAsString("TextBoxLeft", "12"));
+        this.setTextBoxWidth(xmLableReader.getAttrAsString("TextBoxWidth", "30"));
+        this.setLineStyle(xmLableReader.getAttrAsString("LineStyle", "实线"));
+        this.setPointIcon(xmLableReader.getAttrAsString("PointIcon", ""));
+        this.setFontName(xmLableReader.getAttrAsString("FontName", ""));
+        this.setLineSize(xmLableReader.getAttrAsString("LineSize", "12"));
+        this.setMapUrl(xmLableReader.getAttrAsString("MapUrl", ""));
+        this.setCenter(xmLableReader.getAttrAsString("Center", "11583663.78341984, 3588508.27616124"));
+    }
+
+    //将对象的属性写入xml中。
+    @Override
+    public void writeAttr(XMLPrintWriter writer) {
+        super.writeAttr(writer);
+        writer.attr("FontSize", fontSize);
+        if (fontColor != null) {
+            writer.attr("FontColor", fontColor.getRGB() + "");
+        }
+        if (textBoxColor != null) {
+            writer.attr("TextBoxColor", textBoxColor.getRGB() + "");
+        }
+        writer.attr("LineStyle", lineStyle);
+        writer.attr("PointIcon", pointIcon);
+        writer.attr("FontName", fontName);
+        writer.attr("LineSize", lineSize);
+        writer.attr("Center", center);
+        writer.attr("MapUrl", mapUrl);
+        writer.attr("TextBoxLeft", textBoxLeft);
+        writer.attr("TextBoxWidth", textBoxWidth);
+    }
+
+    private static String colorToHexValue(Color color) {
+        if (color == null) {
+            return "";
+        }
+        return "#" + intToHexValue(color.getRed()) + intToHexValue(color.getGreen()) + intToHexValue(color.getBlue());
+    }
+
+    private static String intToHexValue(int number) {
+        String result = Integer.toHexString(number & 0xff);
+        while (result.length() < 2) {
+            result = "0" + result;
+        }
+        return result.toUpperCase();
+    }
+
+    @Override
+    /**
+     *  //创建Echarts饼图需要的options，根据自身的属性来定义options中的配置项。
+     *     //调用前，已经对FieldCollection中的字段做了对应的汇总计算，可以直接通过getFieldCollection获取到字段集合，从而获取其中的计算结果。
+     */
+    public JSONObject createAttributeConfig(ChartWebParaProvider chartWebPara) {
+        FineLoggerFactory.getLogger().info("开始组装JSON");
+        JSONObject jsonObject = super.createAttributeConfig(chartWebPara);
+        POMapListData fieldCollection = getFieldCollection(POMapListData.class);
+
+        java.util.List<Object> position = new ArrayList<>();
+        java.util.List<Object> titles = new ArrayList<>();
+        List<Object> area = new ArrayList<>();
+        if (fieldCollection != null) {
+            if (fieldCollection.getLat() != null) {
+                area = fieldCollection.getLat().getValues();
+            }
+            if (fieldCollection.getLng() != null) {
+                position = fieldCollection.getLng().getValues();
+            }
+            if (fieldCollection.getTitle() != null) {
+                titles = fieldCollection.getTitle().getValues();
+            }
+        }
+        jsonObject.put("lat", new JSONArray(area));
+        jsonObject.put("lng", new JSONArray(position));
+        jsonObject.put("titles", new JSONArray(titles));
+
+        jsonObject.put("mapCenter", this.center)
+                .put("lineStyle", this.lineStyle)
+                .put("fontSize", this.fontSize)
+                .put("pointIcon", this.pointIcon)
+                .put("fontName", this.fontName)
+                .put("lineSize", this.lineSize)
+                .put("mapUrl", this.mapUrl)
+                .put("textBoxWidth", this.textBoxWidth)
+                .put("textBoxColor", colorToHexValue(this.textBoxColor))
+                .put("mapUrl", this.mapUrl)
+                .put("textBoxLeft", this.textBoxLeft)
+                .put("fontColor", colorToHexValue(this.fontColor));
+
+        return jsonObject;
+    }
+
+    @Override
+    public void dealFormula(FormulaProcessor formulaProcessor) {
+        if (titleFormula != null) {
+            formulaProcessor.dealWith(titleFormula);
+        }
+        super.dealFormula(formulaProcessor);
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        if (!super.equals(o)) return false;
+        POMapChartData that = (POMapChartData) o;
+        return Objects.equals(pointIcon, that.pointIcon) && Objects.equals(center, that.center) && Objects.equals(fontName, that.fontName) && Objects.equals(fontSize, that.fontSize) && Objects.equals(fontColor, that.fontColor) && Objects.equals(textBoxColor, that.textBoxColor) && Objects.equals(lineSize, that.lineSize) && Objects.equals(lineStyle, that.lineStyle) && Objects.equals(textBoxWidth, that.textBoxWidth) && Objects.equals(mapUrl, that.mapUrl) && Objects.equals(textBoxLeft, that.textBoxLeft) && Objects.equals(titleFormula, that.titleFormula);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(super.hashCode(), pointIcon, center, fontName, fontSize, fontColor, textBoxColor, lineSize, lineStyle, textBoxWidth, mapUrl, textBoxLeft, titleFormula);
+    }
+}

src/main/java/com/fr/plugin/chart/POMapDataConfig.java

@@ -0,0 +1,87 @@
+package com.fr.plugin.chart;
+
+import com.fr.extended.chart.AbstractDataConfig;
+import com.fr.extended.chart.ExtendedField;
+import com.fr.stable.AssistUtils;
+import com.fr.stable.xml.XMLPrintWriter;
+import com.fr.stable.xml.XMLableReader;
+
+import java.util.Objects;
+
+public class POMapDataConfig extends AbstractDataConfig {
+
+    private ExtendedField x = new ExtendedField();
+    private ExtendedField y = new ExtendedField();
+    private ExtendedField title = new ExtendedField();
+
+    public ExtendedField getTitle() {
+        return title;
+    }
+
+    public void setTitle(ExtendedField title) {
+        this.title = title;
+    }
+
+    public ExtendedField getX() {
+        return x;
+    }
+
+    public void setX(ExtendedField x) {
+        this.x = x;
+    }
+
+    public ExtendedField getY() {
+        return y;
+    }
+
+    public void setY(ExtendedField y) {
+        this.y = y;
+    }
+
+    @Override
+    protected void readAttr(XMLableReader reader) {
+        readExtendedField(x, "x", reader);
+        readExtendedField(y, "y", reader);
+        readExtendedField(title, "title", reader);
+    }
+
+    @Override
+    protected void writeAttr(XMLPrintWriter writer) {
+        writeExtendedField(x, "x", writer);
+        writeExtendedField(y, "y", writer);
+        writeExtendedField(title, "title", writer);
+    }
+
+
+    @Override
+    public ExtendedField[] dataSetFields() {
+        return new ExtendedField[]{
+                x,
+                y,
+                title
+        };
+    }
+
+    @Override
+    public POMapDataConfig clone() throws CloneNotSupportedException {
+        POMapDataConfig result = new POMapDataConfig();
+        result.setX(this.getX().clone());
+        result.setY(this.getY().clone());
+        result.setTitle(this.getTitle().clone());
+        return result;
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        if (!super.equals(o)) return false;
+        POMapDataConfig that = (POMapDataConfig) o;
+        return Objects.equals(x, that.x) && Objects.equals(y, that.y) && Objects.equals(title, that.title);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(x, y, title);
+    }
+}

src/main/java/com/fr/plugin/chart/POMapListData.java

@@ -0,0 +1,38 @@
+package com.fr.plugin.chart;
+
+import com.fanruan.api.report.chart.field.BaseColumnFieldCollection;
+import com.fr.chartx.data.annotations.KeyField;
+import com.fr.chartx.data.field.ColumnField;
+
+public class POMapListData extends BaseColumnFieldCollection {
+    @KeyField
+    private ColumnField lat = new ColumnField();
+
+    private ColumnField lng = new ColumnField();
+
+    private ColumnField title = new ColumnField();
+
+    public ColumnField getLat() {
+        return lat;
+    }
+
+    public void setLat(ColumnField lat) {
+        this.lat = lat;
+    }
+
+    public ColumnField getLng() {
+        return lng;
+    }
+
+    public void setLng(ColumnField lng) {
+        this.lng = lng;
+    }
+
+    public ColumnField getTitle() {
+        return title;
+    }
+
+    public void setTitle(ColumnField title) {
+        this.title = title;
+    }
+}

src/main/java/com/fr/plugin/components/MapComponent.java

@@ -0,0 +1,69 @@
+package com.fr.plugin.components;
+
+import com.fr.web.struct.AssembleComponent;
+import com.fr.web.struct.Atom;
+import com.fr.web.struct.Component;
+import com.fr.web.struct.Filter;
+import com.fr.web.struct.browser.RequestClient;
+import com.fr.web.struct.category.ScriptPath;
+import com.fr.web.struct.category.StylePath;
+
+public class MapComponent extends AssembleComponent {
+    public static final MapComponent KEY = new MapComponent();
+
+    /**
+     * 返回需要引入的JS脚本路径
+     *
+     * @param client 请求客户端描述
+     * @return JS脚本路径
+     */
+    @Override
+    public ScriptPath script(RequestClient client) {
+        return ScriptPath.build("com/fr/plugin/js/map.js");
+    }
+
+    /**
+     * 返回需要引入的CSS样式路径
+     *
+     * @param client 请求客户端描述
+     * @return CSS样式路径
+     */
+    @Override
+    public StylePath style(RequestClient client) {
+        //如果不需要就直接返回 StylePath.EMPTY;
+        return StylePath.build("com/fr/plugin/css/map.css");
+    }
+
+    /**
+     * 通过给定的资源过滤器控制是否加载这个资源
+     *
+     * @return 资源过滤器
+     */
+    @Override
+    public Filter filter() {
+        return new Filter() {
+            @Override
+            public boolean accept() {
+                //任何情况下我们都在平台组件加载时加载我们的组件
+                return true;
+            }
+        };
+    }
+
+    @Override
+    public Atom[] refer() {
+        return new Atom[]{
+                new Component() {
+                    @Override
+                    public ScriptPath script(RequestClient requestClient) {
+                        return ScriptPath.build("com/fr/plugin/js/openlayer/ol.js");
+                    }
+
+                    @Override
+                    public StylePath style(RequestClient requestClient) {
+                        return StylePath.build("com/fr/plugin/js/openlayer/ol.css");
+                    }
+                }
+        };
+    }
+}

src/main/java/com/fr/plugin/model/PointModel.java

@@ -0,0 +1,31 @@
+package com.fr.plugin.model;
+
+public class PointModel {
+    private String lat;
+    private String lng;
+    private String title;
+
+    public String getLat() {
+        return lat;
+    }
+
+    public void setLat(String lat) {
+        this.lat = lat;
+    }
+
+    public String getLng() {
+        return lng;
+    }
+
+    public void setLng(String lng) {
+        this.lng = lng;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+}

src/main/java/com/fr/plugin/pane/POMapChartAttrPane.java

@@ -0,0 +1,39 @@
+package com.fr.plugin.pane;
+
+import com.fanruan.api.design.chart.BaseOtherPane;
+import com.fanruan.api.design.ui.component.formula.UIFormulaTextField;
+import com.fr.chart.chartattr.ChartCollection;
+import com.fr.design.mainframe.chart.AbstractChartAttrPane;
+import com.fr.plugin.chart.POMapChartData;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class POMapChartAttrPane extends AbstractChartAttrPane {
+
+    private UIFormulaTextField title;
+
+
+    @Override
+    protected JPanel createContentPane() {
+        JPanel panel = new JPanel(new BorderLayout(0, 6));
+        title = new UIFormulaTextField();
+        panel.add(title, BorderLayout.CENTER);
+        return panel;
+    }
+
+    @Override
+    public String title4PopupWindow() {
+        return "样式";
+    }
+
+    @Override
+    public void populate(ChartCollection chartCollection) {
+
+    }
+
+    @Override
+    public void update(ChartCollection chartCollection) {
+
+    }
+}

src/main/java/com/fr/plugin/pane/POMapDataFieldsPane.java

@@ -0,0 +1,68 @@
+package com.fr.plugin.pane;
+
+import com.fanruan.api.design.DesignKit;
+import com.fanruan.api.design.chart.field.BaseCellDataFieldsPane;
+import com.fanruan.api.design.ui.component.formula.UIFormulaTextField;
+import com.fr.plugin.chart.POMapListData;
+
+import java.awt.*;
+
+/**
+ * 单元格数据集
+ */
+public class POMapDataFieldsPane extends BaseCellDataFieldsPane<POMapListData> {
+
+    private UIFormulaTextField lngPane;
+    private UIFormulaTextField latPane;
+    private UIFormulaTextField titlePane;
+
+    public void initComponents() {
+        lngPane = new UIFormulaTextField();
+        latPane = new UIFormulaTextField();
+        titlePane = new UIFormulaTextField();
+        super.initComponents();
+    }
+
+    @Override
+    protected String[] fieldLabels() {
+        return new String[]{
+                DesignKit.i18nText("Lat数据"),
+                DesignKit.i18nText("Lng数据"),
+                DesignKit.i18nText("信息标签")
+        };
+    }
+
+    @Override
+    protected Component[] fieldComponents() {
+        return new Component[]{
+                latPane,
+                lngPane,
+                titlePane
+        };
+    }
+
+    @Override
+    protected UIFormulaTextField[] formulaPanes() {
+        return new UIFormulaTextField[]{
+                latPane,
+                lngPane,
+                titlePane
+        };
+    }
+
+    @Override
+    public void populateBean(POMapListData dataConf) {
+        populateField(latPane, dataConf.getLat());
+        populateField(lngPane, dataConf.getLng());
+        populateField(titlePane, dataConf.getTitle());
+    }
+
+    @Override
+    public POMapListData updateBean() {
+        POMapListData dataConfig = new POMapListData();
+        updateField(latPane, dataConfig.getLat());
+        updateField(lngPane, dataConfig.getLng());
+        updateField(titlePane, dataConfig.getTitle());
+        return dataConfig;
+    }
+}

src/main/java/com/fr/plugin/pane/POMapDataSetFieldsPane.java

@@ -0,0 +1,68 @@
+package com.fr.plugin.pane;
+
+import com.fanruan.api.design.DesignKit;
+import com.fanruan.api.design.chart.field.BaseDataSetFieldsPane;
+import com.fanruan.api.design.ui.component.UIComboBox;
+import com.fanruan.api.design.ui.component.chart.CalculateComboBox;
+import com.fr.plugin.chart.POMapListData;
+
+import java.awt.*;
+
+//数据集数据源
+public class POMapDataSetFieldsPane  extends BaseDataSetFieldsPane<POMapListData> {
+
+    private UIComboBox lngPane;
+    private UIComboBox latPane;
+    private UIComboBox titlePane;
+
+    public void initComponents() {
+        titlePane = new UIComboBox();
+        lngPane = new UIComboBox();
+        latPane = new UIComboBox();
+        super.initComponents();
+    }
+
+    @Override
+    protected String[] fieldLabels() {
+        return new String[]{
+                DesignKit.i18nText("Lat数据"),
+                DesignKit.i18nText("Lng数据"),
+                DesignKit.i18nText("信息标签")
+        };
+    }
+
+    @Override
+    protected Component[] fieldComponents() {
+        return new Component[]{
+                latPane,
+                lngPane,
+                titlePane
+        };
+    }
+
+    @Override
+    protected UIComboBox[] filedComboBoxes() {
+        return new UIComboBox[]{
+                latPane,
+                lngPane,
+                titlePane
+        };
+    }
+
+    @Override
+    public void populateBean(POMapListData dataConf) {
+        populateField(latPane, dataConf.getLat());
+        populateField(lngPane, dataConf.getLng());
+        populateField(titlePane, dataConf.getTitle());
+//        populateFunctionField(titlePane, calculateComboBox, dataConf.getValue());
+    }
+
+    @Override
+    public POMapListData updateBean() {
+        POMapListData dataConfig = new POMapListData();
+        updateField(latPane, dataConfig.getLat());
+        updateField(lngPane, dataConfig.getLng());
+        updateField(titlePane, dataConfig.getTitle());
+        return dataConfig;
+    }
+}

src/main/java/com/fr/plugin/pane/POMapReportDataPane.java

@@ -0,0 +1,52 @@
+package com.fr.plugin.pane;
+
+import com.fr.design.formula.TinyFormulaPane;
+import com.fr.extended.chart.AbstractExtendedChartReportDataPane;
+import com.fr.plugin.chart.POMapDataConfig;
+
+public class POMapReportDataPane extends AbstractExtendedChartReportDataPane<POMapDataConfig> {
+
+    private TinyFormulaPane xPane;
+    private TinyFormulaPane yPane;
+    private TinyFormulaPane titlePane;
+
+    @Override
+    protected String[] fieldLabel() {
+        return new String[]{
+                "lat字段",
+                "lng字段",
+                "标题字段"
+        };
+    }
+
+    @Override
+    protected TinyFormulaPane[] formulaPanes() {
+        if (xPane == null) {
+            xPane = new TinyFormulaPane();
+            yPane = new TinyFormulaPane();
+            titlePane = new TinyFormulaPane();
+        }
+        return new TinyFormulaPane[]{
+                xPane,
+                yPane,
+                titlePane
+        };
+    }
+
+    @Override
+    protected void populate(POMapDataConfig dataConf) {
+        populateField(xPane, dataConf.getX());
+        populateField(yPane, dataConf.getY());
+        populateField(titlePane, dataConf.getTitle());
+    }
+
+    @Override
+    protected POMapDataConfig update() {
+        POMapDataConfig dataConfig = new POMapDataConfig();
+
+        updateField(xPane, dataConfig.getX());
+        updateField(yPane, dataConfig.getY());
+        updateField(titlePane, dataConfig.getTitle());
+        return dataConfig;
+    }
+}

src/main/java/com/fr/plugin/pane/POMapStylePane.java

@@ -0,0 +1,132 @@
+package com.fr.plugin.pane;
+
+import com.fanruan.api.design.chart.BaseOtherPane;
+import com.fanruan.api.design.ui.component.*;
+import com.fanruan.api.design.ui.layout.TableLayoutKit;
+import com.fr.design.layout.TableLayout;
+import com.fr.plugin.chart.POMapChartData;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class POMapStylePane extends BaseOtherPane<POMapChartData> {
+
+    private UITextField pointIcon;
+    private UITextField mapUrl;
+    private UITextField fontName;
+    private UITextField center;
+    private UINumberField fontSize;
+    private UINumberField textBoxWidth;
+    private UINumberField textBoxLeft;//信息框举例顶部的间距
+    private UIColorButton textBoxBackgroundColor;
+    private UIColorButton fontColor;
+    private UINumberField lineSize;
+    private UIComboBox<String> lineStyle;
+
+    @Override
+    public void populate(POMapChartData ob) {
+        if (pointIcon != null) {
+            pointIcon.setText(ob.getPointIcon());
+            fontName.setText(ob.getFontName());
+            center.setText(ob.getCenter());
+            mapUrl.setText(ob.getMapUrl());
+            textBoxWidth.setText(ob.getTextBoxWidth());
+            fontSize.setText(ob.getFontSize());
+            fontColor.setColor(ob.getFontColor());
+            textBoxLeft.setText(ob.getTextBoxLeft());
+            textBoxBackgroundColor.setColor(ob.getTextBoxColor());
+            lineSize.setText(ob.getLineSize());
+            lineStyle.setSelectedItem(ob.getLineStyle());
+        }
+    }
+
+    @Override
+    public void update(POMapChartData ob) {
+        ob.setFontColor(this.fontColor.getColor());
+        ob.setFontName(this.fontName.getText());
+        ob.setMapUrl(this.mapUrl.getText());
+        ob.setCenter(this.center.getText());
+        ob.setTextBoxWidth(this.textBoxWidth.getText());
+        ob.setTextBoxLeft(this.textBoxLeft.getText());
+        ob.setFontSize(this.fontSize.getText());
+        ob.setTextBoxColor(this.textBoxBackgroundColor.getColor());
+        if (this.lineStyle.getSelectedItem() != null) {
+            ob.setLineStyle(this.lineStyle.getSelectedItem().toString());
+        }
+        ob.setLineSize(this.lineSize.getText());
+        ob.setPointIcon(this.pointIcon.getText());
+    }
+
+    @Override
+    protected JPanel createContentPane() {
+        if (pointIcon == null) {
+            pointIcon = new UITextField();
+            fontName = new UITextField();
+            mapUrl = new UITextField();
+            textBoxWidth = new UINumberField();
+            textBoxBackgroundColor = new UIColorButton();
+            center = new UITextField();
+            fontSize = new UINumberField(12);
+            fontColor = new UIColorButton();
+            lineSize = new UINumberField(12);
+            textBoxLeft = new UINumberField(12);
+            lineStyle = new UIComboBox<String>(new String[]{
+                    "虚线",
+                    "实线"
+            });
+
+        }
+
+        Component[][] components=new Component[][]{
+                new Component[]{
+                        new UILabel("地图url"),mapUrl,
+                },
+                new Component[]{
+                        new UILabel("点位图片"),pointIcon,
+                },
+                new Component[]{
+                        new UILabel("字体颜色"),fontColor,
+                },
+                new Component[]{
+                        new UILabel("线段粗细"),lineSize,
+                },
+                new Component[]{
+                        new UILabel("线段类型"),lineStyle,
+                },
+                new Component[]{
+                        new UILabel("地图中心位置"),center,
+                },
+                new Component[]{
+                        new UILabel("字号"),fontSize,
+                },
+                new Component[]{
+                        new UILabel("字体名称"),fontName,
+                },
+                new Component[]{
+                        new UILabel("信息框宽度"),textBoxWidth,
+                },
+                new Component[]{
+                        new UILabel("信息框背景色"),textBoxBackgroundColor,
+                },
+                new Component[]{
+                        new UILabel("信息框和点距离"),textBoxLeft,
+                },
+        };
+
+        double p = TableLayoutKit.PREFERRED;
+        double f = TableLayout.FILL;
+        double[] rowSize=new double[]{p,p,p,p,p,p,p,p,p,p,p};
+        double[] columnSize=new double[]{p, f};
+        JPanel jPanel = new JPanel();
+        jPanel.setLayout(new BorderLayout());
+        JPanel tableLayoutPane = TableLayoutKit.createTableLayoutPane(components, rowSize, columnSize);
+        jPanel.add(tableLayoutPane, BorderLayout.NORTH);
+        jPanel.setSize(300,600);
+        return jPanel;
+    }
+
+    @Override
+    public String title4PopupWindow() {
+        return "样式";
+    }
+}

src/main/java/com/fr/plugin/pane/POMapTableDataPane.java

@@ -0,0 +1,52 @@
+package com.fr.plugin.pane;
+
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.extended.chart.AbstractExtendedChartTableDataPane;
+import com.fr.plugin.chart.POMapDataConfig;
+
+public class POMapTableDataPane extends AbstractExtendedChartTableDataPane<POMapDataConfig> {
+    private UIComboBox xComboBox;
+    private UIComboBox yComboBox;
+    private UIComboBox titleComboBox;
+
+    @Override
+    protected String[] fieldLabels() {
+        return new String[]{
+                "lat字段",
+                "lng字段",
+                "标题字段"
+        };
+    }
+
+    @Override
+    protected UIComboBox[] filedComboBoxes() {
+        if (xComboBox == null) {
+            xComboBox = new UIComboBox();
+            yComboBox = new UIComboBox();
+            titleComboBox=new UIComboBox();
+        }
+        return new UIComboBox[]{
+                xComboBox,
+                yComboBox,
+                titleComboBox
+        };
+    }
+
+    @Override
+    protected void populate(POMapDataConfig dataConf) {
+        populateField(xComboBox, dataConf.getX());
+        populateField(yComboBox, dataConf.getY());
+        populateField(titleComboBox, dataConf.getTitle());
+    }
+
+    @Override
+    protected POMapDataConfig update() {
+        POMapDataConfig dataConfig = new POMapDataConfig();
+
+        updateField(xComboBox, dataConfig.getX());
+        updateField(yComboBox, dataConfig.getY());
+        updateField(titleComboBox, dataConfig.getTitle());
+
+        return dataConfig;
+    }
+}

src/main/java/com/fr/plugin/pane/POMapTypePane.java

@@ -0,0 +1,51 @@
+package com.fr.plugin.pane;
+
+import com.fanruan.api.design.chart.DefaultTypePane;
+import com.fanruan.api.design.ui.component.UIButtonGroup;
+import com.fr.plugin.chart.POMapChartData;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class POMapTypePane extends DefaultTypePane<POMapChartData> {
+
+    private UIButtonGroup buttonGroup = new UIButtonGroup(new String[]{
+            "定制点地图"
+    });
+
+    @Override
+    protected String[] getTypeIconPath() {
+        return new String[]{
+                "com/fr/plugin/img/logo.png",
+        };
+    }
+
+    @Override
+    protected int getSelectIndexInChart(POMapChartData chart) {
+        return 0;
+    }
+
+    @Override
+    protected void setSelectIndexInChart(POMapChartData chart, int index) {
+        //选择的图表
+    }
+
+    @Override
+    protected Component[][] getPaneComponents(JPanel typePane) {
+        return new Component[][]{
+                new Component[]{typePane},
+                new Component[]{buttonGroup}
+        };
+    }
+
+    @Override
+    public void populateBean(POMapChartData ob) {
+        super.populateBean(ob);
+        buttonGroup.setSelectedIndex(0);
+    }
+
+    @Override
+    public void updateBean(POMapChartData ob) {
+        super.updateBean(ob);
+    }
+}

src/main/java/com/fr/plugin/provider/POMapChatType.java

@@ -0,0 +1,50 @@
+package com.fr.plugin.provider;
+
+import com.fanruan.api.report.chart.BaseChartType;
+import com.fanruan.api.report.chart.BaseChartWithData;
+import com.fr.log.FineLoggerFactory;
+import com.fr.plugin.chart.POMapChartData;
+import com.fr.plugin.transform.ExecuteFunctionRecord;
+import com.fr.plugin.transform.FunctionRecorder;
+
+@FunctionRecorder
+public class POMapChatType extends BaseChartType {
+
+    @Override
+    @ExecuteFunctionRecord
+    public void init() {
+        super.init();
+        FineLoggerFactory.getLogger().error("定制点地图初始化");
+    }
+
+    public BaseChartWithData[] getChartTypes() {
+        return new BaseChartWithData[]{
+                new POMapChartData(),
+        };
+    }
+    @Override
+    public String[] getRequiredJS() {
+        FineLoggerFactory.getLogger().error("定制点地图初始化 获取js依赖");
+        return new String[]{
+                "/com/fr/plugin/js/map.js",
+                "/com/fr/plugin/js/openlayer/ol.js",
+        };
+    }
+
+    @Override
+    public String[] getRequiredCss() {
+        return new String[]{
+                "/com/fr/plugin/js/openlayer/ol.css",
+                "/com/fr/plugin/css/map.css"
+        };
+    }
+    /**
+     * JS对象名，该对象一般是一个函数，执行后会在给定的dom中绘制图表
+     *
+     * @return JS对象名
+     */
+    public String getWrapperName() {
+        return "poMapWrapper";
+    }
+
+}

src/main/java/com/fr/plugin/provider/POMapExtendedChartUIProvider.java

@@ -0,0 +1,46 @@
+package com.fr.plugin.provider;
+
+import com.fanruan.api.design.chart.BaseOtherPane;
+import com.fr.design.gui.frpane.AttributeChangeListener;
+import com.fr.design.mainframe.chart.AbstractChartAttrPane;
+import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
+import com.fr.extended.chart.AbstractExtendedChartTableDataPane;
+import com.fr.extended.chart.AbstractExtendedChartUIProvider;
+import com.fr.plugin.pane.POMapStylePane;
+import com.fr.plugin.pane.POMapTableDataPane;
+import com.fr.plugin.transform.ExecuteFunctionRecord;
+import com.fr.plugin.transform.FunctionRecorder;
+
+@FunctionRecorder
+public class POMapExtendedChartUIProvider extends AbstractExtendedChartUIProvider {
+
+    @Override
+    @ExecuteFunctionRecord
+    protected AbstractExtendedChartTableDataPane getTableDataSourcePane() {
+        return new POMapTableDataPane();
+    }
+
+    @Override
+    protected AbstractReportDataContentPane getReportDataSourcePane() {
+//        return new POMapReportDataPane();
+        return null;
+    }
+
+    @Override
+    public String[] getDemoImagePath() {
+        return new String[]{
+                "com/fr/plugin/img/logo.png"
+        };
+    }
+
+    @Override
+    public String getIconPath() {
+        return "com/fr/design/images/form/toolbar/map.png";
+    }
+
+    @Override
+    public AbstractChartAttrPane[] getAttrPaneArray(AttributeChangeListener listener) {
+        //就这里了
+        return new AbstractChartAttrPane[]{new POMapStylePane()};
+    }
+}

src/main/java/com/fr/plugin/provider/POMapExtentChartProvider.java

@@ -0,0 +1,12 @@
+package com.fr.plugin.provider;
+
+import com.fr.extended.chart.AbstractChart;
+import com.fr.extended.chart.AbstractExtentChartProvider;
+import com.fr.plugin.chart.POMapChart;
+
+public class POMapExtentChartProvider extends AbstractExtentChartProvider {
+    @Override
+    protected AbstractChart createChart() {
+        return new POMapChart();
+    }
+}

src/main/java/com/fr/plugin/provider/POMapUI.java

@@ -0,0 +1,48 @@
+package com.fr.plugin.provider;
+
+import com.fanruan.api.design.chart.*;
+import com.fr.design.gui.frpane.AttributeChangeListener;
+import com.fr.plugin.pane.POMapDataFieldsPane;
+import com.fr.plugin.pane.POMapDataSetFieldsPane;
+import com.fr.plugin.pane.POMapStylePane;
+import com.fr.plugin.pane.POMapTypePane;
+
+public class POMapUI extends BaseChartTypeUI {
+
+    @Override
+    public DefaultTypePane getPlotTypePane() {
+        return new POMapTypePane();
+    }
+
+    @Override
+    public BaseDataPane getChartDataPane(AttributeChangeListener listener) {
+        return new BaseDataPane(listener) {
+            @Override
+            protected SingleDataPane createSingleDataPane() {
+                return new SingleDataPane(new POMapDataSetFieldsPane(), new POMapDataFieldsPane());
+            }
+        };
+    }
+
+    public BaseOtherPane[] getAttrPaneArray(AttributeChangeListener listener) {
+        return new BaseOtherPane[]{new POMapStylePane()};
+    }
+
+    @Override
+    public String getIconPath() {
+        return "com/fr/design/images/form/toolbar/map.png";
+    }
+
+    @Override
+    public String getName() {
+        return "定制点地图";
+    }
+
+
+    @Override
+    public String[] getDemoImagePath() {
+        return new String[]{
+                "com/fr/plugin/img/logo.png"
+        };
+    }
+}

src/main/java/com/fr/plugin/utils/CompUtils.java

@@ -0,0 +1,79 @@
+package com.fr.plugin.utils;
+
+import java.awt.geom.Point2D;
+import java.util.List;
+
+public class CompUtils {
+    /**
+     * 判断点是否在多边形内
+     * @param point 检测点
+     * @param pts   多边形的顶点
+     * @return      点在多边形内返回true,否则返回false
+     */
+    public static boolean IsPtInPoly(Point2D.Double point, List<Point2D.Double> pts){
+
+        int N = pts.size();
+        boolean boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
+        int intersectCount = 0;//cross points count of x
+        double precision = 2e-10; //浮点类型计算时候与0比较时候的容差
+        Point2D.Double p1, p2;//neighbour bound vertices
+        Point2D.Double p = point; //当前点
+
+        p1 = pts.get(0);//left vertex
+        for(int i = 1; i <= N; ++i){//check all rays
+            if(p.equals(p1)){
+                return boundOrVertex;//p is an vertex
+            }
+
+            p2 = pts.get(i % N);//right vertex
+            if(p.x < Math.min(p1.x, p2.x) || p.x > Math.max(p1.x, p2.x)){//ray is outside of our interests
+                p1 = p2;
+                continue;//next ray left point
+            }
+
+            if(p.x > Math.min(p1.x, p2.x) && p.x < Math.max(p1.x, p2.x)){//ray is crossing over by the algorithm (common part of)
+                if(p.y <= Math.max(p1.y, p2.y)){//x is before of ray
+                    if(p1.x == p2.x && p.y >= Math.min(p1.y, p2.y)){//overlies on a horizontal ray
+                        return boundOrVertex;
+                    }
+
+                    if(p1.y == p2.y){//ray is vertical
+                        if(p1.y == p.y){//overlies on a vertical ray
+                            return boundOrVertex;
+                        }else{//before ray
+                            ++intersectCount;
+                        }
+                    }else{//cross point on the left side
+                        double xinters = (p.x - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;//cross point of y
+                        if(Math.abs(p.y - xinters) < precision){//overlies on a ray
+                            return boundOrVertex;
+                        }
+
+                        if(p.y < xinters){//before ray
+                            ++intersectCount;
+                        }
+                    }
+                }
+            }else{//special case when ray is crossing through the vertex
+                if(p.x == p2.x && p.y <= p2.y){//p crossing over p2
+                    Point2D.Double p3 = pts.get((i+1) % N); //next vertex
+                    if(p.x >= Math.min(p1.x, p3.x) && p.x <= Math.max(p1.x, p3.x)){//p.x lies between p1.x & p3.x
+                        ++intersectCount;
+                    }else{
+                        intersectCount += 2;
+                    }
+                }
+            }
+            p1 = p2;//next ray left point
+        }
+
+        if(intersectCount % 2 == 0){//偶数在多边形外
+            return false;
+        } else { //奇数在多边形内
+            return true;
+        }
+
+    }
+
+
+}

src/main/resources/com/fr/plugin/css/map.css

@@ -0,0 +1,23 @@
+.ol-mouse-position{
+    top: unset!important;
+    right: unset!important;
+    left: 0;
+    bottom: 0;
+}
+.maptopare{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 999999;
+}
+#popup-content {
+    background: #fff;
+    /*width: 120px;*/
+    /*height: 40px;*/
+    padding: 10px;
+    text-align: center;
+    border-radius: 3px;
+}
+.ol-viewport{
+    cursor: auto;
+}

src/main/resources/com/fr/plugin/js/map.js

@@ -0,0 +1,415 @@
+!(function () {
+
+    Van.FRChartBridge.poMapWrapper = Van.FRChartBridge.AbstractChart.extend({
+        //初始化方法，这里使用echarts的初始化方法，并且在echarts图表的点击事件中绑定了超链方法
+        _init: function (dom, option) {
+            var that = this;
+            var action = $(dom);
+            var id = this.uuid();
+            action.attr("id", id);
+            var datas = this.options.chartAttr;
+            var center = [11583663.78341984, 3588508.27616124];
+            if (datas.mapCenter) {
+                center = JSON.parse("[" + datas.mapCenter + "]");
+            }
+            var mapUrl = 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=76aa4d0c90314c6fbfbe574ec63e0b26'
+            if (datas.mapUrl) {
+                mapUrl = datas.mapUrl
+            }
+            /**
+             * EPSG:4326
+             在世界地图方面，EPSG:4326是比较著名的一个，又名WGS84，是一个地理的非项目坐标系。它是lat，longs(经纬度)GPS显示器。它的单位是十进制度。EPSG：4326无法在平面地图上以有意义的方式显示。
+             EPSG:3857
+             另一个比较知名的编码是EPSG:3857，这也是一张世界地图，目前主要是各大互联网地图公司以它为基准，例如Google地图，Microsoft地图都在用它。
+             * @type {ol.proj.Projection}
+             */
+            var lt3857=ol.proj.get("EPSG:3857")
+            // var lt4326=ol.proj.get("EPSG:4326") //又名WGS84
+            var map = window.map = new ol.Map({
+                target: id,
+                controls: ol.control.defaults().extend([
+                    new ol.control.MousePosition()
+                ]),
+                layers: [
+                    new ol.layer.Tile({
+                        source: new ol.source.XYZ({
+                            projection:lt3857,
+                            url:mapUrl
+                        })
+                    }),
+                ],
+                view: new ol.View({
+                    center: ol.proj.fromLonLat(center),
+                    zoom: 12
+                })
+            });
+            var imageUrl = datas.pointIcon || 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+            var style = new ol.style.Style({
+                image: new ol.style.Icon(({
+                    anchor: [0.5, 46],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'pixels',
+                    opacity: 0.95,
+                    src: imageUrl
+                })),
+                stroke: new ol.style.Stroke({
+                    color: '#ffcc33',
+                    width: 2,
+                    lineDash: [4, 4], // 重点在这
+                }),
+                text: new ol.style.Text({
+                    font: datas.fontSize + 'px ' + datas.fontName,    //字体与大小
+                    fill: new ol.style.Fill({    //文字填充色
+                        color: datas.fontColor
+                    }),
+                    text: "xxxxxx",
+                    stroke: new ol.style.Stroke({    //文字边界宽度与颜色
+                        color: '#fff',
+                        width: 3
+                    })
+                })
+            });
+            var allFeature = [];
+            for (var i = 0; i < datas.lat.length; i++) {
+                var coreLocation = [parseFloat(datas.lat[i]), parseFloat(datas.lng[i])];
+                var target=ol.proj.fromLonLat(coreLocation)
+                var pp = new ol.geom.Point(target)
+                var feature = new ol.Feature(pp)
+                feature.set("type", "zzl")
+                feature.set("local", target)
+                feature.set("title", datas.titles[i]);
+                // feature.setStyle(style);
+                allFeature.push(feature);
+                // source.addFeature(feature);
+            }
+            var source = new ol.source.Vector({
+                // features: allFeature
+            });
+
+            //初始化聚合标注数据源
+            var clusterSource = new ol.source.Cluster({
+                distance: 20,
+                source: source
+            });
+
+            //样式缓存
+            var styleCache = {};
+
+            // 聚合
+            var clusters = new ol.layer.Vector({
+                source: clusterSource,
+                style: function (feature) {
+                    var size = feature.get('features').length;
+                    //只有一个的，给他加一个overlayer
+                    if (size === 1) {
+                        var fu = feature.get('features')[0];
+                        if (!fu.get("ov")) {
+                            let title = fu.get("title");
+                            let local = fu.get("local");
+                            let ov = createOverF(fu, title, local);
+                            fu.set("ov", ov);
+                            map.addOverlay(ov);
+                        }
+                        style = new ol.style.Style({
+                            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                                anchor: [0.5, 46],
+                                anchorXUnits: 'fraction',
+                                anchorYUnits: 'pixels',
+                                opacity: 0.95,
+                                src: imageUrl
+                            }))
+                        });
+                    } else {
+                        var fes = feature.get('features');
+                        $.each(fes, function (i, fu) {
+                            if (fu.get("ov")) {
+                                map.removeOverlay(fu.get('ov'));
+                                fu.set("ov", undefined)
+                            }
+                        });
+                        var fu = feature.get('features')[0];
+
+                        style = new ol.style.Style({
+                            image: new ol.style.Circle({
+                                radius: 10,
+                                stroke: new ol.style.Stroke({
+                                    color: '#fff'
+                                }),
+                                fill: new ol.style.Fill({
+                                    color: '#3399CC'
+                                })
+                            }),
+                            text: new ol.style.Text({
+                                text: size.toString(),
+                                fill: new ol.style.Fill({
+                                    color: '#fff'
+                                })
+                            })
+                        });
+                    }
+
+                    return style;
+                }
+            });
+            //用来鼠标绘制内容的层
+            var source1 = new ol.source.Vector();
+            var vector1 = new ol.layer.Vector({
+                source: source1
+            });
+            map.addLayer(vector1);
+
+            // // 监听地图分辨率改变事件
+            map.getView().on('change:resolution', function (event) {
+                if (map.getView().getZoom() >= 13) {
+                    clusterSource.setDistance(0);
+                } else {
+                    clusterSource.setDistance(40);
+                }
+            })
+
+            var draw; // global so we can remove it later
+            var modify;
+            var textBoxLeft = datas.textBoxLeft || "12";
+            // 绑定属性框移动事件
+            var dragPan;
+            // 监听鼠标点击事件
+            let offsetXY = [0, 0];
+            map.getInteractions().forEach(function (interaction) {
+                if (interaction instanceof ol.interaction.DragPan) {
+                    dragPan = interaction;
+                }
+            });
+
+            map.on('pointermove', function (evt) {
+                var overlay = map.get("moveingOverlayer")
+                if (overlay && overlay.get('dragging') === true) {
+                    // 将当前的鼠标位置减去偏移量,得到基点应该所处的位置
+                    let coor = [evt.coordinate[0] - offsetXY[0], evt.coordinate[1] - offsetXY[1]];
+                    overlay.setPosition(coor);
+                    // 保存最新坐标，因为使用getPostion()方法无法获取overlay的坐标
+                    overlay.set("coordinate", coor);
+                    // 绘制虚线
+                }
+            });
+            var lineSize = datas.lineSize || 4
+            if (datas.lineStyle === "虚线") {
+                var lineStyle = new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: '#ffcc33',
+                        width: lineSize,
+                        lineDash: [1, 2, 3, 4, 5, 6]
+                    }),
+                    image: new ol.style.Circle({
+                        radius: 7,
+                        fill: new ol.style.Fill({
+                            color: '#ffcc33'
+                        })
+                    })
+                });
+
+            } else {
+                var lineStyle = new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: '#ffcc33',
+                        width: lineSize,
+                    }),
+                    image: new ol.style.Circle({
+                        radius: 7,
+                        fill: new ol.style.Fill({
+                            color: '#ffcc33'
+                        })
+                    })
+                });
+
+            }
+
+            function createOverF(fue, content, postion) {
+                var overlayerJq = $(" <div  class=\"ol-popup\" >\n" +
+                    "        <div id=\"popup-content\" style='font-family: "+datas.fontName+";color:" + datas.fontColor + ";width: " + datas.textBoxWidth + "px;font-size:"+datas.fontSize+"px;background: " + datas.textBoxColor + "' class=\"popup-content\">" + content + "</div>\n" +
+                    "    </div>");
+                overlayerJq.on("mousedown", function (evt) {
+                    console.info("信息框鼠标按下")
+                    dragPan.setActive(false);
+                    var overlay = $(this).data("overlayer");
+                    overlay.set('dragging', true);
+                    // 获取事件点击的坐标值
+                    let evtCoord = map.getEventCoordinate(evt);
+                    let domCoord = overlay.get("coordinate");
+                    // 计算鼠标点击位置和基点坐标(可能是div的左上角)之间的偏移量
+                    offsetXY = [evtCoord[0] - domCoord[0], evtCoord[1] - domCoord[1]];
+                    map.set("moveingOverlayer", overlay)
+                }).on("mouseup", function (evt) {
+                    //当鼠标释放
+                    console.info("鼠标抬起")
+                    var overlay = $(this).data("overlayer");
+                    overlay.set('dragging', false);
+                    // var local=overlay.get("coordinate")
+                    var fu = overlay.get("fue")
+                    map.set("moveingOverlayer", null)
+                    //鼠标释放之后给画一条线
+                    var oldLine = overlay.get("oldLine")
+                    if (oldLine) {
+                        source1.removeFeature(oldLine);
+                    }
+                    let evtCoord = map.getEventCoordinate(evt);
+                    var local = fu.get("local");
+                    var fline = new ol.Feature({
+                        geometry: new ol.geom.LineString([local, evtCoord])
+                    });
+                    fline.setStyle(lineStyle);
+                    overlay.set("oldLine", fline)
+                    source1.addFeature(fline);
+                });
+                var overlayerDom = overlayerJq[0];
+                var overlay = new ol.Overlay({
+                    element: overlayerDom,
+                    positioning: 'bottom-center',           // 覆盖层位置
+                    autoPan: true,             // 是否自动平移，当点击时对话框超出屏幕边距，会自动平移地图使其可见
+                    autoPanMargin: 20,       // 设置自动平移边距
+                    offset: [0, -parseInt(textBoxLeft)],           // 覆盖层偏移起点的位置
+                    className: 'overlay-info',
+                    position: postion
+                });
+                overlay.set("fue", fue);//绑定的fu
+                overlay.set("coordinate", postion);//初始坐标
+                $(overlayerJq).data("overlayer", overlay);
+                return overlay;
+            }
+
+            function addInteraction(type) {
+                if (modify) {
+                    map.removeInteraction(modify);
+                    modify = null;
+                }
+                if (draw) {
+                    map.removeInteraction(draw);
+                    draw = null;
+                }
+                $(action).find(".ol-viewport").css("cursor", "auto")
+                var geometryFunction;
+                var maxPoints;
+                if (type === "LineString") {
+                    maxPoints = 2;
+                    geometryFunction = function (coordinates, geometry) {
+                        if (!geometry) {
+                            geometry = new ol.geom.Polygon(null);
+                        }
+                        var start = coordinates[0];
+                        var end = coordinates[1];
+                        geometry.setCoordinates([
+                            [start, [start[0], end[1]], end, [end[0], start[1]], start]
+                        ]);
+                        return geometry;
+                    };
+                    draw = new ol.interaction.Draw({
+                        source: source1,
+                        type: type,
+                        maxPoints: maxPoints,
+                        geometryFunction: geometryFunction
+                    })
+                } else {
+                    draw = new ol.interaction.Draw({
+                        source: source1,
+                        type: type,
+                    })
+                }
+
+
+                draw.on('drawend', function (event) {
+                    //清空原来选中的数据
+                    clusterSource.getSource().clear();
+                    source1.clear();
+                    map.removeLayer(clusters);
+                    var geo = event.feature.getGeometry();
+                    var tempAllFeature = new Array()
+                    for (var j = 0; j < allFeature.length; j++) {
+                        var a = allFeature[j];
+                        var temp = a.getGeometry().getCoordinates();
+                        if (geo.intersectsCoordinate(temp)) {
+                            // a.setStyle(style)
+                            tempAllFeature.push(a);
+                        }
+                    }
+                    if (tempAllFeature.length > 0) {
+                        clusterSource.getSource().addFeatures(tempAllFeature);
+                        map.getOverlays().clear();//清空之前的overlays
+                        //添加所有的可见点之后添加overlays
+                        $.each(tempAllFeature, function (i, v) {
+                            let title = v.get("title");
+                            let local = v.get("local");
+                            // let ov = createOverF(title, local);
+                            // v.set("ov", ov);
+                            // map.addOverlay(ov);
+                        })
+                        map.addLayer(clusters);
+                        // movePoint();
+                    }
+                });
+                map.addInteraction(draw);
+            }
+
+
+            function movePoint() {
+                if (draw) {
+                    map.removeInteraction(draw)
+                }
+                $(action).find(".ol-viewport").css("cursor", "grab")
+            }
+
+            function cleanAll() {
+                //清空source1
+                source1.clear();
+                //清空浮层
+                map.getOverlays().clear();
+                //清空圈选区域
+                source.clear();
+            }
+
+            addInteraction("LineString");//默认矩形
+            var qxms = $("<select ><option value='LineString'>矩形 </option><option value='Circle'>圆形 </option><option value='Polygon'>多边形 </option></select>").change(function () {
+                addInteraction($(this).val());
+            })
+            var qxmsBtn = $("<button > 圈选模式</button>").click(function () {
+                addInteraction(qxms.val());
+            })
+            var cleanBtn = $("<button > 清空选择</button>").click(function () {
+                cleanAll();
+            })
+            var movems = $("<button > 移动模式</button>").click(function () {
+                movePoint();
+            })
+            var topBtn = $("<div class='maptopare'></div>")
+                .append(cleanBtn)
+                .append(qxms)
+                .append(qxmsBtn)
+                .append(movems);
+            action.append(topBtn)
+            return action
+        },
+        uuid: function () {
+            var s = [];
+            var hexDigits = "0123456789abcdef";
+            for (var i = 0; i < 12; i++) {
+                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+            }
+            return 'mp' + s.join("");
+        },
+        //自动刷新方法。开启自动刷新后会根据时间间隔调用此方法
+        _refresh: function (chart, option) {
+            debugger
+            chart.setOption(option);
+        },
+
+        //定义空数据的条件，这里是当options.series.data.length长度为0时，代表空数据，主要原因是判断空数据时，显示默认的空数据背景
+        _emptyData: function (options) {
+            debugger
+            return options === 0;
+        }
+    })
+})();

src/main/resources/com/fr/plugin/js/map1.js

@@ -0,0 +1,234 @@
+poMapWrapper = ExtendedChart.extend({
+    uuid: function () {
+        var s = [];
+        var hexDigits = "0123456789abcdef";
+        for (var i = 0; i < 12; i++) {
+            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+        }
+        return 'mp' + s.join("");
+    },
+    _initData: function () {
+
+    },
+
+    _init: function (dom, option) {
+        var that = this;
+        var action = $(dom);
+        var id = this.uuid();
+        action.attr("id", id);
+        var datas = this.options.chartAttr;
+        // var lists = [];
+        // for (var i = 0; i < datas.lat.length; i++) {
+        //     lists.push(new ol.Feature(new ol.geom.Point([datas.lat[i],
+        //         datas.lng[i]])));
+        // }
+        var source = new ol.source.Vector({
+            wrapX: false,
+        });
+        var style = new ol.style.Style({
+            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                anchor: [0.5, 46],
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'pixels',
+                opacity: 0.95,
+                src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+            }))
+        });
+        var allFeature = [];
+        for (var i = 0; i < datas.lat.length; i++) {
+            var feature = new ol.Feature(new ol.geom.Point([datas.lng[i], datas.lat[i]]))
+            // feature.setStyle(style);
+            allFeature.push(feature);
+            source.addFeature(feature);
+        }
+
+
+        //初始化聚合标注数据源
+        var clusterSource = new ol.source.Cluster({
+            //标注元素之间的间距
+            distance: 40,
+            //数据源
+            source:source
+        });
+
+        //样式缓存
+        var styleCache = {};
+
+        // 聚合
+        var clusters = new  ol.layer.Vector({
+            source: clusterSource,
+            //样式
+            style: function (feature, resolution) {
+                //当前聚合标注数据源的要素大小
+                var size = feature.get('features').length;
+                //定义样式
+                var style = styleCache[size];
+                //如果当前样式不存在则创建
+                if (!style) {
+                    style = [
+                        //初始化样式
+                        new ol.style.Style({
+                            //点样式
+                            image: new ol.style.Circle({
+                                //点的半径
+                                radius: 10,
+                                //笔触
+                                stroke: new ol.style.Stroke({
+                                    color: '#fff'
+                                }),
+                                //填充
+                                fill: new ol.style.Fill({
+                                    color: '#3399cc'
+                                })
+                            }),
+                            //文本样式
+                            text: new ol.style.Text({
+                                //文本内容
+                                text: size.toString(),
+                                //填充
+                                fill: new ol.style.Fill({
+                                    color: '#fff'
+                                })
+                            })
+                        })
+                    ];
+                    styleCache[size] = style;
+                }
+                return style;
+            }
+        })
+
+        var vector = new ol.layer.Vector({
+            source: source,
+            style:null,
+            // style:function (feature, resolution) {
+            //     var size = feature.get('features').length;
+            //     if (size === 1) {
+            //         return style
+            //     }
+            //     else {
+            //         return new ol.style.Style({
+            //             image: new ol.style.Circle({
+            //                 radius: 30,
+            //                 stroke: new ol.style.Stroke({
+            //                     color: 'white'
+            //                 }),
+            //                 fill: new ol.style.Fill({
+            //                     color: 'blue'
+            //                 })
+            //             }),
+            //             text: new ol.style.Text({
+            //                 text: size.toString(),
+            //                 fill: new ol.style.Fill({
+            //                     color: 'white'
+            //                 })
+            //             })
+            //         })
+            //     }
+            // }
+        });
+
+        //
+        // function gen1000() {
+        //     var s="";
+        //     for (var i = 0; i < 1000; i++) {
+        //         var x = random(0, map.getSize()[0]);
+        //         var y = random(0, map.getSize()[1]);
+        //        var tmp= map.getCoordinateFromPixel([x,y]);
+        //          s+="INSERT INTO  `t_latdata`( `lat`, `lng`, `cont`) VALUES (  '"+tmp.join("','")+"', '标志位"+i+"');"
+        //     }
+        //     console.info(s)
+        // }
+        //
+        // function random(min, max) {
+        //     return Math.floor(Math.random() * (max - min + 1)) + min;
+        // }
+
+        var map = window.map = new ol.Map({
+            target: id,
+            controls: ol.control.defaults().extend([
+                new ol.control.MousePosition()
+            ]),
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+                            '?apikey=76aa4d0c90314c6fbfbe574ec63e0b26'
+                    })
+                }),
+            ],
+            view: new ol.View({
+                center: [11583663.78341984,
+                    3588508.27616124],
+                zoom: 12
+            })
+        });
+        map.addLayer(vector)
+        // 监听地图分辨率改变事件
+        // map.getView().on('change:resolution', function (event) {
+        //     if (map.getView().getZoom() === map.getView().getMaxZoom()) {
+        //         cluster.setDistance(0);
+        //     }
+        //     else {
+        //         cluster.setDistance(100);
+        //     }
+        // })
+        var draw; // global so we can remove it later
+        function addInteraction() {
+            var value = 'Box';
+            var geometryFunction;
+            value = 'Circle';
+            geometryFunction = ol.interaction.Draw.createBox();
+            draw = new ol.interaction.Draw({
+                source: source,
+                type: value,
+                geometryFunction: geometryFunction,
+            });
+            draw.on('drawend', function (event) {
+                //圈选之后的回调函数
+                //获取聚合标注数据源中的要素
+                // var currentFeatures = clusterSource.getSource().getFeatures();
+                // //如果当前数据源中没有任何要素则添加
+                // if (currentFeatures.length == 0) {
+                //     clusterSource.getSource().addFeatures(features);
+                //     clusters.setSource(clusterSource);
+                // }
+
+                // var geo = event.feature.getGeometry();
+                // for (var j = 0; j < allFeature.length; j++) {
+                //     var a = allFeature[j];
+                //     a.setStyle(null)
+                //     var temp = a.getGeometry().getCoordinates();
+                //     if (geo.intersectsCoordinate(temp)) {
+                //         a.setStyle(style)
+                //     }
+                // }
+                //清空原来选中的数据
+                debugger
+                clusterSource.getSource().clear();
+                //从map中移除聚合标注图层
+                map.removeLayer(clusters);
+
+                var geo = event.feature.getGeometry();
+                var tempAllFeature=new Array()
+                for (var j = 0; j < allFeature.length; j++) {
+                    var a = allFeature[j];
+                    var temp = a.getGeometry().getCoordinates();
+                    if (geo.intersectsCoordinate(temp)) {
+                        tempAllFeature.push(a);
+                    }
+                }
+                debugger
+                if (tempAllFeature.length > 0) {
+                    clusterSource.getSource().addFeatures(tempAllFeature);
+                    clusters.setSource(clusterSource);
+                    map.addLayer(clusters);
+                }
+            });
+            map.addInteraction(draw);
+        }
+
+        addInteraction();
+        return action
+    }
+});

src/main/resources/com/fr/plugin/js/map2.js

@@ -0,0 +1,194 @@
+poMapWrapper = ExtendedChart.extend({
+    uuid: function () {
+        var s = [];
+        var hexDigits = "0123456789abcdef";
+        for (var i = 0; i < 12; i++) {
+            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+        }
+        return 'mp' + s.join("");
+    },
+    _initData: function () {
+
+    },
+
+    _init: function (dom, option) {
+        var that = this;
+        var action = $(dom);
+        var id = this.uuid();
+        action.attr("id", id);
+        var datas = this.options.chartAttr;
+        // var lists = [];
+        // for (var i = 0; i < datas.lat.length; i++) {
+        //     lists.push(new ol.Feature(new ol.geom.Point([datas.lat[i],
+        //         datas.lng[i]])));
+        // }
+
+        var style = new ol.style.Style({
+            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                anchor: [0.5, 46],
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'pixels',
+                opacity: 0.95,
+                src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+            }))
+        });
+        var allFeature = [];
+
+        for (var i = 0; i < datas.lat.length; i++) {
+            var feature = new ol.Feature(new ol.geom.Point([parseFloat(datas.lng[i]), parseFloat(datas.lat[i])]))
+            feature.setStyle(null);
+            allFeature.push(feature);
+            // source.addFeature(feature);
+        }
+        var source = new ol.source.Vector({
+            features: allFeature
+        });
+
+        //初始化聚合标注数据源
+        var clusterSource = new ol.source.Cluster({
+            distance: 20,
+            source: source
+        });
+
+        //样式缓存
+        var styleCache = {};
+
+        // 聚合
+        var clusters = new ol.layer.Vector({
+            source: clusterSource,
+            style: function (feature) {
+                var size = feature.get('features').length;
+                var style = styleCache[size];
+                if (!style) {
+                    if (size === 1) {
+                        style = new ol.style.Style({
+                            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                                anchor: [0.5, 46],
+                                anchorXUnits: 'fraction',
+                                anchorYUnits: 'pixels',
+                                opacity: 0.95,
+                                src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+                            }))
+                        });
+                    } else {
+                        style = new ol.style.Style({
+                            image: new ol.style.Circle({
+                                radius: 10,
+                                stroke: new ol.style.Stroke({
+                                    color: '#fff'
+                                }),
+                                fill: new ol.style.Fill({
+                                    color: '#3399CC'
+                                })
+                            }),
+                            text: new ol.style.Text({
+                                text: size.toString(),
+                                fill: new ol.style.Fill({
+                                    color: '#fff'
+                                })
+                            })
+                        });
+                    }
+
+                    styleCache[size] = style;
+                }
+                return style;
+            }
+        });
+        //用来鼠标绘制内容的层
+        var source1 = new ol.source.Vector();
+        var vector1 = new ol.layer.Vector({
+            source: source1
+        });
+
+        var map = window.map = new ol.Map({
+            target: id,
+            controls: ol.control.defaults().extend([
+                new ol.control.MousePosition()
+            ]),
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+                            '?apikey=76aa4d0c90314c6fbfbe574ec63e0b26'
+                    })
+                }),
+                vector1,
+            ],
+            view: new ol.View({
+                center: [11583663.78341984,
+                    3588508.27616124],
+                zoom: 12
+            })
+        });
+
+        // // 监听地图分辨率改变事件
+        map.getView().on('change:resolution', function (event) {
+            if (map.getView().getZoom() >= 13) {
+                clusterSource.setDistance(0);
+            } else {
+                clusterSource.setDistance(40);
+            }
+        })
+        var draw; // global so we can remove it later
+        function addInteraction() {
+            var geometryFunction;
+            geometryFunction = ol.interaction.Draw.createBox();
+            draw = new ol.interaction.Draw({
+                source: source1,
+                type: 'LineString',
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: '#ffcc33',
+                        width: 6
+                    }),
+                    image: new ol.style.Circle({
+                        radius: 7,
+                        fill: new ol.style.Fill({
+                            color: '#ffcc33'
+                        })
+                    })
+                }),
+                maxPoints: 2,
+                geometryFunction: function (coordinates, geometry) {
+                    if (!geometry) {
+                        geometry = new ol.geom.Polygon(null);
+                    }
+                    var start = coordinates[0];
+                    var end = coordinates[1];
+                    geometry.setCoordinates([
+                        [start, [start[0], end[1]], end, [end[0], start[1]], start]
+                    ]);
+                    return geometry;
+                }
+            })
+            draw.on('drawend', function (event) {
+                //清空原来选中的数据
+                clusterSource.getSource().clear();
+                source1.clear();
+                map.removeLayer(clusters);
+                var geo = event.feature.getGeometry();
+                var tempAllFeature = new Array()
+                for (var j = 0; j < allFeature.length; j++) {
+                    var a = allFeature[j];
+                    var temp = a.getGeometry().getCoordinates();
+                    if (geo.intersectsCoordinate(temp)) {
+                        // a.setStyle(style)
+                        tempAllFeature.push(a);
+                    }
+                }
+                if (tempAllFeature.length > 0) {
+                    clusterSource.getSource().addFeatures(tempAllFeature);
+                    map.addLayer(clusters);
+                }
+            });
+            map.addInteraction(draw);
+        }
+
+        addInteraction();
+        return action
+    }
+});

src/main/resources/com/fr/plugin/js/map4.js

@@ -0,0 +1,296 @@
+!(function () {
+
+    Van.FRChartBridge.poMapWrapper = Van.FRChartBridge.AbstractChart.extend({
+        //初始化方法，这里使用echarts的初始化方法，并且在echarts图表的点击事件中绑定了超链方法
+        _init: function (dom, option) {
+            var that = this;
+            var action = $(dom);
+            var id = this.uuid();
+            action.attr("id", id);
+            var datas = this.options.chartAttr;
+
+
+            var style = new ol.style.Style({
+                image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                    anchor: [0.5, 46],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'pixels',
+                    opacity: 0.95,
+                    src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+                }))
+            });
+            var allFeature = [];
+            for (var i = 0; i < datas.lat.length; i++) {
+                var coreLocation = [parseFloat(datas.lat[i]), parseFloat(datas.lng[i])];
+                var pp = new ol.geom.Point(coreLocation)
+                pp.set("type", "zzl")
+                var feature = new ol.Feature(pp)
+                feature.set("type", "zzl")
+                feature.setStyle(style);
+                allFeature.push(feature);
+                // source.addFeature(feature);
+            }
+            var source = new ol.source.Vector({
+                features: allFeature
+            });
+
+            //初始化聚合标注数据源
+            var clusterSource = new ol.source.Cluster({
+                distance: 20,
+                source: source
+            });
+
+            //样式缓存
+            var styleCache = {};
+
+            // 聚合
+            var clusters = new ol.layer.Vector({
+                source: clusterSource,
+                style: function (feature) {
+                    var size = feature.get('features').length;
+                    var style = styleCache[size];
+                    if (!style) {
+                        if (size === 1) {
+                            style = new ol.style.Style({
+                                image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                                    anchor: [0.5, 46],
+                                    anchorXUnits: 'fraction',
+                                    anchorYUnits: 'pixels',
+                                    opacity: 0.95,
+                                    src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
+                                }))
+                            });
+                        } else {
+                            style = new ol.style.Style({
+                                image: new ol.style.Circle({
+                                    radius: 10,
+                                    stroke: new ol.style.Stroke({
+                                        color: '#fff'
+                                    }),
+                                    fill: new ol.style.Fill({
+                                        color: '#3399CC'
+                                    })
+                                }),
+                                text: new ol.style.Text({
+                                    text: size.toString(),
+                                    fill: new ol.style.Fill({
+                                        color: '#fff'
+                                    })
+                                })
+                            });
+                        }
+
+                        styleCache[size] = style;
+                    }
+                    return style;
+                }
+            });
+            //用来鼠标绘制内容的层
+            var source1 = new ol.source.Vector();
+            var vector1 = new ol.layer.Vector({
+                source: source1
+            });
+
+            var map = window.map = new ol.Map({
+                target: id,
+                controls: ol.control.defaults().extend([
+                    new ol.control.MousePosition()
+                ]),
+                layers: [
+                    new ol.layer.Tile({
+                        source: new ol.source.XYZ({
+                            url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+                                '?apikey=76aa4d0c90314c6fbfbe574ec63e0b26'
+                        })
+                    }),
+                    vector1,
+                ],
+                view: new ol.View({
+                    center: [11583663.78341984,
+                        3588508.27616124],
+                    zoom: 12
+                })
+            });
+
+            // // 监听地图分辨率改变事件
+            map.getView().on('change:resolution', function (event) {
+                if (map.getView().getZoom() >= 13) {
+                    clusterSource.setDistance(0);
+                } else {
+                    clusterSource.setDistance(40);
+                }
+            })
+
+            var draw; // global so we can remove it later
+            var modify;
+
+            function addInteraction() {
+                if (modify) {
+                    map.removeInteraction(modify);
+                    modify = null;
+                }
+                var geometryFunction;
+                geometryFunction = ol.interaction.Draw.createBox();
+                draw = new ol.interaction.Draw({
+                    source: source1,
+                    type: 'LineString',
+                    style: new ol.style.Style({
+                        fill: new ol.style.Fill({
+                            color: 'rgba(255, 255, 255, 0.2)'
+                        }),
+                        stroke: new ol.style.Stroke({
+                            color: '#ffcc33',
+                            width: 6
+                        }),
+                        image: new ol.style.Circle({
+                            radius: 7,
+                            fill: new ol.style.Fill({
+                                color: '#ffcc33'
+                            })
+                        })
+                    }),
+                    maxPoints: 2,
+                    geometryFunction: function (coordinates, geometry) {
+                        if (!geometry) {
+                            geometry = new ol.geom.Polygon(null);
+                        }
+                        var start = coordinates[0];
+                        var end = coordinates[1];
+                        geometry.setCoordinates([
+                            [start, [start[0], end[1]], end, [end[0], start[1]], start]
+                        ]);
+                        return geometry;
+                    }
+                })
+                draw.on('drawend', function (event) {
+                    //清空原来选中的数据
+                    clusterSource.getSource().clear();
+                    // source1.clear();
+                    map.removeLayer(clusters);
+                    var geo = event.feature.getGeometry();
+                    var tempAllFeature = new Array()
+                    for (var j = 0; j < allFeature.length; j++) {
+                        var a = allFeature[j];
+                        var temp = a.getGeometry().getCoordinates();
+                        if (geo.intersectsCoordinate(temp)) {
+                            // a.setStyle(style)
+                            tempAllFeature.push(a);
+                        }
+                    }
+                    if (tempAllFeature.length > 0) {
+                        $.each(tempAllFeature,function (i,v){
+                            console.info(v.get("type"))
+                        })
+                        clusterSource.getSource().addFeatures(tempAllFeature);
+                        map.addLayer(clusters);
+                        movePoint();
+                    }
+                });
+                map.addInteraction(draw);
+            }
+
+
+            function movePoint() {
+                modify = new ol.interaction.Modify({
+                    source: clusterSource.getSource()
+                });
+                if (draw) {
+                    map.removeInteraction(draw);
+                    draw = null;
+                }
+                var startPoint;
+                modify.on("modifystart", function (e) {
+                    startPoint = e.mapBrowserEvent.coordinate;
+                    var test= source.getClosestFeatureToCoordinate(startPoint)
+                    debugger
+                    var features = map.forEachFeatureAtPixel(e.mapBrowserEvent.pixel, function (feature, layer) {
+                       console.info("4444",feature.get("type"))
+
+                        if (feature.get("local")) {
+                            console.info("111", feature)
+                        } else {
+                            var fpoint = new ol.Feature({
+                                geometry: new ol.geom.Point(startPoint)
+                            });
+                            console.info("2222", feature)
+                            source1.addFeature(fpoint);
+                            feature.set("local", startPoint)
+                        }
+                        return feature;
+                    });
+                    debugger
+                    // if (features) {
+                    //     features.getProperties()
+                    //     //只有当没有存储过初始点的时候才存
+                    //     if (!!!features.get("local")) {
+                    //         debugger
+                    //         var feature = new ol.Feature({
+                    //             geometry: new ol.geom.Point(startPoint)
+                    //         });
+                    //         source1.addFeature(feature);
+                    //         features.set("local", e.mapBrowserEvent.coordinate);
+                    //     }
+                    // }
+                });
+                modify.on("modifyend", function (e) {
+                    var features = map.forEachFeatureAtPixel(e.mapBrowserEvent.pixel, function (fineFe, layer) {
+                        var lines = fineFe.get("lines");
+                        if (lines) {
+                            source1.removeFeature(lines)
+                        }
+                        var local = fineFe.get("local");
+                        if (local) {
+                            var fline = new ol.Feature({
+                                geometry: new ol.geom.LineString([local, e.mapBrowserEvent.coordinate])
+                            });
+                            source1.addFeature(fline);
+                            fineFe.set("lines", fline);
+                        }
+                    });
+                    // if (features) {
+                    //     //第一步找出这个fe之前创建的连线先删除掉
+                    //
+                    // }
+                    // debugger
+                    // if (startPoint) {
+                    //     var feature = new ol.Feature({
+                    //         geometry: new ol.geom.LineString([startPoint, e.mapBrowserEvent.coordinate])
+                    //     });
+                    //     source1.addFeature(feature);
+                    // }
+                });
+                map.addInteraction(modify);
+            }
+
+            addInteraction();
+            var qxms = $("<button > 圈选模式</button>").click(function () {
+                addInteraction();
+            })
+            var movems = $("<button > 移动模式</button>").click(function () {
+                movePoint();
+            })
+            var topBtn = $("<div class='maptopare'></div>").append(qxms).append(movems);
+            action.append(topBtn)
+            return action
+        },
+        uuid: function () {
+            var s = [];
+            var hexDigits = "0123456789abcdef";
+            for (var i = 0; i < 12; i++) {
+                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+            }
+            return 'mp' + s.join("");
+        },
+        //自动刷新方法。开启自动刷新后会根据时间间隔调用此方法
+        _refresh: function (chart, option) {
+            debugger
+            chart.setOption(option);
+        },
+
+        //定义空数据的条件，这里是当options.series.data.length长度为0时，代表空数据，主要原因是判断空数据时，显示默认的空数据背景
+        _emptyData: function (options) {
+            debugger
+            return options === 0;
+        }
+    })
+})();

src/main/resources/com/fr/plugin/js/openlayer/ol.css

@@ -0,0 +1 @@
+.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}