node-red-contrib-gaode/gaode.html

node red node for gaode

<script type="text/javascript">
    RED.nodes.registerType('gaode', {
        category: 'gaode',
        color: '#25A5F7',
        paletteLabel: "逆地理编码",
        defaults: {
            server: { value: "", type: "gaode-server" },
            name: { value: "" },
            longitude: { value: "" },
            latitude: { value: "" },
            zoom: { value: "" },
            convert: { value:  true },
            srcCrs: { value: 'WGS84', require: false },
            toCrs: { value: 'GCJ02', require: false },
        },
        inputs: 1,
        outputs: 1,
        icon: "location.png",
        label: function () {
            return this.name || "逆地理编码";
        },
        oneditprepare: function () {
            
            $("#node-input-convert").on("change", function () {
                if (this.checked == true) {
                    $("#node-input-convert-type").show();
                } else {
                    $("#node-input-convert-type").hide();
                }
            });
        }
    });

    RED.nodes.registerType('gaode-convert', {
        category: 'gaode',
        color: '#25A5F7',
        paletteLabel: "地理坐标系转换",
        defaults: {
            name: { value: "" },
            longitude: { value: "" },
            latitude: { value: "" },
            srcCrs: { value: 'WGS84', require: false },
            toCrs: { value: 'GCJ02', require: false },
        },
        inputs: 1,
        outputs: 1,
        icon: "location.png",
        label: function () {
            return this.name || "坐标系转换";
        }
    });

    RED.nodes.registerType('gaode-direction', {
        category: 'gaode',
        color: '#25A5F7',
        paletteLabel: "高德距离警报",
        defaults: {
            server: { value: "", type: "gaode-server" },
            name: { value: "" },
            longitude_source: { value: "" },
            latitude_source: { value: "" },
            longitude_direction: { value: "" },
            latitude_direction: { value: "" },
            city: { value: "" , require: true},
            s1: { value: true },
            s2: { value: false },
            s3: { value: false },
            s4: { value: false },
            convert: { value: true },
            convertTo: { value: false },
            api1: { value: true },
            api2: { value: false },
            auto: { value: false },
            srcCrs: { value: 'WGS84', require: false },
            toCrs: { value: 'GCJ02', require: false },
        },
        inputs: 1,
        outputs: 1,
        icon: "warning.png",
        label: function () {
            return this.name || "高德距离警报";
        },
        oneditprepare: function () {
            const node = this
            $("#node-input-s1").on("change", function () {
                if (!this.checked) return;
                $("#node-input-s2").prop('checked', !this.checked);
                $("#node-input-s3").prop('checked', !this.checked);
                $("#node-input-s4").prop('checked', !this.checked);
                $("#node-input-city-row").hide();
            });

            $("#node-input-s2").on("change", function () {
                if (!this.checked) return;
                $("#node-input-s1").prop('checked', !this.checked);
                $("#node-input-s3").prop('checked', !this.checked);
                $("#node-input-s4").prop('checked', !this.checked);
                $("#node-input-city-row").hide();
            });

            $("#node-input-s3").on("change", function () {
                if (!this.checked) return;
                $("#node-input-s2").prop('checked', !this.checked);
                $("#node-input-s1").prop('checked', !this.checked);
                $("#node-input-s4").prop('checked', !this.checked);
                $("#node-input-city-row").hide();

            });

            $("#node-input-s4").on("change", function () {
                if (!this.checked) return;
                $("#node-input-s2").prop('checked', !this.checked);
                $("#node-input-s3").prop('checked', !this.checked);
                $("#node-input-s1").prop('checked', !this.checked);
                $("#node-input-city-row").show();
            });

            $("#node-input-api1").on("change", function () {
                if (!this.checked) return;
                $("#node-input-auto").prop('checked', !this.checked);
                $("#node-input-api2").prop('checked', !this.checked);
                $("#node-input-s4").show();
            });

            $("#node-input-api2").on("change", function () {
                if (!this.checked) return;
                $("#node-input-api1").prop('checked', !this.checked);
                $("#node-input-auto").prop('checked', !this.checked);
                $("#node-input-s4").hide();

                if ($("#node-input-s4").is(":checked")) {
                    $("#node-input-s1").prop('checked', true);
                    $("#node-input-s4").prop('checked', false);
                }
            });

            $("#node-input-auto").on("change", function () {
                if (!this.checked) return;
                $("#node-input-api1").prop('checked', !this.checked);
                $("#node-input-api2").prop('checked', !this.checked);
                $("#node-input-s4").hide();

                if ($("#node-input-s4").is(":checked")) {
                    $("#node-input-s1").prop('checked', true);
                    $("#node-input-s4").prop('checked', false);
                }
            });

            $("#node-input-convert").on("change", function () {
                if (this.checked == true || $("#node-input-convertTo").is(":checked")) {
                    $("#node-input-convert-type").show();
                } else {
                    $("#node-input-convert-type").hide();
                }
            });

            $("#node-input-convertTo").on("change", function () {
                if (this.checked == true || $("#node-input-convert").is(":checked")) {
                    $("#node-input-convert-type").show();
                } else {
                    $("#node-input-convert-type").hide();
                }
            });
        }
    });


    RED.nodes.registerType('gaode-server', {
        category: 'config',
        defaults: {
            name: { value: "默认高德key", required: true },
            gaodeKey: { value: "", required: true },
        },
        label: function () {
            return this.name;
        }
    });
</script>

<script type="text/x-red" data-template-name="gaode-convert">

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>


    <div class="form-row">
        <label for="node-input-srcCrs"><i class="icon-tag"></i>原始坐标格式</label>
        <select type="text" id="node-input-srcCrs" >
            <option value="WGS84" >gps 格式</option>
            <option value="GCJ02" ">高德</option>
            <option value="BD09" >百度</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-toCrs"><i class="icon-tag"></i>目标坐标格式</label>
        <select type="text" id="node-input-toCrs" >
            <option value="WGS84" >gps 格式</option>
            <option value="GCJ02" ">高德</option>
            <option value="BD09" >百度</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-longitude"><i class="icon-tag"></i>经度</label>
        <input type="text" id="node-input-longitude" maxlength='78' placeholder="(msg.payload.longitude)">
    </div>

    <div class="form-row">
        <label for="node-input-latitude"><i class="icon-tag"></i>纬度</label>
        <input type="text" id="node-input-latitude" maxlength='78' placeholder="(msg.payload.latitude)">
    </div>

</script>


<script type="text/x-red" data-help-name="gaode-convert">
    坐标系转换，支持 gps、高德、百度
</script>

<script type="text/x-red" data-template-name="gaode">
    <div class="form-row">
        <label for="node-input-server"><i class="icon-tag"></i> Server</label>
        <input type="text" id="node-input-server" placeholder="Server">
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class="form-row">
        <label for="node-input-convert"><i class="icon-tag"></i>坐标系转换设置</label>
        <input type="checkbox" id="node-input-convert" style="width:70%;"/>
    </div>

    <div id="node-input-convert-type">
        <div class="form-row">
            <label for="node-input-srcCrs"><i class="icon-tag"></i>原始坐标格式</label>
            <select type="text" id="node-input-srcCrs" >
                <option value="WGS84" >gps 格式</option>
                <option value="GCJ02" ">高德</option>
                <option value="BD09" >百度</option>
            </select>
        </div>
    
        <div class="form-row">
            <label for="node-input-toCrs"><i class="icon-tag"></i>目标坐标格式</label>
            <select type="text" id="node-input-toCrs" >
                <option value="WGS84" >gps 格式</option>
                <option value="GCJ02" ">高德</option>
                <option value="BD09" >百度</option>
            </select>
        </div>
    </div>

    <div class="form-row">
        <label for="node-input-longitude"><i class="icon-tag"></i>经度</label>
        <input type="text" id="node-input-longitude" maxlength='78' placeholder="(msg.payload.longitude)">
    </div>

    <div class="form-row">
        <label for="node-input-latitude"><i class="icon-tag"></i>纬度</label>
        <input type="text" id="node-input-latitude" maxlength='78' placeholder="(msg.payload.latitude)">
    </div>

    <div class="form-row">
        <label for="node-input-zoom"><i class="icon-tag"></i>缩放比例(1-17)</label>
        <input type="text" id="node-input-zoom" maxlength='78' placeholder="(msg.payload.zoom)">
    </div>

</script>


<script type="text/x-red" data-help-name="gaode">
    <p>配置高德key</p>
    <p>按照要求填写经纬度</p>
</script>


<script type="text/x-red" data-template-name="gaode-direction">
    <div class="form-row">
        <label for="node-input-server"><i class="icon-tag"></i> Server</label>
        <input type="text" id="node-input-server" placeholder="Server">
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class="form-row" id="node-input-city-row">
        <label for="node-input-city"><i class="icon-tag"></i>城市名称(公交方式必填)</label>
        <input type="text" id="node-input-city" maxlength='78' placeholder="(msg.payload.city)">
    </div>

    <div class="form-row">
        <label for="node-input-convert"><i class="icon-tag"></i>坐标系转换设置</label>

        <label style="width: 60px;margin-left: 20px;">转换起点</label>
        <input type="checkbox" id="node-input-convert" style="width: 20px;margin-bottom: 5px;"/>

        <label style="width: 60px;margin-left: 20px;">转换终点</label>
        <input type="checkbox" style="width: 20px;margin-bottom: 5px;" id="node-input-convertTo" />
    </div>

    <div id="node-input-convert-type">
        <div class="form-row">
            <label for="node-input-srcCrs"><i class="icon-tag"></i>原始坐标格式</label>
            <select type="text" id="node-input-srcCrs" >
                <option value="WGS84" >gps 格式</option>
                <option value="GCJ02" ">高德</option>
                <option value="BD09" >百度</option>
            </select>
        </div>
    
        <div class="form-row">
            <label for="node-input-toCrs"><i class="icon-tag"></i>目标坐标格式</label>
            <select type="text" id="node-input-toCrs" >
                <option value="WGS84" >gps 格式</option>
                <option value="GCJ02" ">高德</option>
                <option value="BD09" >百度</option>
            </select>
        </div>
    </div>

    <div class="form-row">
        <label for="node-input-longitude_source"><i class="icon-tag"></i>起始经度</label>
        <input type="text" id="node-input-longitude_source" maxlength='78' placeholder="(msg.payload.longitude_source)">
    </div>

    <div class="form-row">
        <label for="node-input-latitude_source"><i class="icon-tag"></i>起始纬度</label>
        <input type="text" id="node-input-latitude_source" maxlength='78' placeholder="(msg.payload.latitude_source)">
    </div>

    <div class="form-row">
        <label for="node-input-longitude_direction"><i class="icon-tag"></i>终点经度</label>
        <input type="text" id="node-input-longitude_direction" maxlength='78' placeholder="(msg.payload.longitude_direction)">
    </div>

    <div class="form-row">
        <label for="node-input-latitude_direction"><i class="icon-tag"></i>终点纬度</label>
        <input type="text" id="node-input-latitude_direction" maxlength='78' placeholder="(msg.payload.latitude_direction)">
    </div>

    <div class="form-row">
        <label for="node-input-api"><i class="icon-tag"></i>api版本</label>

        <label style="width: 20px;margin-left: 20px;"> 1.0</label>
        <input type="checkbox" id="node-input-api1" style="width: 20px;margin-bottom: 5px;"/>

        <label style="width: 20px;margin-left: 20px;">2.0</label>
        <input type="checkbox" style="width: 20px;margin-bottom: 5px;" id="node-input-api2" />

        <label style="width: 60px;margin-left: 20px;">自动模式</label>
        <input type="checkbox" style="width: 20px;margin-bottom: 5px;" id="node-input-auto" />
    </div>

    <div class="form-row mp1socket">
        <table>
            <tr>
                <td><label><i class="fa fa-plug"></i>方式(只能选择一个)</label></td>
                <td>
                    <table>
                        <thead>
                            <tr>
                                <th>驾车</th>
                                <th>步行</th>
                                <th>骑车</th>
                                <th>公交</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input name="direction"  id="node-input-s1" type='checkbox' /></td>
                                <td><input name="direction"  id="node-input-s2" type='checkbox' /></td>
                                <td><input name="direction"  id="node-input-s3" type='checkbox' /></td>
                                <td><input name="direction"  id="node-input-s4" type='checkbox' /></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>

</script>


<script type="text/x-red" data-help-name="gaode-direction">
    <p>配置高德key</p>
    <p>按照要求填写经纬度</p>
    <p>行驶方式只可以选择一个,选择多个第一个生效</p>
</script>


<script type="text/x-red" data-template-name="gaode-server">
    <div class="form-row">
        <label for="node-config-input-name"><i class="icon-bookmark"></i> 默认名称</label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-gaodeKey"><i class="icon-bookmark"></i>Key</label>
        <input type="text" id="node-config-input-gaodeKey">
    </div>

    <div class="form-row">
        <label style="width: 100%;text-align: right;padding-right: 34px;box-sizing: border-box;" >
          <a href="https://mp.weixin.qq.com/s/vjyJ_GVd8RPaofuSRfUM9g" target="_blank">节点使用教程和场景说明</a>
        </label>
      </div>
   
</script>

<script type="text/x-red" data-help-name="gaode-server">
    <p>高德地图web服务的key</p>
</script>