OpenLayers示例代码：topolis集成
OpenLayers示例代码：topolis集成
<!DOCTYPE html>
<html>
<head>
<title>topolis integration</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/topolis/releases/0.1.1/topolis.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
</head>
<body>
<div id="map" class="map"></div>
<script>
// this example uses topolis and toastr for which we don't have an externs file.
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var nodes = new ol.source.Vector({wrapX: false});
var nodesLayer = new ol.layer.Vector({
source: nodes,
style: function(f) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.2)'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
}),
text: new ol.style.Text({
text: f.get('node').id.toString(),
fill: new ol.style.Fill({color: 'red'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 3
})
})
});
return [style];
}
});
var edges = new ol.source.Vector({wrapX: false});
var edgesLayer = new ol.layer.Vector({
source: edges,
style: function(f) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
text: new ol.style.Text({
text: f.get('edge').id.toString(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
});
return [style];
}
});
var faces = new ol.source.Vector({wrapX: false});
var facesLayer = new ol.layer.Vector({
source: faces,
style: function(f) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.2)'
}),
text: new ol.style.Text({
font: 'bold 12px sans-serif',
text: f.get('face').id.toString(),
fill: new ol.style.Fill({color: 'green'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
});
return [style];
}
});
var map = new ol.Map({
layers: [raster, facesLayer, edgesLayer, nodesLayer],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 16
})
});
var topo = topolis.createTopology();
topo.on('addnode', nodeToFeature);
topo.on('removenode', function(e) {
removeElementFeature(nodes, e);
});
topo.on('addedge', edgeToFeature);
topo.on('modedge', function(e) {
var feature = edges.getFeatureById(e.id);
feature.setGeometry(new ol.geom.LineString(e.coordinates));
});
topo.on('removeedge', function(e) {
removeElementFeature(edges, e);
});
topo.on('addface', faceToFeature);
topo.on('removeface', function(e) {
removeElementFeature(faces, e);
});
function removeElementFeature(source, element) {
var feature = source.getFeatureById(element.id);
source.removeFeature(feature);
}
function nodeToFeature(node) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(node.coordinate),
node: node
});
feature.setId(node.id);
nodes.addFeature(feature);
}
function edgeToFeature(edge) {
var feature = new ol.Feature({
geometry: new ol.geom.LineString(edge.coordinates),
edge: edge
});
feature.setId(edge.id);
edges.addFeature(feature);
}
function faceToFeature(face) {
var coordinates = topo.getFaceGeometry(face);
var feature = new ol.Feature({
geometry: new ol.geom.Polygon(coordinates),
face: face
});
feature.setId(face.id);
faces.addFeature(feature);
}
function createNode(topo, coord) {
var node;
var existingEdge = topo.getEdgeByPoint(coord, 5)[0];
if (existingEdge) {
node = topo.modEdgeSplit(existingEdge, coord);
} else {
node = topo.addIsoNode(coord);
}
return node;
}
function onDrawend(e) {
var edgeGeom = e.feature.getGeometry().getCoordinates();
var startCoord = edgeGeom[0];
var endCoord = edgeGeom[edgeGeom.length - 1];
var start, end;
try {
start = topo.getNodeByPoint(startCoord);
end = topo.getNodeByPoint(endCoord);
var edgesAtStart = topo.getEdgeByPoint(startCoord, 5);
var edgesAtEnd = topo.getEdgeByPoint(endCoord, 5);
var crossing = topo.getEdgesByLine(edgeGeom);
if (crossing.length === 1 && !start && !end && edgesAtStart.length === 0 && edgesAtEnd.length === 0) {
topo.remEdgeNewFace(crossing[0]);
start = crossing[0].start;
if (start.face) {
topo.removeIsoNode(start);
}
end = crossing[0].end;
if (end.face) {
topo.removeIsoNode(end);
}
return;
}
if (!start) {
start = createNode(topo, startCoord);
edgeGeom[0] = start.coordinate;
}
if (!end) {
end = createNode(topo, endCoord);
edgeGeom[edgeGeom.length - 1] = end.coordinate;
}
topo.addEdgeNewFaces(start, end, edgeGeom);
} catch (e) {
toastr.warning(e.toString());
}
}
var draw = new ol.interaction.Draw({
type: 'LineString'
});
draw.on('drawend', onDrawend);
map.addInteraction(draw);
var snap = new ol.interaction.Snap({
source: edges
});
map.addInteraction(snap);
map.addControl(new ol.control.MousePosition());
</script>
</body>
</html>
说明：
OpenLayers示例代码：topolis集成
