The realization of the function of OL3 + middle chain home map house searching

Summary

Today, let's talk about how to realize the function of finding house by map in the version of OL3 +.

Preparation

1. Functional analysis

Look at the map room searching function of chainhouse, which is relatively simple, mainly including:
1) Statistical display based on administrative division;
2) Display by level and drill step by step.

2. Data acquisition

First, open Link home map to house , press F12 to enter the debugging, switch to the "network" tab, select "js", enter the keyword "callback=J" in the filter, and click one by one at this time, you can see the data we want, as shown below:

Explain:
1. Through the captured data, I verified the functional analysis I just started;
2. To get more, you can take a step-by-step look. There are only two levels in this demo.

Effect


Realization

1. Display data

    function addZoneStatic(result) {
        var _features = [];
        for(var code in result){
            var _result = result[code];
            var _coord = ol.proj.fromLonLat([_result.longitude, _result.latitude]);
            var _geom = new ol.geom.Point(_coord);
            var _feature = new ol.Feature({
                geometry: _geom,
                attr: _result
            });
            _features.push(_feature);
        }
        source.addFeatures(_features);
    }

2. Mouse over highlight

    var select = new ol.interaction.Select({
        condition: ol.events.condition.pointerMove,
        layers:[vector],
        style: selectStyle
    });
    map.addInteraction(select);

3. Drilling down

    map.on("click", function (e) {
        select.setActive(false);
        if(map.hasFeatureAtPixel(e.pixel)){
            source.clear();
            var _feature = map.getFeaturesAtPixel(e.pixel)[0];
            var _attr = _feature.get("attr");
            var _border = dealBorder(_attr.border);
            var _bGeom = new ol.geom.Polygon([_border]);
            _bGeom.transform("EPSG:4326", "EPSG:3857");
            var _extent = _bGeom.getExtent();
            map.getView().fit(_extent, map.getSize());

            $.get("data/haidian.json", function (result) {
                addZoneStatic(result);
                select.setActive(true);
            });
        }
    });

4. Core code - setting style

    function getStyle(feature, isselect) {
        var styles = [];

        var _attr = feature.get("attr");
        var _price = (_attr.unit_price/10000).toFixed(1)+"ten thousand",
            _count = _attr.count.toString(),
            _name = _attr.name,
            _lon = _attr.longitude,
            _lat = _attr.latitude;
        var _coord = ol.proj.fromLonLat([_lon, _lat]);
        var _geom = new ol.geom.Point(_coord);

        var _color = isselect?"rgba(200, 0, 0, .75)":"rgba(0, 200, 0, .75)";
        var _font = "normal 12px Microsoft YaHei",
            _offset = 17;
        styles.push(new ol.style.Style({
            image: new ol.style.Circle({
                radius: 45,
                fill: new ol.style.Fill({
                    color: _color
                })
            }),
            text: new ol.style.Text({
                text: _price,
                textAlign:"center",
                textBaseline:"middle",
                offsetY:"0",
                font: _font,
                fill: new ol.style.Fill({
                    color: '#fff'
                })
            })
        }));

        styles.push(new ol.style.Style({
            geometry: _geom,
            text: new ol.style.Text({
                text: _name,
                textAlign: "center",
                textBaseline: "middle",
                font: _font,
                offsetY: -_offset,
                fill: new ol.style.Fill({
                    color: '#fff'
                })
            })
        }));

        styles.push(new ol.style.Style({
            geometry: _geom,
            text: new ol.style.Text({
                text: _count,
                textAlign:"center",
                textBaseline:"middle",
                font: _font,
                offsetY: _offset,
                fill: new ol.style.Fill({
                    color: '#fff'
                })
            })
        }));

        return styles;
    }
    //Selected style
    function selectStyle(feature) {
        var _attr = feature.get("attr"),
            _styles = getStyle(feature, true);

        var _border = dealBorder(_attr.border);
        var _bGeom = new ol.geom.Polygon([_border]);
        _bGeom.transform("EPSG:4326", "EPSG:3857");
        _styles.push(new ol.style.Style({
            geometry: _bGeom,
            stroke: new ol.style.Stroke({
                color: "rgba(200, 0, 0, .75)",
                width: 2
            }),
            fill: new ol.style.Fill({
                color: "rgba(200, 0, 0, .1)"
            })
        }));
        return _styles;
    }

Technology blog
CSDN: http://blog.csdn.NET/gisshixisheng
Online tutorials
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
Contact information

type content
qq 1004740957
official account lzugis15
e-mail niujp08@qq.com
webgis group 452117357
Android group 337469080
GIS data visualization group 458292378

The "GIS lecture hall" knowledge planet has been opened. On the planet, I will provide one-to-one Q & a service. You ask and I answer, and I look forward to meeting you.

Tags: network JSON Android

Posted on Fri, 31 Jan 2020 14:08:22 -0500 by jaymc