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

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.

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

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.

31 January 2020, 14:08 | Views: 3271